Android: Como usar el nuevo widget Toolbar

En el último Google I/O se presentó lo que llaman Material Design, el rediseño para la actualización mayor 5.0. Detrás de este rediseño hay mucha teoría conceptual y técnica que sirven para justificar un cambio brusco como este.

Uno de los cambios es lo que hasta ahora era el ActionBar; ahora se llama Toolbar y ya no depende de que la actividad extenda ActionBarActivity (al menos no siempre), si no que se trata de un widget como podría ser un ImageView o un EditText. De forma que podemos tener las “ActionBar” que queramos, por ejemplo una arriba ocupando el lugar tradicional y otra en el pie (sería raro, pero se puede).

material-design

Para empezar a usarlo, lo primero que hay que hacer es usar la versión nueva de AppCompat, si ya lo usabais sólo tendréis que cambiar el numero de versión en el build.gradle de la aplicación. Por ahora la última versión es la 21.0.3.

dependencies {
  compile "com.android.support:appcompat-v7:21.0.3"
}

Si estás actualizando la app, lo más fácil es agregar una Toolbar y hacer que se comporte como si fuese un ActionBar, así no habrá que cambiar el código para los menús extendidos ni nada más, sólo lo referente a la Toolbar.

En el archivo xml del layout, tendremos que agregar el nuevo Widget:

<android.support.v7.widget.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:background="@color/colorPrimary"
  kinou:popupTheme="@style/Theme.AppCompat.Light"
  kinou:theme="@style/KinouToolbar" />

Y en el archivo de estilos habrá que decirle que no muestre el ActionBar anterior (ya que estaremos colocando el nuevo por otro método).

<style name="AppTheme" parent="Theme.AppCompat.Light">
  <item name="android:windowNoTitle">true</item>
  <item name="android:windowActionBar">false</item>
  <item name="windowActionBar">false</item>
  <item name="colorPrimary">@color/colorPrimary</item>
  <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
  <item name="colorAccent">@color/colorAccent</item>
  <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
  <item name="spinBars">true</item>
  <item name="color">@android:color/white</item>
</style>

Y ya de paso se pueden definir los 3 colores base: el primario (fondo del Toolbar), el primario oscuro (color de la barra de notificaciones) y el color de acento (que tintará widgets, como el ProgressDialog o el EditText).

En cuanto a la actividad, habrá que importar 2 paquetes de la AppCompat y extenderla de ActionBarActivity.

...
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;

public class MainActivity extends ActionBarActivity {
...

Y después está el punto clave. Guardamos la referencia al widget que hemos puesto antes y le decimos que la use como un ActionBar tradicional, así la transición será muy sencilla.

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
if (toolbar != null) {
  setSupportActionBar(toolbar);
}

Y ya está, a partir de ahí el único cambio habrá que hacer es que cada vez que se haga referencia a ella, habrá que llamarla con getSupportActionBar(), pero seguro que los que hayan usado ActionBarSherlock alguna vez ya estarán acostumbrados.
Por ejemplo, para cambiar el titulo:

getSupportActionBar().setTitle(R.string.app_name);

Y creo que no me estoy dejando nada, sólo es esto. Si tenéis un menu drawer se puede complicar un poco más pero tampoco es para tanto, y sobretodo hay algo que me dio algún dolor de cabeza, y es a la hora de definir los colores del Toolbar; sus letras, fondos, iconos, … creo que esa parte es bastante confusa y muchas veces no parece tener mucho sentido, pero no iba a ser todo fácil.

contacts_toolbars

Ahora que ya no es un elemento intrínseco de la actividad y se puede usar y modificar de forma mucho más flexible al tratarse de un widget, se tiene mucha más capacidad para lucirse en el diseño, sobre todo en pantallas grandes.

Por cierto, si haceís este cambio tendréis que cambiar también los iconos, porque los nuevos siguen otras guias de estilo, y si no adaptas los tuyos quedarán un poco raros.




Josep Viciana

Programador de 29 años con una década de experiencia como programador. interesado en el diseño, ilustración y nuevas tecnologías. Dedicado desde siempre a la programación Web y desde hace algunos años también a la móvil.

No hay comentarios


Puedes dejar el primero : )



Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Conoce cómo se procesan los datos de tus comentarios.