Navigation Bar (Translúcida o de color)

Con Android Lollipop se ha añadido otra opción de personalización de la barra de navegación a las ya existentes (la clásica barra de navegación de color negro y la barra traslúcida introducida en Android 4.4 Kitkat). Esta nueva opción es la de poder colorear la navigation bar como se puede observar en la imagen.

Para este tutorial se han utilizado los siguientes elementos:

• Colores Material Design

Aunque debajo de este vídeo tienes todo lo necesario para conseguir el objetivo de esta entrada, muchas personas prefieren un vídeo-tutorial. ¡Tú eliges!

La Navigation Bar translúcida funciona a partir de Android 4.4 KitKat (API v19) en adelante. En esta API el translúcido es un degradado, mientras que en la API v21, es decir, en Android 5.0 Lollipop, no cuenta con este degradado, simplemente oscurece un poco el fondo, para ser exactos, con este valor: #4000.

Para conseguir la navigation bar translúcida, es necesario añadir un ítem dentro del archivo de estilo v19 de tu app. El código necesario se encuentra en la línea destacada:

<?xml version="1.0" encoding="utf-8"?>
<resources>
     <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
         <!-- Customize your theme here. -->
         <item name="colorPrimary">@color/md_orange_500</item>
         <item name="colorPrimaryDark">@color/md_orange_700</item>
         <item name="colorAccent">@color/md_light_blue_A200</item>
         <item name="colorControlHighlight">@color/md_orange_700</item>
         <item name="android:windowTranslucentNavigation">true</item>
     </style>
</resources>

El tema que se está aplicando se llama AppTheme, y es el que tiene que aparecer en el archivo manifest de tu app:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.videum.javier.navigationbar" >
    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Otra forma sería utilizar el siguiente código en java, por si se quiere modificar el valor en función de lo que haga el usuario (por ejemplo tras presionar un botón):

Window w = getWindow();                
w.setFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION,
           WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);

El código que hace lo contrario es:

final WindowManager.LayoutParams attrs = getWindow().getAttributes();
attrs.flags &= (~WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
getWindow().setAttributes(attrs);
getWindow().clearFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);

En Kitkat 4.4 (v19 y v20) se deberá ver translúcida con el degradado. Pero ¿qué ocurre en Lollipop? En principio debería verse translúcida como en la imagen, salvo que se haya creado un estilo específico para la versión v21 y que no se haya establecido cómo debería ser la navigation bar. Ten esto en cuenta ya que por norma general, crearás un estilo específico para la versión v21.

El cambio de color de la barra de navegación solo está disponible en Android Lollipop (v21). Se puede hacer de dos formas, mediante un ítem en el archivo style.xml (v21) o mediante un método en tu actividad (por ejemplo, en MainActivity.java).

Para el primer método, se debe añadir el ítem que puedes ver en la línea destacada:

<?xml version="1.0" encoding="utf-8"?>
<resources>
     <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
         <!-- Customize your theme here. -->
         <item name="colorPrimary">@color/md_orange_500</item>
         <item name="colorPrimaryDark">@color/md_orange_700</item>
         <item name="colorAccent">@color/md_light_blue_A200</item>
         <item name="colorControlHighlight">@color/md_orange_700</item>
         <item name="android:navigationBarColor">@color/md_orange_500</item>
     </style>
</resources>

Para el segundo método solo hay que utilizar el siguiente código java:

getWindow().setNavigationBarColor(getResources().getColor(R.color.md_red_500));

Ten cuidado con este último, ya que solo se puede ejecutar en dispositivos con Lollipop, luego deberías introducirlo del siguiente modo:

if (Build.VERSION.SDK_INT >= 21){
   getWindow().setNavigationBarColor(getResources().getColor(R.color.md_red_500));
}