Dentro de todas las novedades que trajo Material Design no solo en cuanto a la especificación de "formas" y regla bajo las cuales trabajo, también hay nuevos elementos y uno de ellos es la Toolbar.
El objetivo de este ejemplo que he desarrollado y puesto en github, es mostrar un Actionbar con varios acciones implementado en forma tradicional y lo simple que es migrar esto al Toolbar de Material Design.
Actionbar
En primer lugar, desarrolle una Activity con un Action bar que tiene varias acciones, una de las cuáles inclusive es el widget de búsqueda.
<item android:id="@+id/action_settings" android:title="@string/action_settings" app:showAsAction="never" />
<item android:id="@+id/action_about" android:title="@string/action_about" app:showAsAction="never" />
<item android:id="@+id/action_search" android:title="@string/action_share" android:icon="@drawable/ic_dark_search" app:showAsAction="always" app:actionViewClass="android.support.v7.widget.SearchView" />
<item android:id="@+id/action_about" android:title="@string/action_about" app:showAsAction="never" />
<item android:id="@+id/action_search" android:title="@string/action_share" android:icon="@drawable/ic_dark_search" app:showAsAction="always" app:actionViewClass="android.support.v7.widget.SearchView" />
Noten que el último ítem tiene la propiedad "app:actionViewClass="android.support.v7.widget.SearchView ", lo cuál indica que voy a usar un widget de Search.
La Activity principal no tiene grandes cambios, tiene los métodos principales que requiere el menú:
public boolean onCreateOptionsMenu(Menu menu)
public boolean onOptionsItemSelected(MenuItem item)...
En el OnCreate, agregué 3 detalles para hacer mas interesante la barra como por ejemplo, quitar el título y poner un icono:
getSupportActionBar().setDisplayShowTitleEnabled(false);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setIcon(R.drawable.ic_app);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setIcon(R.drawable.ic_app);
En la sección de estilos por el contrario, sí hay un par de puntos interesantes.
En primer lugar generé un recurso para especificar los colores y luego llamarlos desde los estilos:
<resources>
<color name="colorPrimray">#03A9F4</color>
<color name="colorPrimrayDark">#0288D1</color>
<color name="colorPrimrayLight">#B3E5FC</color>
<color name="colorAccent">#FFD740</color>
</resources>
<color name="colorPrimray">#03A9F4</color>
<color name="colorPrimrayDark">#0288D1</color>
<color name="colorPrimrayLight">#B3E5FC</color>
<color name="colorAccent">#FFD740</color>
</resources>
Luego, genere un estilo específico para aplicar a esta Activity. Noten también que mi estilo generado deriva de AppCompat, para garantizar compatibilidad con las diferentes versiones de Android:
<style name="CustomActionBarTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<!-- Support library compatibility --> <item name="actionBarStyle">@style/MyActionBar</item>
</style>
<!-- ActionBar styles --><style name="MyActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">@color/colorPrimray</item>
<!-- Support library compatibility --> <item name="background">@color/colorPrimray</item>
</style>
<item name="android:actionBarStyle">@style/MyActionBar</item>
<!-- Support library compatibility --> <item name="actionBarStyle">@style/MyActionBar</item>
</style>
<!-- ActionBar styles --><style name="MyActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">@color/colorPrimray</item>
<!-- Support library compatibility --> <item name="background">@color/colorPrimray</item>
</style>
Migrando a Toolbar
Finalmente, generar una Acitivity con la Toolbar, no es nada complejo. Sobre todo y lo más importante, es que no se pierden los items y la funcionalidad del menú realizado anteriormente.
Primero de todo, incluimos la Toolbar en el Layout de la Activity:
<android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<ImageView android:layout_width="wrap_content" android:layout_height="match_parent" android:src="@drawable/ic_app" android:scaleType="center"/>
</android.support.v7.widget.Toolbar>
<ImageView android:layout_width="wrap_content" android:layout_height="match_parent" android:src="@drawable/ic_app" android:scaleType="center"/>
</android.support.v7.widget.Toolbar>
Noten que ya no necesito incluir el icono por código, sino que puedo hacerlo desde el mismo layout con un ImageView.
En la hoja de estilos, aplique un estilo específico para la Toolbar:
<!-- Activity with Toolbar style. --><style name="AppSecondTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimray</item>
<item name="colorPrimaryDark">@color/colorPrimrayDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="toolbarStyle">@style/Toolbar</item>
</style>
<!-- Toolbar style. --><style name="Toolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:background">?attr/colorPrimary</item>
<item name="popupTheme">@style/Theme.AppCompat.Light</item>
</style>
<item name="colorPrimary">@color/colorPrimray</item>
<item name="colorPrimaryDark">@color/colorPrimrayDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="toolbarStyle">@style/Toolbar</item>
</style>
<!-- Toolbar style. --><style name="Toolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:background">?attr/colorPrimary</item>
<item name="popupTheme">@style/Theme.AppCompat.Light</item>
</style>
En el OnCreate, llamamos e incluimos la Toolbar:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
setSupportActionBar(toolbar);
Y listo!!!
Los métodos del menú no cambian y se mantienen. Noten que el menú con el Widget de búsqueda sigue funcionando exactamente igual.
