Android

Android Design Support Library (I): Toolbar

Mario Pérez Esteso

26 de jul. de 2015 • 3 min read

Muchos sabréis que el pasado 28 y 29 de Mayo se celebró el Google I/O en San Francisco, y entre otras tantas sorpresas a los desarrolladores nos alegraron el día presentando Android Design Support Library. Esta librería está pensada para facilitar la implementación de las nuevas mecánicas y widgets que se recomiendan en Material Design, la nueva interfaz de Android. Hasta la fecha se tenía que hacer una manera muy manual o tirar de librerías de terceros que se basaban en la guía de diseño. También añade retrocompatibilildad, puesto que la mayoría de widgets solo estaban para las últimas versiones de Android. Ahora con esta librería añade un plus a versiones no tan recientes. Os pretendo traer una serie de tutoriales donde os enseñaré a utilizar dichos widgets para que podáis añadirlo en vuestras aplicaciones.

Para empezar os enseñaré cómo añadir el Toolbar, el sucesor al anteriormente conocida ActionBar. Técnicamente este widget no es estrictamente de la librería, pero es prácticamente vital en nuestras apps, y posteriormente tendremos que lidiar con ella usando otros elementos que sí están en la misma, por lo que me ha parecido conveniente empezar por aquí. Para utilizarlo es muy sencillo, lo primero añadir las librerías que utilizaremos a lo largo de los tutoriales. compile 'com.android.support:design:22.2.0' compile 'com.android.support:appcompat-v7:22.2.0' compile 'com.android.support:cardview-v7:22.2.0' Luego, y para hacer la cosas bien, prepararemos los estilos siguiendo la guía de diseño.

Primero los colores:

<?xml version="1.0" encoding="utf-8"?> <resources> <color name="window_background">#CC000000</color> <color name="my_primary">#009688</color> <color name="my_primary_dark">#00796B</color> <color name="my_primary_light">#B2DFDB</color> <color name="my_accent">#9E9E9E</color> <color name="my_primary_text">#212121</color> <color name="my_secondary_text">#727272</color> <color name="my_icons">#FFFFFF</color> <color name="my_divider">#B6B6B6</color> </resources>

Y luego los estilos:

<resources> <style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar"> </style>  <style name="AppTheme" parent="AppBaseTheme"> <item name="colorPrimary">@color/my_primary</item> <item name="colorPrimaryDark">@color/my_primary_dark</item> <item name="colorAccent">@color/my_accent</item> <item name="android:textColorPrimary">@color/my_icons</item> <item name="android:textColorSecondary">@color/my_secondary_text</item> <item name="actionMenuTextColor">@color/my_icons</item> <item name="android:windowNoTitle">true</item> <item name="windowActionBar">false</item> </style> </resources> Ahora añadimos propiamente el Toolbar a nuestro layout: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary"/> </RelativeLayout> Y por último la clase: public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setupToolbar(); } private void setupToolbar(){ Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); } } Y ya tendremos implementado el Toolbar en nuestra aplicación. En posteriores tutoriales veremos cómo utilizar los distintos elementos de la librería de diseño. Por supuesto, todo el código está alojado en un repositorio de nuestra cuenta de GitHub.