¿Cómo personalizar el menú de opciones de la barra de herramientas en Android?

En este artículo veremos cómo añadir iconos y cambiar el color de fondo en el menú de opciones de la barra de herramientas . El menú de opciones es una colección de elementos de menú de una actividad. Los menús de opciones de Android son los menús principales de la actividad. Se pueden utilizar para la configuración, la búsqueda, la eliminación de elementos, etc. Primero crearemos recursos vectoriales para el icono. Luego configuraremos el icono en los elementos de la barra de herramientas. De manera similar, para el fondo, primero crearemos un estilo personalizado para la barra de herramientas. Luego configuraremos el tema en la barra de herramientas. 

Implementación paso a paso

Paso 1: crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . 

Paso 2: Implementar el menú de opciones

Para crear el menú de opciones de una actividad en Android Studio, consulte Cómo implementar el menú de opciones en Android .

Paso 3: Agregar activos vectoriales

Haga clic con el botón derecho en la carpeta dibujable y vaya al nuevo recurso vectorial. Busque entre muchos iconos vectoriales y cree uno. También puedes añadir una imagen desde el exterior pero con la dimensión adecuada.

Paso 4: Definir colores

Siempre es mejor predefinir strings y colores en lugar de codificarlos, por lo tanto, definiremos los colores.

• Abra el archivo colors.xml navegando a la aplicación -> res -> valores -> colors.xml.
• Cree una etiqueta de color dentro de la etiqueta de recursos con un nombre y establezca un color con su código hexadecimal.

Agregue las siguientes líneas dentro del archivo colors.xml .

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="green">#0F9D58</color>
</resources>

Paso 5: crea un estilo personalizado

Necesitamos crear un nuevo estilo con parent=”ThemeOverlay.AppCompat.Light” como tema principal. A continuación se muestra el código de estilo.

<resources>
    <style name="MyToolbarStyle" parent="ThemeOverlay.AppCompat.Light">
        <item name="android:colorBackground">@color/green</item>
        <item name="android:textColor">@color/black</item>
    </style>
</resources>

Paso 6: Establecer estilo en la barra de herramientas

En la etiqueta de la barra de herramientas, establezca el estilo en el atributo popupTheme . Mire el código a continuación como referencia.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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">
  
    <androidx.appcompat.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/toolbar"
        android:background="@color/black"
        app:popupTheme="@style/MyToolbarStyle"
        app:title="GFG" />
  
</RelativeLayout>

Paso 7: agregue los iconos a los elementos

• Vaya al archivo menu.xml donde se crean los elementos
• Establezca el atributo showAsAction de la etiqueta del elemento principal en siempre
• Establezca el ícono en la etiqueta de subelementos usando el atributo de ícono

<?xml version="1.0" encoding="utf-8"?>
<menu 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
  
    <item
        android:id="@+id/overflowMenu"
        android:icon="@drawable/ic_baseline_more_vert_24"
        android:title=""
        app:showAsAction="always">
        <menu>
            <item
                android:icon="@drawable/ic_baseline_settings_24"
                android:title="Setting"
                />
            <item
                android:icon="@drawable/ic_baseline_login_24"
                android:title="Logout"
                />
        </menu>
    </item>
</menu>

Interfaz de usuario de salida: