Toolbars

Como se muestra en la documentación de Google sobre Material Design

Los Toolbars aparecen un paso por encima de la hoja de papel y es afectado por sus acciones. Cuando las hojas pasan por debajo de los Toolbars, se fijan y no pueden pasar a través de él por el lado superior.

¿Cómo se añade?

I. En tu archivo build.gradle añada la última versión de la librería appcompat.

dependencies {  
    compile 'com.android.support:appcompat-v7:X.X.X'
    // X.X.X especifica la versión
}

II. Haz que tu activity extienda de android.support.v7.app.AppCompatActivity.

public class MyActivity extends AppCompatActivity {  
   ...
}

III. Declara tu elemento Toolbar dentro de cualquier archivo de layout, layout.xml.

<android.support.v7.widget.Toolbar  
    android:layout_width="fill_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    />

¿Cómo modificar el estilo?

I. Declara los siguientes estilos personalizados en tu archivo de estilos styles.xml.

<style name="ToolbarTextAppearance">  
    <item name="android:fontFamily">sans-serif-condensed</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="android:shadowDx">1</item>
    <item name="android:shadowDy">1</item>
    <item name="android:shadowRadius">2</item>
    <item name="android:shadowColor">?colorAccent</item>
</style>

<style name="ToolbarTextAppearance.Title">  
    <item name="android:textSize">20sp</item>
</style>

<style name="ToolbarTextAppearance.Subtitle">  
    <item name="android:textSize">14sp</item>
</style>

<style name="MyToolbar">  
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark</item>
    <item name="android:background">?colorPrimary</item>
    <item name="android:elevation">4dp</item>
</style>  

II. Aplica estos estilos a tu elemento Toolbar a través del os atributos: style, tittleTextAppearance y subtittleTextAppearance.

<android.support.v7.widget.Toolbar  
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    app:title="Toolbar"
    app:subtitle="Toolbars are amazing"
    app:titleTextAppearance="@style/ToolbarTextAppearance.Title"
    app:subtitleTextAppearance="@style/ToolbarTextAppearance.Subtitle"
    style="@style/MyToolbar"
    />

Toolbar con iconos dentro de un menú

I. Crea elementos item por cada acción.

<menu 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">

    <item
        android:id="@+id/action_favorite"
        android:icon="@drawable/ic_favorite"
        app:showAsAction="always"/>

    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        app:showAsAction="always"/>

    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never"/>
</menu>

II. Infla to archivo de menu con el método inflateMenu de tu Toolbar

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);  
toolbar.inflateMenu(R.menu.main);  

II. Haz que tu activity implemente la interfaz: Toolbar.OnMenuItemClickListener.

public class MyActivity extends AppCompatActivity  
    implements Toolbar.OnMenuItemClickListener {

III. Referencia la actividad que implementa al listener com el método: setOnMenuItemClickListener.

toolbar.setOnMenuItemClickListener(this);  

IV. Implementa tus acciones en el método: onMenuItemClick.

@Override
public boolean onMenuItemClick(MenuItem item) {  
    switch (item.getItemId()) {
        case R.id.action_favorite:
            Toast.makeText(this, "Favorite", Toast.LENGTH_SHORT).show();
            return true;

        case R.id.action_search:
            Toast.makeText(this, "Search", Toast.LENGTH_SHORT).show();
            return true;
    }

    return true;
}

Toolbar con icono de navegación hacia atrás

I. Declara este estilo personalizado dentro del archivo de estilos styles.xml.

<style name="MyToolbar">  
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark</item>
    <item name="navigationIcon">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>
    <item name="android:background">?colorPrimary</item>
    <item name="android:elevation">4dp</item>
</style>  

II. Aplicar el estilo al Toolbar con el atributo style.

<android.support.v7.widget.Toolbar  
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    app:title="Toolbar"
    app:subtitle="Toolbars are amazing"
    style="@style/MyToolbar"
    />

III. Referencia un View.OnClickListener para manejar la acción de click en el icono de navegación.

toolbar.setNavigationOnClickListener(new View.OnClickListener() {  
    @Override
    public void onClick(View v) {
        onBackPressed();
    }
});

Toolbar con espacio en blanco

I. Declara un estilo personalizado en tu archivo styles.xml.

<style name="MyToolbar">  
    <item name="theme">@style/ThemeOverlay.AppCompat.Dark</item>
    <item name="navigationIcon">@drawable/abc_ic_ab_back_mtrl_am_alpha</item>
    <item name="titleMarginTop">?actionBarSize</item>
    <item name="android:background">?colorPrimary</item>
    <item name="android:elevation">4dp</item>
</style>  

II. Aplica este estilo a tu Toolbar con el atributo style.

<android.support.v7.widget.Toolbar  
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="112dp"
    app:title="Toolbar"
    app:subtitle="Toolbars are really cool"
    style="@style/MyToolbar"
    />