Superponer la Action Bar

Por defecto, la action bar aparece en la parte superior de la ventana de tu actividad, reduciendo ligeramente la cantidad de espacio disponible para el resto de elementos de dicho layout de la actividad. Si, durante el curso de la interacción del usuario, quieres ocultar o mostrar la action bar, puedes hacerlo mediante los métodos getSupportActionBar().hide(); y getSupportActionBar().show();. Sin embargo, esto provoca que tu actividad se recalcule y se redibuje el layout en base a su nuevo tamaño.

Para evitar este redimensionamiento de tus layouts cuando la action bar se oculte o se muestre, puedes habilitar el overlay mode, para que la action bar se superponga al contenido de la actividad. En este modo, tu layout utilizará todo el espacio disponible y la action bar aparecerá sobre el layout, figura 1, en lugar de aparecer encima y desplazar hacia abajo el resto de elementos. Así, si ocultas o muestras la action bar mediante los métodos mencionados anteriormente, el sistema no necesita reescalar tu layout y la transición será más sutil.

Consejo: Si quieres que tu layout sea parcialmente visible detrás de la action bar, puedes hacer que la action bar sea parcialmente o completamente transparente, como se muestra en la figura 2. Para más información sobre como modificar el fondo de una action bar, visita Estilizar la Action Bar.

Figura 1. Action bar en Overlay Mode.

Figura 2. Action Bar de la app Google Play Store en Overlay Mode.

Contenidos

Habilitar el Overlay Mode
Especificar un margen o espaciado superior

Habilitar el Overlay Mode

Para habilitar el Overlay Mode (Modo de Superposición) para la action bar, necesitas añadir a tu estilo la propiedad windowActionBarOverlay.

Si tu app no utiliza la support library, utilizarás android:windowActionBarOverlay, si si la utiliza, usarás windowActionBarOverlay, es decir, eliminarás el android:. En el ejemplo siguiente si se utiliza la support library al utilizar un tema AppCompat, por lo que tenemos que eliminar android::

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="windowActionBarOverlay">true</item>
    </style>
</resources>

Especificar un margen o espaciado superior

Cuando la action bar se encuentra en overlay mode, tienes que tener en cuenta que si ésta es opaca y hay elementos detrás de ella, no se verán, imagina que en la figura 1 los elementos estuvieran justo debajo de la misma action bar, para estos casos en los que la action bar no es transparente y puede ocultar ciertos elementos, añade un margen superior para evitarlo. Como la action bar tiene diferentes tamaños según el dispositivo o el modo en el que se encuentre (horizontal o vertical), puedes especificar que este margen utilice la altura de la action bar mediante actionBarSize. Por ejemplo:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?android:attr/actionBarSize">
    ...
</RelativeLayout>

Si estás utilizando la Support Library para la action bar, como en el ejemplo anterior, necesitas eliminar el prefijo android:. Por ejemplo:

<!-- Support library compatibility -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="?attr/actionBarSize">
    ...
</RelativeLayout>

Como recomendé en la lección anterior, utiliza siempre la Support Library para que tu app sea compatible con el mayor número de versiones Android posible.

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

Tags: action barañadir la action baroverlay modesuperponertoolbar