ActionBar en Android con ejemplo

En las aplicaciones de Android , ActionBar es el elemento presente en la parte superior de la pantalla de actividad . Es una característica destacada de una aplicación móvil que tiene una presencia constante en todas sus actividades. Proporciona una estructura visual a la aplicación y contiene algunos de los elementos más utilizados por los usuarios. Android ActionBar fue lanzado por Google en 2013 con el lanzamiento de Android 3.0 (API 11) . Antes de eso, el nombre de este elemento visual superior era AppBar . AppBar contiene solo el nombre de la aplicación o la actividad actual. No fue muy útil para los usuarios y los desarrolladores también tienen una opción insignificante para personalizarlo. 

Google anunció una biblioteca de soporte junto con la introducción de ActionBar. Esta biblioteca es parte de AppCompat y su propósito es proporcionar compatibilidad con versiones anteriores de Android y admitir interfaces con pestañas. Todas las aplicaciones que utilizan el tema predeterminado proporcionado por Android (Theme.AppCompat.Light.DarkActionBar) contienen una ActionBar de forma predeterminada. Sin embargo, los desarrolladores pueden personalizarlo de varias maneras según sus necesidades. Los componentes incluidos en ActionBar son:

• Ícono de la aplicación: muestra el logotipo o el ícono de la marca de la aplicación.
• Ver Controles: Sección que muestra el nombre de la aplicación o actividad actual. Los desarrolladores también pueden incluir navegación giratoria o con pestañas para cambiar entre vistas.
• Botón de acción: contiene algunas acciones/elementos importantes de la aplicación que pueden ser necesarios para los usuarios con frecuencia.
• Desbordamiento de acciones: incluya otras acciones que se mostrarán como un menú.

Diseño de una barra de acción personalizada

El siguiente ejemplo muestra los pasos involucrados en la creación de una ActionBar personalizada para MainActivity de una aplicación. Se cubrirán todos los aspectos importantes de los elementos visuales como icono, título, subtítulo, botones de acción y menú de desbordamiento. 

Nota: Los siguientes pasos se realizan en Android Studion versión 4.0

Paso 1: barra de acción predeterminada

Como se mencionó anteriormente, cada aplicación de Android contiene una ActionBar de forma predeterminada. Este título de visualización de ActionBar incluido previamente para la actividad actual que es administrada por el archivo AncdroidManifest.xml . El valor de string del título de la aplicación lo proporciona el recurso @string/app_name presente en los Nodes de la aplicación .

<aplicación

       …..

      …..

       android:etiqueta=”@string/nombre_aplicación”

     …..

</aplicación>

Producción:

Paso 2: Creación de un nuevo directorio y elementos de diseño de ActionBar

Para codificar los elementos de ActionBar, cree un nuevo directorio en la carpeta de recursos de los archivos de proyecto de la aplicación. Haga clic derecho en la carpeta res y seleccione Nuevo -> Directorio . Dé el nombre “menú” al nuevo directorio. 

Además, cree un nuevo archivo de recursos de menú haciendo clic con el botón derecho en el directorio del menú. A medida que se crea la barra de acción para la actividad principal, escriba el nombre como «principal» en el archivo de recursos del menú. Con esto, se debe crear un nuevo archivo llamado «main.xml» en el directorio del menú. En este archivo, se pueden declarar los elementos que se mostrarán como los botones de acción de la ActionBar.

Para cada elemento del menú, es necesario configurar los siguientes atributos:

• android:title: su valor contiene el título del elemento del menú que se mostrará cuando un usuario haga clic y mantenga presionado ese elemento en la aplicación.
• android:id: una identificación única para el elemento del menú que se usará para acceder a él en cualquier parte de los archivos de la aplicación.
• android:orderInCategory: el valor de este atributo especifica la posición del elemento en la ActionBar. Hay dos formas de definir la posición de los diferentes elementos del menú. La primera es proporcionar el mismo valor de este atributo para todos los elementos y la posición se definirá en el mismo orden en que se declaran en el código. La segunda forma es proporcionar un valor numérico diferente para todos los elementos y luego los elementos se posicionarán según el orden ascendente del valor de este atributo.
• app:showAsAction: este atributo define cómo estará presente el elemento en la barra de acción. Hay cuatro banderas posibles para elegir:
  • una. siempre: para mostrar el elemento en la ActionBar todo el tiempo.
  • b. ifRoom: para conservar el elemento si hay espacio disponible.
  • C. nunca: con esta bandera, el elemento no se mostrará como un icono en la barra de acciones, pero estará presente en el menú adicional.
  • d. withText: para representar un elemento como ícono y título, se puede agregar este indicador con el indicador always o ifRoom (always|withText o ifRoom|withText).
• android:icon: se hace referencia al icono de un elemento en los directorios dibujables a través de este atributo.

Icono de un elemento de la barra de acción

Para proporcionar un ícono a un elemento, haga clic con el botón derecho en la carpeta res, seleccione nuevo y luego Image Asset . Aparecerá un cuadro de diálogo, elija el tipo de icono como barra de acción e iconos de pestaña . Elija el tipo de recurso como «Imágenes prediseñadas» y seleccione una imagen de la colección de imágenes prediseñadas. Proporcione un nombre deseado para el icono. Haga clic en Siguiente, luego en Finalizar. Este ícono ahora se cargará en el directorio dibujable de la carpeta res. El nombre proporcionado por los desarrolladores a estos íconos ahora se usará para hacer referencia al recurso del ícono del elemento.

A continuación se muestra el código para colocar un icono de búsqueda, un icono de actualización y un menú de desbordamiento en la barra de acciones.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">
  
    <!-- action button for search -->
    <item android:title="search"
        android:id="@+id/search"
        android:orderInCategory="100"
        app:showAsAction="ifRoom"
        android:icon="@drawable/search_icon"/>
  
    <!-- action button for refresh -->
    <item android:title="refresh"
        android:id="@+id/refresh"
        android:orderInCategory="100"
        app:showAsAction="ifRoom"
        android:icon="@drawable/refresh_icon"/>
  
    <!-- action button for copy -->
    <item android:title="copy"
        android:id="@+id/copy"
        android:orderInCategory="100"
        app:showAsAction="never"
        android:icon="@drawable/copy_icon"/>
</menu>

Producción:

Paso 3: trabajar con el archivo de actividad

Los elementos de una ActionBar están diseñados con el propósito de realizar algunas operaciones. Aquellas operaciones/acciones de los elementos se declaran en ese archivo de Actividad para el que se ha diseñado la ActionBar. En este ejemplo, la actividad de destino es el archivo MainActivity . Además, el título personalizado, el subtítulo y el logotipo de la aplicación también se definen en este archivo. A continuación se muestra el código adecuado para diseñar todos los elementos mencionados y mostrar un mensaje de brindis cuando un usuario hace clic en los elementos de ActionBar.

import androidx.annotation.NonNull;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate( Bundle savedInstanceState ) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // calling this activity's function to
        // use ActionBar utility methods
        ActionBar actionBar = getSupportActionBar();
  
        // providing title for the ActionBar
        actionBar.setTitle("  GfG | Action Bar");
  
        // providing subtitle for the ActionBar
        actionBar.setSubtitle("   Design a custom Action Bar");
  
        // adding icon in the ActionBar
        actionBar.setIcon(R.drawable.app_logo);
  
        // methods to display the icon in the ActionBar
        actionBar.setDisplayUseLogoEnabled(true);
        actionBar.setDisplayShowHomeEnabled(true);
  
    }
  
    // method to inflate the options menu when
    // the user opens the menu for the first time
    @Override
    public boolean onCreateOptionsMenu( Menu menu ) {
  
        getMenuInflater().inflate(R.menu.main, menu);
        return super.onCreateOptionsMenu(menu);
    }
  
    // methods to control the operations that will
    // happen when user clicks on the action buttons
    @Override
    public boolean onOptionsItemSelected( @NonNull MenuItem item ) {
  
        switch (item.getItemId()){
            case R.id.search:
                Toast.makeText(this, "Search Clicked", Toast.LENGTH_SHORT).show();
                break;
            case R.id.refresh:
                Toast.makeText(this, "Refresh Clicked", Toast.LENGTH_SHORT).show();
                break;
            case R.id.copy:
                Toast.makeText(this, "Copy Clicked", Toast.LENGTH_SHORT).show();
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
  
        // calling this activity's function to
        // use ActionBar utility methods
        val actionBar = supportActionBar
  
        // providing title for the ActionBar
        actionBar!!.title = "  GfG | Action Bar"
  
        // providing subtitle for the ActionBar
        actionBar.subtitle = "   Design a custom Action Bar"
  
        // adding icon in the ActionBar
        actionBar.setIcon(R.drawable.app_logo)
  
        // methods to display the icon in the ActionBar
        actionBar.setDisplayUseLogoEnabled(true)
        actionBar.setDisplayShowHomeEnabled(true)
    }
  
    // method to inflate the options menu when
    // the user opens the menu for the first time
    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menuInflater.inflate(R.menu.main, menu)
        return super.onCreateOptionsMenu(menu)
    }
  
    // methods to control the operations that will
    // happen when user clicks on the action buttons
    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when (item.itemId) {
            R.id.search -> Toast.makeText(this, "Search Clicked", Toast.LENGTH_SHORT).show()
            R.id.refresh -> Toast.makeText(this, "Refresh Clicked", Toast.LENGTH_SHORT).show()
            R.id.copy -> Toast.makeText(this, "Copy Clicked", Toast.LENGTH_SHORT).show()
        }
        return super.onOptionsItemSelected(item)
    }
}

Producción:

Paso 4: Color de la barra de acción

Dirígete al archivo style.xml ubicado en el directorio de valores de la carpeta res . Para cambiar el color predeterminado de ActionBar, uno tiene que cambiar el recurso colorPrimary . A continuación se muestra el código para hacer que el color de ActionBar sea ‘verde’.

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
      
    <!-- provided green color to the ActionBar -->
    <item name="colorPrimary">#0F9D58</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>
  
</resources>

Producción:

Paso 5: trabajar con el archivo activity_main.xml

Este archivo define el diseño de la actividad. En este ejemplo, el enfoque principal está en ActionBar, por lo que la actividad contendrá solo un TextView simple . A continuación se muestra el código.

<?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"
    android:background="#168BC34A"
    tools:context=".MainActivity">
  
    <!-- Adding a TextView in the activity -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello Geek!!"
        android:textColor="#000000"
        android:textSize="24sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
    
  </androidx.constraintlayout.widget.ConstraintLayout>

Producción:

Ventajas de ActionBar

• Proporciona un área personalizada para diseñar la identidad de una aplicación.
• Especifique la ubicación del usuario en la aplicación mostrando el título de la Actividad actual.
• Proporciona acceso a acciones importantes y de uso frecuente.
• Pestañas de soporte y una lista desplegable para cambiar de vista y navegar.

Desventajas de ActionBar

• Todas las funciones de ActionaBar no se presentan a la vez, sino que se introdujeron con el lanzamiento de diferentes niveles de API, como API 15, 17 y 19.
• ActionBar se comporta de manera diferente cuando se ejecuta en diferentes niveles de API.
• Las características que se introdujeron con una API en particular no brindan compatibilidad con versiones anteriores.

Nota: Para resolver todos los problemas relacionados con ActionBar, Google introdujo ToolBar junto con el lanzamiento de API 21 (Android Lollipop).