Android Toolbar personalizada (Action bar).

por

En este tutorial explicamos cómo agregar una Toolbar personalizada en Android Studio. Para esto primero de debe quitar la Actionbar por default. Luego agregar la Toolbar a la UI y por último configurar las características de la Toolbar en código.

En Android Studio es posible configurar la barra superior también llamada Actionbar, y se personaliza usando una Toolbar.

Configurar una Toolbar o Actionbar personalizada en Android Studio, no es algo indispensable pero si ayuda a dar más vista a nuestra app y nos brinda más espacio para agregar elementos a la UI, como botones.

Como agregar una Tool bar personalizada en Android Studio.

android:layout_alignParentTop="true"
  1. Primero necesitamos quitar la Actionbar existente. Para eso vamos al archivo manifest.xml seleccionamos un tema sin Actionbar.
  2. Después agregamos una Toolbar a la UI. Esto se hace Mediante el elemento Toolbar en xml y se configura como cualquier otro elemento (EditText, TextView, etc).
  3. En seguida acomodamos la Toolbar en la parte superior de la UI, aquí puede variar según como trabajes, en este caso se usa RelativeLayout. Y acomodamos la toolbar con el comando android:layout_alignParentTop=”True”.
  4. Lo siguiente es pasar al código (Java). Aquí debemos crear una variable tipo ToolBar, luego relacionar esa variable con la Toolbar en XML, mediante su ID.
  5. Una vez con lo anterior, lo siguiente es indicar que esa Toolbar va a ser la ActionBar de nuestra Activity. Para eso se usa el código mostrado más adelante.
  6. Por último debemos configurar las siguientes opciones.
    • Si queremos mostrar el botón back
    • Si se muestra el título de la activity o de la app
    • Un titulo ersonalizado con Set text.
  7. Por ultimo podemos agregar botones usando un menú. Solo creamos un menú, y en java usamos el método onCreateOptionsMenu(). Para configurar cuando el usuario da clic a los items agregamos el método onOptionsItemSelected().

NOTA: El buton back no va a funcionar, para que funcione debemos agregar parentesco entre Activitys en el archivo manifest.xml. Puedes ver esto en el tutorial, button back en toolbar.

Ejemplo.

En este ejemplo vamos a agregar una Toolbar a nuestra app, siguiendo el procedimiento descrito anteriormente.

Elegir tema sin Actionbar.

Primero necesitamos elegir un tema que no contenga Actionbar. 

Para esto abrimos el archivo manifest.xml. El cual se encuentra en la carpeta app/manifest. Como se muestra a continuación.

Aquí en la opción de theme seleccionamos el tema, en nuestro caso seleccionamos @style/AppTheme.NoActionBar.

<application
....
....
....
    android:theme="@style/AppTheme.NoActionBar">
....
....

Agregar Toolbar a UI.

El siguiente paso es agregar la Toolbar a la UI. Para esto solo es cuestión de agregarla como cualquier otro elemento, y situarla en la parte superior de la Activity.

Además le damos la ID “toolbar_main”.

Para colocarla en la parte superior usamos Relativelayout, con el comando android:layout_alignParentTop=”True”. Puedes ubicarla como se te haga más conveniente según tu proyecto.

Si estas más cómodo trabajando con otro layout, puedes usar Relativelayout para acomodar la toolbar, y enseguida creas otro layout para trabajar. Como se ve a continuación:

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:layout_alignParentTop="true"
    android:id="@+id/main_toolbar"        >
</android.support.v7.widget.Toolbar>

Configurar la Toolbar en java.

Una vez con la Toolbar en la UI, pasamos al código JAVA. Donde necesitamos:

  • Crear una variable tipo Toolbar. 

private Toolbar toolbar;

  • Después relacionar esa variable con la toolbar que acabamos de crear en XML, mediante su ID.

toolbar = findViewById(R.id.toolbar_main”);

  • Luego indicar que esa Toolbar será la Actionbar de la Activity.
setSupportActionBar(toolbar);
  • Por ultimo hacer las configuraciones de la Toolbar de acuerdo a lo que queremos mostrar. En nuestro caso queremos que se muestre el button back y queremos mostrar un título, pero no el título de nuestro proyecto. Si no queremos que en la Toolbar diga “Tutorial”.
final ActionBar ab = getSupportActionBar();
   ab.setDisplayShowHomeEnabled(false);
   ab.setDisplayHomeAsUpEnabled(true);
   ab.setDisplayShowCustomEnabled(true);
   ab.setDisplayShowTitleEnabled(true);
   ab.setTitle(R.string.titulo_toolbar);
  • Si queremos agregar ítems, es necesario crear un menú, agregarlo a la toolbar, y con el menú indicar la acción que deseemos cuando el usuario de clic.

Para saber como crear un menú https://appgametutoriales.com/menu-xml-en-android-studio/

Si quieres saber como agregar los botones del menú a la toolbar ve el siguiente link https://appgametutoriales.com/android-studio-agregar-botones-a-la-toolbar

El código final queda así:

private Toolbar toolbar;

protected void onCreate(Bundle savedInstanceState) {
....
....
....
   toolbar = findViewById(R.id.toolbar_main);
   setSupportActionBar(toolbar);
   final ActionBar ab = getSupportActionBar();
   ab.setDisplayShowHomeEnabled(false);
   ab.setDisplayHomeAsUpEnabled(true);
   ab.setDisplayShowCustomEnabled(true);
   ab.setDisplayShowTitleEnabled(true);
   ab.setTitle(R.string.titulo_toolbar);
}

Para más tutoriales de Android ve la sección de Android Studio.