Estilizar la Action Bar

La Action Bar proporciona a tus usuarios un método familiar y predecible para realizar ciertas acciones y navegar por tu app, pero eso no significa que necesariamente tenga que tener el mismo aspecto visual que el resto de las apps. Si tu quieres estilizar la action bar para que encaje mejor con tu producto, puedes hacerlo fácilmente utilizando los recursos estilo y temas de Android.

Android incluye unos cuantos temas para la actividad, entre ellos permiten estilizar la action bar para que se vea “clara” u “oscura”. También puedes extender dichos temas para personalizar aún más el aspecto de tu action bar.

Nota: Si estás utilizando las APIs de la Support Library, entonces debes utilizar Theme.AppCompat.

Contenidos

Usar un Tema Android
Personalizar el Fondo
Personalizar el Texto
Toolbar

Usar un Tema Android

Android incluye dos temas base para indicar el color de la action bar:

android:Theme.Material para un tema “oscuro”.
android:Theme.Material.Light para un tema “claro”.

Puedes aplicar dichos temas en tu app al completo, declarándolas en el archivo manifest de tu app mediante el atributo android:theme en el elemento <application>, o de forma individual en cada elemento <activity>.

Por ejemplo:

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@android:style/Theme.Material.Light" >

También puedes utilizar la action bar oscura mientras que el resto de la actividad utiliza un esquema de color claro mediante android:Theme.Material.Light.DarkActionBar.

Cuando utilices la Support Library, debes en su lugar utilizar los temas mediante Theme.AppCompat:

Theme.AppCompat para el tema “oscuro”.
Theme.AppCompat.Light para el tema “claro”.
Theme.AppCompat.Light.DarkActionBar para el tema “claro” con la action bar “oscura”.

Asegúrate de que los iconos de la action bar tienen el contraste apropiado en relación al color de tu action bar. Para conseguir iconos para tu Action Bar, visita la página de activos de Roman Nurik la cual incluye los nuevos iconos de Material Design.

También puedes utilizar la action bar oscura mientras que el resto de la actividad utiliza un esquema de color claro mediante android:Theme.Material.Light.DarkActionBar.

Cuando utilices la Support Library, debes en su lugar utilizar los temas mediante Theme.AppCompat:

Theme.AppCompat para el tema “oscuro”.
Theme.AppCompat.Light para el tema “claro”.
Theme.AppCompat.Light.DarkActionBar para el tema “claro” con la action bar “oscura”.

Nota del autor: Recomiendo encarecidamente que se utilice la librería de soporte AppCompat (la cual utiliza el diseño Material Design), ya que los temas Material solo funcionan en API 21 o más, dando soporte a dispositivos que sean Lollipop, dejándose atrás a KitKat y Jelly Bean.

Personalizar el Fondo

Para cambiar el color de la action bar debes utilizar el elemento <item name="colorPrimary">@color/ColorPrimary</item>. Por ejemplo:

<resources>   
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">#FF9800</item>
        <item name="colorPrimaryDark">#F57C00</item>
    </style>
<resources>

Personalizar el Texto

Puedes personalizar aún más la Action Bar modificando la apariencia del título, ya sea variando el color o incluso el tamaño.

Por ejemplo, en aquí tienes un ejemplo de como modificar tanto el color del fondo como del título.

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
        <item name="actionBarStyle">@style/ActionBarStyle</item>
    </style>

    <style name="ActionBarStyle" parent="Widget.AppCompat.ActionBar">
        <item name="titleTextStyle">@style/ActionBarTitleTextStyle</item>
        <item name="background">@color/ColorPrimary</item>
    </style>

    <style name="ActionBarTitleTextStyle" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/ColorActionBarTitle</item>
    </style>
</resources>

Los colores utilizados han sido:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="ColorPrimary">#3F51B5</color>
    <color name="ColorPrimaryDark">#303F9F</color>
    <color name="ColorAccent">#E91E63</color>
    <color name="ColorActionBarTitle">#F06292</color>
</resources>

Toolbar

Se ha introducido un nuevo elemento para añadir la action bar a tus layouts, el cual facilita una mayor personalización de un modo más sencillo. Este elemento se llama Toolbar. Puedes añadirlo del siguiente modo dentro de tu activity_main.xml:

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?colorPrimary"
        android:elevation="4dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Los atributos android:layout_height y android:layout_width, permiten modificar la altura y anchura de la action bar, de ahora en adelante la llamaremos toolbar.
El atributo android:background permitemodificar el color de la toolbar.
El atributo android:elevation permite modificar la elevación, y por ende, la longitud y degradado de la sombra que se proyectará.
El atributo android:theme permite modificar la toolbar desde el archivo styles.xml, o utilizar uno de los estilos predefinidos que ya vienen incorporados, como lo es android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar".
El atributo app:popupTheme permite modificar la apariencia del menú overflow, ya sea tanto el fondo como el texto. En el ejemplo aparecerá con fondo blanco y el texto oscuro.

Tienes que tener en cuenta que para utilizar este widget, debes modificar tu estilo para que no incluya la action bar, ya que son incompatibles:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/ColorPrimary</item>
        <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
        <item name="colorAccent">@color/ColorAccent</item>
    </style>
</resources>

Los colores que utilizaremos en esta sección sobre la toolbar son:

<?xml version="1.0" encoding="utf-8"?>
<resources>
        <color name="ColorPrimary">#3F51B5</color>
        <color name="ColorPrimaryDark">#303F9F</color>
        <color name="ColorAccent">#E91E63</color>
        <color name="ColorPrimary2">#F44336</color>
        <color name="ColorPrimaryDark2">#D32F2F</color>
        <color name="ColorAccent2">#2196F3</color>
</resources>

Además para que funcione correctamente, tienes que darle soporte desde tu archivo MainActivity.java:

public class MainActivity extends AppCompatActivity {    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar;
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}

Como se ha mencionado anteriormente, con el atributo android:theme, puedes modificar la toolbar desde el archivo styles.xml. Por ejemplo:

Colocaremos la toolbar con estos atributos:

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?colorPrimary"
        android:elevation="4dp"
        android:theme="@style/Toolbar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

Y en nuestro estilos añadiremos lo siguiente:

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/ColorPrimary</item>
        <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
        <item name="colorAccent">@color/ColorAccent</item>
    </style>

    <style name="Toolbar" parent="Theme.AppCompat">
        <item name="colorPrimary">@color/ColorPrimary2</item>
        <item name="android:textColorPrimary">@color/ColorAccent2</item>
    </style>
</resources>

Puedes observar que, gracias a las líneas destacadas, hemos modificado tanto el colorPrimary como el android:textColorprimary de la toolbar, es decir, el color de fondo ha pasado a ser rojo y el color del título a azul.

Sin embargo el colorPrimaryDark, el cual se encarga de modificar el color de la status bar, al no haberlo modificado, sigue utilizando el color azul oscuro ya que no se puede modificar añadiendolo dentro del estilo Toolbar. Si lo cambias en el estilo AppTheme, y utilizas el valor ColorPrimaryDark2, obtendrías una status bar de color rojo oscuro.

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/ColorPrimary</item>
        <item name="colorPrimaryDark">@color/ColorPrimaryDark2</item>
        <item name="colorAccent">@color/ColorAccent</item>
    </style>

    <style name="Toolbar" parent="Theme.AppCompat">
        <item name="colorPrimary">@color/ColorPrimary2</item>
        <item name="android:textColorPrimary">@color/ColorAccent2</item>
    </style>
</resources>

También puedes cambiar tanto el color como el texto del título mediante estos dos métodos en java:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);

    toolbar.setTitleTextColor(getResources().getColor(R.color.ColorPrimary));
    getSupportActionBar().setTitle("Tu título");
}

Para ver más métodos visita el enlace a las referencias de la android.support.v7.widget.Toolbar.

Puedes ver más información sobre Estilizar la Action Bar en la página oficial de Google en inglés pulsando aquí.