¿Cómo agregar una vista personalizada dentro de la barra de acción en Android?

En Android, una barra de acción o barra de aplicaciones es un espacio dedicado en la parte superior de la aplicación en la pantalla que indica el nombre de la aplicación o actividad. Una barra de acción ayuda a los usuarios a navegar o ubicarse en la aplicación. En la siguiente imagen se muestra una barra de acción de muestra.

En este artículo, le mostraremos cómo puede personalizar la barra de acción creando y mostrando una vista personalizada en Android. Siga los pasos a continuación una vez que el IDE esté listo.

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Demostramos la aplicación en Kotlin , así que asegúrese de seleccionar Kotlin como idioma principal al crear un nuevo proyecto.

Paso 2: cree una vista personalizada my_layout.xml

Vaya a app > res > layout y cree un nuevo diseño de recursos de Android haciendo clic con el botón derecho en la carpeta y seleccionando la opción adecuada. Cree la vista deseada. Hemos creado uno que se muestra a continuación. Hemos creado un diseño lineal horizontal que se comparte por igual con TextView y Button.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:weightSum="2"
        android:orientation="horizontal">
  
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:textColor="@color/white"
            android:text="TextView"/>
  
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:backgroundTint="@color/black"
            android:text="Button"/>
  
    </LinearLayout>
  
</RelativeLayout>

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml . No se requieren cambios ya que este archivo no tiene importancia para cambiar los atributos de la barra de acción.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Example of a Custom Action Bar!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 4: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

package org.geeksforgeeks.customactionbar
  
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.appcompat.app.ActionBar
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
          
        // Calling the support action bar and setting it to custom
        this.supportActionBar!!.displayOptions = ActionBar.DISPLAY_SHOW_CUSTOM
        
        // Displaying the custom layout in the ActionBar
        supportActionBar!!.setDisplayShowCustomEnabled(true)
        supportActionBar!!.setCustomView(R.layout.my_layout)
    }
}

Producción:

Puede ver a continuación que el diseño personalizado que creamos se muestra en la barra de acción.