Reemplazo de la barra de acciones

Información general

Uno de los usos más comunes para el Toolbar es reemplazar la barra de acciones predeterminada por un Toolbar personalizado (cuando se crea un nuevo proyecto de Android, usa la barra de acciones predeterminada). Dado queToolbar proporciona la capacidad de agregar logotipos, títulos, elementos de menú, botones de navegación e incluso vistas personalizadas a la sección de la barra de aplicaciones de la interfaz de usuario de una actividad, ofrece una actualización significativa sobre la barra de acciones predeterminada.

Para reemplazar la barra de acciones predeterminada de una aplicación por Toolbar:

1. Cree un nuevo tema personalizado y modifique las propiedades de la aplicación para que use este nuevo tema.

2. Deshabilite el atributo windowActionBar en el tema personalizado y habilite el atributo windowNoTitle.

3. Defina un diseño para Toolbar.

4. Incluya el diseño Toolbar en el archivo de diseño Main.axml de la actividad.

5. Agregue código al método de OnCreate la actividad para buscar y Toolbar llamar SetActionBar a para instalar como ToolBar la barra de acciones.

En las secciones siguientes se explica este proceso con detalle. Se crea una aplicación sencilla y su barra de acciones se reemplaza por un personalizado Toolbar.

Inicio de un proyecto de aplicación

Cree un nuevo proyecto de Android denominado ToolbarFun (consulte Hello, Android para obtener más información sobre cómo crear un nuevo proyecto de Android). Una vez creado este proyecto, establezca los niveles de API de Android mínimos y de destino en Android 5.0 (nivel de API 21 - Lollipop) o posterior. Para obtener más información sobre cómo establecer niveles de versión de Android, consulte Reconocimiento de los niveles de API de Android. Cuando se compila y ejecuta la aplicación, muestra la barra de acciones predeterminada como se muestra en esta captura de pantalla:

Creación de una tarea personalizada

Abra el directorio Resources/values y cree un archivo denominado styles.xml. Reemplace el contenido por el siguiente código XML:

<?xml version="1.0" encoding="utf-8" ?>
<resources>
  <style name="MyTheme" parent="@android:style/Theme.Material.Light.DarkActionBar">
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowActionBar">false</item>
    <item name="android:colorPrimary">#5A8622</item>
  </style>
</resources>

Este XML define un nuevo tema personalizado denominado MyTheme que se basa en el tema Theme.Material.Light.DarkActionBar en Lollipop. El windowNoTitle atributo se establece en true para ocultar la barra de título:

<item name="android:windowNoTitle">true</item>

Para mostrar la barra de herramientas personalizada, el valor predeterminado ActionBar debe estar deshabilitado:

<item name="android:windowActionBar">false</item>

Se usa un valor de colorPrimary verde oliva para el color de fondo de la barra de herramientas:

<item name="android:colorPrimary">#5A8622</item>

Aplicar el tema personalizado

Edite Properties/AndroidManifest.xml y agregue el siguiente android:theme atributo al elemento <application> para que la aplicación use el tema personalizado MyTheme :

<application android:label="@string/app_name" android:theme="@style/MyTheme"></application>

Para obtener más información sobre cómo aplicar un tema personalizado a una aplicación, consulte Uso de temas personalizados.

Definir un diseño de barra de herramientas

En el directorio Resources/layout, cree un nuevo archivo denominado toolbar.xml. Reemplace el contenido por el siguiente código XML:

<?xml version="1.0" encoding="utf-8"?>
<Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?android:attr/actionBarSize"
    android:background="?android:attr/colorPrimary"
    android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"/>

Este XML define el personalizado Toolbar que reemplaza la barra de acciones predeterminada. El alto mínimo del Toolbar se establece en el tamaño de la barra de acciones que reemplaza:

android:minHeight="?android:attr/actionBarSize"

El color de fondo del Toolbar se establece en el color verde oliva definido anteriormente en styles.xml:

android:background="?android:attr/colorPrimary"

A partir de Lollipop, el atributo android:theme se puede usar para aplicar estilo a una vista individual. Los temas de ThemeOverlay.Material introducidos en Lollipop permiten superponer los temas de Theme.Material predeterminados, sobrescribir atributos relevantes para que sean claros o oscuros. En este ejemplo, usa Toolbar un tema oscuro para que su contenido sea claro en color:

android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"

Esta configuración se usa para que los elementos de menú contrastan con el color de fondo más oscuro.

Incluir el diseño de la barra de herramientas

Edite el archivo de diseño Main.axml y reemplace su contenido por el siguiente XML:

<?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">
    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar" />
</RelativeLayout>

Este diseño incluye el Toolbar definido en toolbar.xml y usa un RelativeLayout para especificar que Toolbar se va a colocar en la parte superior de la interfaz de usuario (encima del botón).

Buscar y activar la barra de herramientas

Edite MainActivity.cs y agregue la siguiente instrucción de uso:

using Android.Views;

Además, agregue las siguientes líneas de código al final del OnCreate método :

var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
SetActionBar(toolbar);
ActionBar.Title = "My Toolbar";

Este código busca las Toolbar llamadas SetActionBar y para que Toolbar se realicen en las características de la barra de acciones predeterminadas. El título de la barra de herramientas se cambia a Mi barra de herramientas. Como se muestra en este ejemplo de código, el ToolBar se puede hacer referencia directamente como una barra de acciones. Compile y ejecute esta aplicación: el Toolbar personalizado en lugar de la barra de acciones predeterminada:

Tenga en cuenta que el Toolbar tiene un estilo independiente del tema de Theme.Material.Light.DarkActionBar que se aplica al resto de la aplicación.

Si se produce una excepción durante la ejecución de la aplicación, consulte la sección Solución de problemas siguiente.

Agregar elementos de menú

En esta sección, los menús se agregan a Toolbar. El área superior derecha de ToolBar está reservada para los elementos de menú: cada elemento de menú (también denominado elemento de acción) puede realizar una acción dentro de la actividad actual o puede realizar una acción en nombre de toda la aplicación.

Para agregar menú a Toolbar:

1. Agregue iconos de menú (si es necesario) a las carpetas mipmap- del proyecto de aplicación. Google proporciona un conjunto de iconos de menú gratis en la página Iconos de material.

2. Defina el contenido de los elementos de menú agregando un nuevo archivo de recursos de menú en Recursos/menú.

3. Implementar el OnCreateOptionsMenu método de la actividad: este método infla los elementos de menú.

4. Implementar el OnOptionsItemSelected método de la actividad: este método realiza una acción cuando se pulsa un elemento de menú.

En las secciones siguientes se muestra este proceso en detalle agregando Editar y Guardar elementos de menú al Toolbarpersonalizado.

Iconos del menú Instalar

Siguiendo con la ToolbarFun aplicación de ejemplo, agregue iconos de menú al proyecto de aplicación. Descargue iconos de la barra de herramientas, descomprima y copie el contenido de las carpetas mipmap- extraídas en el proyecto carpetas mipmap- en ToolbarFun/Resources e incluya cada archivo de icono agregado en el proyecto.

Definir un recurso de menú

Cree un nuevo menú de subdirectorio en Recursos. En el menú subdirectorio, cree un nuevo archivo de recursos de menú denominado top_menus.xml y reemplace su contenido por el siguiente XML:

<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
  <item
       android:id="@+id/menu_edit"
       android:icon="@mipmap/ic_action_content_create"
       android:showAsAction="ifRoom"
       android:title="Edit" />
  <item
       android:id="@+id/menu_save"
       android:icon="@mipmap/ic_action_content_save"
       android:showAsAction="ifRoom"
       android:title="Save" />
  <item
       android:id="@+id/menu_preferences"
       android:showAsAction="never"
       android:title="Preferences" />
</menu>

Este XML crea tres elementos de menú:

• Elemento de menú Editar que usa el icono de ic_action_content_create.png(un lápiz).

• Elemento de menú Guardar que usa el icono de ic_action_content_save.png (un disquete).

• Un elemento de menú Preferencias que no tiene un icono.

Los showAsAction atributos del Editar y Guardar elementos de menú se establecen en ifRoom – esta opción hace que estos elementos de menú aparezcan en el Toolbar si hay suficiente espacio para que se muestren. El elemento de menú Preferencias establece showAsAction en never: esto hace que el menú Preferencias aparezca en el menú de desbordamiento (tres puntos verticales).

Implement OnCreateOptionsMenu

Agregue el siguiente método a MainActivity.cs:

public override bool OnCreateOptionsMenu(IMenu menu)
{
    MenuInflater.Inflate(Resource.Menu.top_menus, menu);
    return base.OnCreateOptionsMenu(menu);
}

Android llama al métodoOnCreateOptionsMenu para que la aplicación pueda especificar el recurso de menú para una actividad. En este método, el recurso top_menus.xml se infla en el objeto pasadomenu. Este código hace que los nuevos elementos de menú Editar, Guardar y Preferencias aparezcan en Toolbar.

Implementar OnOptionsItemSelected

Agregue el siguiente método a MainActivity.cs:

public override bool OnOptionsItemSelected(IMenuItem item)
{
    Toast.MakeText(this, "Action selected: " + item.TitleFormatted,
        ToastLength.Short).Show();
    return base.OnOptionsItemSelected(item);
}

Cuando un usuario pulsa un elemento de menú, Android llama al método OnOptionsItemSelected y pasa el elemento de menú seleccionado. En este ejemplo, la implementación solo muestra una notificación del sistema para indicar qué elemento de menú se ha pulsado.

Compile y ejecute ToolbarFun para ver los nuevos elementos de menú en la barra de herramientas. Ahora Toolbar muestra tres iconos de menú como se muestra en esta captura de pantalla:

Cuando un usuario pulsa el elemento de menú Editar, se muestra una notificación del sistema para indicar que se llamó al métodoOnOptionsItemSelected:

Cuando un usuario pulsa el menú de desbordamiento, se muestra el elemento de menú Preferencias. Normalmente, las acciones menos comunes deben colocarse en el menú de desbordamiento; en este ejemplo se usa el menú de desbordamiento para Preferencias, ya que no se usa con tanta frecuencia como Editar y Guardar:

Para obtener más información sobre los menús de Android, consulte el tema Menús para desarrolladores de Android.

Solución de problemas

Las sugerencias siguientes pueden ayudar a depurar problemas que pueden producirse al reemplazar la barra de acciones por una barra de herramientas.

La actividad ya tiene una barra de acciones

Si la aplicación no está configurada correctamente para usar un tema personalizado, como se explica en Aplicar el tema personalizado, puede producirse la siguiente excepción al ejecutar la aplicación:

Además, se puede producir un mensaje de error como el siguiente: Java.Lang.IllegalStateException: Esta actividad ya tiene una barra de acciones proporcionada por la decoración de la ventana.

Para corregir este error, compruebe que el atributo android:theme del tema personalizado se agrega a <application> (en Propiedades/AndroidManifest.xml) como se describe anteriormente en Aplicar el tema personalizado. Además, este error puede deberse a que el diseño Toolbaro el tema personalizado no están configurados correctamente.