¿Cómo agregar un fondo de barra de herramientas personalizado en Android?

Una barra de herramientas es básicamente una barra de acción de formulario que contiene muchos elementos interactivos. Una barra de herramientas admite una característica más enfocada que una barra de acción. La barra de herramientas se agregó en Android Lollipop (API 21) y es la sucesora de ActionBar . La barra de herramientas es un ViewGroup que se puede colocar en cualquier lugar de los diseños XML. La apariencia y el comportamiento de la barra de herramientas se pueden personalizar de manera más eficiente que la barra de acciones. Las barras de herramientas son más flexibles que ActionBar. Uno puede simplemente cambiar su color, tamaño y posición. También podemos agregarle etiquetas, logotipos, iconos de navegación y otras vistas. En este artículo, veremos cómo podemos personalizar el fondo de la barra de herramientas usando varios métodos. Veremos los siguientes métodos: 

• Fondo de color sólido
• Fondo degradado personalizado
• Fondo de imagen

Nota: antes de agregar una barra de herramientas personalizada en su aplicación, elimine la barra de acción predeterminada en su aplicación de Android siguiendo este enlace . 

Fondo de color sólido 

Este es el método más fácil para agregar un fondo a una barra de herramientas. En este método, usamos el atributo de fondo para establecer un color sólido. Podemos ingresar el código hexadecimal del color o podemos definir un color en el directorio de recursos de valores. Siga los pasos a continuación:

• Cree una barra de herramientas en el archivo activity_main.xml .
• Agregue un valor de color en el archivo colors.xml con un nombre.
• Agregue un atributo de fondo en la barra de herramientas en el archivo activity_main.xml con el nombre del color creado en el archivo colors.xml .

A continuación se muestra el código para el archivo activity_main.xml :

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/blue"
        android:title="GeeksForGeeks" />
  
</RelativeLayout>

A continuación se muestra el código para el archivo colors.xml .

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#6200EE</color>
    <color name="blue">#3700B3</color>
    <color name="colorAccent">#03DAC5</color> 
</resources>

Interfaz de usuario de salida:

Fondo degradado personalizado

Los colores degradados se pueden crear con la ayuda de dos o más colores. XML nos ofrece una forma genial de crear nuestro propio color degradado que puede usarse como fondo en muchos lugares. Siga los pasos a continuación para crear y establecer un fondo degradado: 

• Cree un archivo XML en la carpeta dibujable en recursos. (Vaya a la aplicación> res> dibujable> Haga clic con el botón derecho> Nuevo> Archivo de recursos dibujable y nombre el archivo como fondo )
• Cree una forma dentro del elemento y luego coloque la etiqueta de degradado.
• Agregue los siguientes atributos:
  • ángulo: Esto establecerá el ángulo en el que se desvanecerán los dos colores.
  • startColor: El primer color del fondo.
  • endColor: El segundo color del fondo.
  • tipo: Esto establecerá si el fundido será lineal o circular.
• Una vez que se crea el XML de fondo, configúrelo en el atributo de fondo en el archivo activity_main.xml .

A continuación se muestra el código para el archivo background.xml .

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:angle="90"
                android:startColor="#2EDADA"
                android:endColor="#22B9D3"
                android:type="linear"/>
        </shape>
    </item>
</selector>

A continuación se muestra el código para el archivo activity_main.xml :

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/background"
        android:title="GeeksForGeeks" />
  
</RelativeLayout>

Interfaz de usuario de salida:

Fondo de imagen 

También podemos usar imágenes como fondo en lugar de colores. Para eso, nuevamente usaremos el atributo de fondo en activity_main.xml . Lo único que debemos tener en cuenta es que las dimensiones de la imagen deben ser del mismo tamaño que las de la barra de herramientas porque el atributo de fondo se recorta para ajustar la imagen en el espacio. Vea los siguientes pasos:

• Agregue la imagen a la carpeta dibujable en recursos.
• Establezca la imagen en el atributo dibujable de la barra de herramientas en el archivo activity_main.xml .
• Asegúrese de que la imagen y la barra de herramientas tengan las mismas dimensiones.

A continuación se muestra el código para el archivo activity_main.xml :

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/image"/>
  
</RelativeLayout>

Interfaz de usuario de salida: