Cómo mostrar una imagen por debajo de la barra de estado en Android

En este artículo aprenderás cómo hacer que una imagen se muestre por debajo de la barra de estado en una aplicación de Android. La barra de estado es una parte importante de la interfaz de usuario de Android, y en ocasiones se desea mostrar una imagen detrás de ella. Mostrar una imagen detrás de la barra de estado puede mejorar el diseño de la aplicación y crear una experiencia de usuario más atractiva. A través de los pasos y ejemplos presentados en este artículo, aprenderás cómo mostrar una imagen por debajo de la barra de estado en tu aplicación de Android.

Concepto

Para hacer que una imagen se muestre por debajo de la barra de estado, se puede utilizar la propiedad «android:fitsSystemWindows» en el layout que contiene la imagen. Esto permite que la vista ocupe el espacio detrás de la barra de estado.

Por ejemplo, en el layout que contiene la imagen se puede incluir la siguiente propiedad:

android:fitsSystemWindows="true"

Con esta propiedad, la vista de la imagen se ajustará automáticamente detrás de la barra de estado y la imagen se mostrará por debajo de ella.

Además, para garantizar que la imagen se ajuste correctamente detrás de la barra de estado, se puede utilizar la propiedad «android:windowTranslucentStatus» en el estilo de la actividad. Esta propiedad indica que la barra de estado debe ser transparente y permitir que la imagen se muestre detrás de ella.

1. Añadir la dependencia de Material Design en el archivo build.gradle (Module: app) del proyecto:

implementation 'com.google.android.material:material:1.4.0'

2. Agregar el atributo android:fitsSystemWindows="true" al CoordinatorLayout para que la vista se muestre debajo de la StatusBar.
3. Agregar el AppBarLayout que contendrá el CollapsingToolbarLayout.

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">

4. Agregar el CollapsingToolbarLayout como hijo del AppBarLayout.

<com.google.android.material.appbar.CollapsingToolbarLayout
    android:id="@+id/collapsingToolbarLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:contentScrim="?attr/colorPrimary"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

En el código anterior, se establece el atributo contentScrim para que la imagen de fondo se desvanezca en el color primario cuando se desplaza hacia arriba. También se establece el atributo layout_scrollFlags para permitir que el CollapsingToolbarLayout se desplace hacia arriba y se colapse.

5. Agregar una imagen de fondo en el CollapsingToolbarLayout.

<ImageView
    android:id="@+id/toolbarBackgroundImageView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    android:src="@drawable/background_image"
    app:layout_collapseMode="parallax"
    app:layout_collapseParallaxMultiplier="0.7" />

Aquí, se establece el ImageView con el atributo layout_collapseMode en parallax para que la imagen de fondo se desplace ligeramente al desplazarse hacia arriba y el atributo layout_collapseParallaxMultiplier se establece en 0.7 para que la imagen de fondo se desplace a una velocidad del 70% de la velocidad de desplazamiento de la vista.

6. Agregar la MaterialToolbar como hijo del CollapsingToolbarLayout.

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/materialToolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/transparent"
    app:contentInsetStart="0dp"
    app:layout_collapseMode="pin" />

Aquí, se establece el atributo layout_collapseMode en pin para que la MaterialToolbar se mantenga fija en la parte superior de la pantalla cuando se desplaza la vista hacia arriba. Además, se establece el atributo contentInsetStart en 0dp para que la MaterialToolbar se alinee con el borde izquierdo de la pantalla.

Definición del estilo

<style name="AppTheme.Detailed">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="actionBarTheme">@style/ThemeOverlay.Material3.Dark</item>
    <item name="android:windowLightStatusBar">false</item>
    <!--<item name="android:statusBarColor">@android:color/transparent</item>-->
    <item name="android:windowTranslucentStatus">true</item>
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
</style>

Este es un ejemplo de un bloque de código XML que define un estilo llamado «AppTheme.Detailed». Este estilo se utiliza para configurar la apariencia de la aplicación en diferentes dispositivos y configuraciones. En este caso, el estilo incluye configuraciones para el color de la barra de estado y la apariencia de la barra de acción.

La propiedad «windowActionBar» se establece en «false» para indicar que la aplicación no debe usar una barra de acción nativa. En su lugar, se utilizará una barra personalizada. La propiedad «windowNoTitle» se establece en «true» para indicar que la aplicación no tiene título.

La propiedad «actionBarTheme» se establece en «@style/ThemeOverlay.Material3.Dark» para indicar que la apariencia de la barra de acción debe ser oscura y coincidir con el tema Material Design.

La propiedad «android:windowLightStatusBar» se establece en «false» para indicar que el texto de la barra de estado debe ser oscuro y contrastar con el color de fondo de la barra de estado.

La propiedad «android:windowTranslucentStatus» se establece en «true» para permitir que la imagen de fondo de la actividad se muestre detrás de la barra de estado.

La propiedad «android:windowDrawsSystemBarBackgrounds» se establece en «true» para permitir que la aplicación dibuje detrás de la barra de estado y la barra de navegación, lo que garantiza que la imagen de fondo de la actividad se muestre correctamente.

En AndroidManifest.xml asignar el tema

<activity
    android:name=".DetailActivity"
    android:theme="@style/AppTheme.Detailed"
    android:screenOrientation="portrait"
    android:windowSoftInputMode="adjustPan"
    android:exported="false" />

Definición del layout

Este es el código para el diseño del layout que muestra una imagen por debajo de la barra de estado y utiliza la funcionalidad de CollapsingToolbarLayout:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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"
    android:id="@+id/root_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:liftOnScroll="false"
        android:background="@color/md_theme_surface"
        android:fitsSystemWindows="true"
        android:theme="?attr/actionBarTheme">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:titleEnabled="false"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/card_item_background"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <com.google.android.material.imageview.ShapeableImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/image_placeholder"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7"
                app:shapeAppearance="@style/ShapeAppearance.Rounded.Bottom"/>

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:title=" "
                app:navigationIcon="@drawable/ic_back_arrow_oval_filled"
                app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

            </com.google.android.material.appbar.MaterialToolbar>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="60dp"
        android:clipToPadding="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:useCompatPadding="true"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@drawable/ic_share_24"
        android:contentDescription="TODO" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

El primer elemento que encontramos es el CoordinatorLayout, que es el contenedor principal de toda la vista. Este layout es el encargado de coordinar todos los elementos que hay dentro de él.

Dentro del CoordinatorLayout, encontramos un AppBarLayout, que es el encargado de mostrar la barra de la aplicación. Dentro de él, encontramos el CollapsingToolbarLayout, que es el layout encargado de crear la imagen de fondo que se colapsa al hacer scroll.

Dentro del CollapsingToolbarLayout encontramos un ShapeableImageView, que es el encargado de mostrar la imagen de fondo que se colapsa. También encontramos un MaterialToolbar, que es el encargado de mostrar la barra superior de la aplicación.

Por último, encontramos un FloatingActionButton, que es el botón flotante que se muestra en la parte inferior derecha de la pantalla. Además, también encontramos un RelativeLayout que es el contenedor del anuncio que se mostrará en la parte inferior de la pantalla.

En resumen, este código crea una vista que muestra una imagen de fondo que se colapsa al hacer scroll y una barra superior que muestra el título de la vista y un botón para regresar a la vista anterior. Además, también incluye un botón flotante para compartir la vista y un contenedor para un anuncio que se muestra en la parte inferior de la pantalla.

En cuanto a la personalización de la Material Toolbar para que los botones aparezcan con forma circular, te comento que esta información no está disponible en este artículo.