La barra de acciones (ToolBar)

video[Tutorial]   La barra de acciones (ToolBar) 

Desde la versión 3.0, se introdujo en Android un nuevo elemento en la interfaz de usuario: la barra de acciones. Esta se sitúa en la parte superior de la pantalla, fue creada para que el usuario tuviera una experiencia unificada a través de las distintas aplicaciones. La barra de acciones aglutina varios elementos; los más habituales son el nombre de la aplicación, el botón para abrir el Navigation Drawer y los botones de acciones frecuentes. Las acciones menos utilizadas se sitúan en un menú desplegable, que se abrirá desde el botón Overflow (se representa con tres puntos verticales). Si la aplicación dispone de pestañas (tabs), estas podrán situarse en la barra de acciones. También pueden añadirse otros elementos, como listas desplegables y otros tipos de widgets incrustados, como el widget de búsqueda que veremos más adelante.

Existen dos clases que nos permiten añadir la barra de acciones: ActionBar y ToolBar. La clase ActionBar aparece en la versión 3.0. Por defecto, la barra de acciones es incluida en todas las actividades. Si queremos que no aparezca tenemos que asignar un tema especial a la actividad. Por ejemplo. Theme.AppCompat.NoActionBar o cualquiera que acabe en .NoActionBar. La clase ToolBar aparece con la versión 5.0. Cambia el diseño de la barra de acciones para que siga las especificaciones de Material Design. Puede usarse en versiones anteriores dado que no se incorpora al API de la versión 5.0, si no a una la librería de compatibilidad appcompat. A diferencia de ActionBar, la barra de acciones no es incrustada de forma automática, si no que hay que incluirla en el layout con la etiqueta <ToolBar>. Esto nos permite situarla en la posición que queramos y nos da más opciones de configuración.

Añadir un ToolBar a la aplicación es muy sencillo. Normalmente no es necesario realizarlo si al crear un proyecto has seleccionado Basic Activity o Scrolling Activity, dado que en este caso ya se ha añadido un Toolbar. Se ha incluido el siguiente ejercicio para los casos en que partes de un proyecto donde se ha incluido un ActionBar (seleccionando Empty Activity) o en proyectos creados con versiones anteriores.

Ejercicio: Añadir una barra de acciones con Toolbar.

1 Crea un nuevo proyecto basado en Empty Activity o abre uno que en su layout no aparezca la etiqueta <Toolbar>.

2. El primer paso va a ser anular la creación automática de la barra de acciones basada en ActionBar. Para eso, accede a res/values/styles.xml y cambia el tema de la aplicación por Theme.AppCompat.Ligth.NoActionBar. Verifica que al ejecutar la barra desaparece.

3. También puedes ocultar la barra de estado de Android, donde se muestran las notificaciones y la hora. Para ello añade el siguiente ítem al tema de la aplicación:

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowFullscreen">true</item>
    ...

<androidx.appcompat.widget.Toolbar
     android:id="@+id/toolbar"
     android:layout_width="match_parent"
     android:layout_height="?attr/actionBarSize"
     android:background="?attr/colorPrimary"
     android:elevation="4dp"
     android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
     app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>	

app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent" 

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar); 

setSupportActionBar(toolbar) 

Ejercicio: Añadiendo un menu en la barra de acciones.

Podemos asignar un menú a nuestra actividad de forma muy sencilla.

1.    Si estás desarrollando el proyecto Asteroides. Pulsa con el botón derecho sobre la carpeta res y selecciona la opción New > Android resource file. En el campo File name: selecciona menu_main y en el campo Resource type: selecciona Menu.

Si desarrollas Mis Lugares. Abre el fichero res / menu / menu_main.xml.

NOTA: El fichero de menú se crea automáticamente si seleccionas una actividad de tipo: Basic Activity o Scrolling Activity.

2.    Reemplaza el contenido que se muestra a continuación:

<menu 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"
      tools:context=".MainActivity">
   <item android:id="@+id/action_settings"
         android:title="Configuración"
         android:icon="@android:drawable/ic_menu_preferences"
         android:orderInCategory="5" 
         app:showAsAction="never"/>
   <item android:title="Acerca de..." 
         android:id="@+id/acercaDe"
         android:icon="@android:drawable/ic_menu_info_details"
         android:orderInCategory="10"
         app:showAsAction="ifRoom|withText"/>
   <item android:title="Buscar"
         android:id="@+id/menu_buscar"
         android:icon="@android:drawable/ic_menu_search"
         android:orderInCategory="115"
         app:showAsAction="always|collapseActionView"/>
</menu> 

Como puedes ver cada ítem de menú tiene cinco atributos: id que permite identificarlo desde el código; title, para asociarle un texto; icon, para asociarle un icono;  orderInCategory, permite ordenar las acciones según el número indicado. Las acciones con un número más pequeño se sitúan más a la izquierda. Si no caben todas las acciones en la barra, las que tienen un número mayor se mueven al menú de Overflow. Finalmente, el atributo showAsAction permite indicar que acciones son ocultadas en el menú de Overflow y cuales están siempre visibles. Si se indica always se mostrarán siempre, sin importar si caben o no. El uso de estas acciones debería limitarse, lo ideal es que haya una o dos, ya que al forzar que se visualicen muchas podrían verse incorrectamente. Las acciones que indiquen ifRoom se mostrarán en la barra de acciones si hay espacio disponible, y se moverán al menú de Overflow si no lo hay. En esta categoría se deberían encontrar la mayoría de las acciones. Si se indica never, la acción nunca se mostrará en la barra de acciones, sin importar el espacio disponible. En este grupo se deberían situar acciones como modificar las preferencias, que deben estar disponibles para el usuario, pero no visibles en todo momento.

3.    Para activar el menú, has de introducir el siguiente código en la actividad que muestra el menú. Posiblemente solo tengas que incluir el texto subrayado.

JavaKotlin

@Override public boolean onCreateOptionsMenu(Menu menu) {
   getMenuInflater().inflate(R.menu.menu_main, menu);
   return true; /** true -> el menú ya está visible */
}

@Override public boolean onOptionsItemSelected(MenuItem item) {
   int id = item.getItemId();
   if (id == R.id.action_settings) {
      return true;
   }
   if (id == R.id.acercaDe) {
      lanzarAcercaDe(null);
      return true;
   }
   return super.onOptionsItemSelected(item);
} 

override fun onCreateOptionsMenu(menu: Menu): Boolean {
   menuInflater.inflate(R.menu.menu_main, menu)
   return true
}

override fun onOptionsItemSelected(item: MenuItem): Boolean {
   return when (item.itemId) {
      R.id.action_settings -> true
      R.id.acercaDe -> {
         lanzarAcercaDe()
         true
      }
      else -> super.onOptionsItemSelected(item)
   }
}

4.    Ejecuta la aplicación. Podrás ver como aparece la barra de acciones en la parte de arriba, con los botones que hemos definido.

Android Studio  incorpora un editor visual de menús que nos permite crear menús sin necesidad de escribir código xml.