Cómo poner una actividad a pantalla completa en Android

Apuntes de cómo establecer una actividad a pantalla completa en Android utilizando Kotlin, utilizando los atributos de estilo de ventana que nos ofrece Android.

Lo primero que debemos hacer es crear un nuevo estilo en nuestro archivo de recursos styles.xml. Para ello, abrimos el archivo y agregamos lo siguiente:

<style name="FullScreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
   <item name="android:windowFullscreen">true</item>
   <item name="android:windowTranslucentStatus">true</item>
   <item name="android:windowTranslucentNavigation">true</item>
   <item name="android:windowDrawsSystemBarBackgrounds">true</item>
   <item name="android:windowLightStatusBar">false</item>
</style>

El atributo android:windowFullscreen establece que la actividad se debe mostrar en pantalla completa, es decir, sin la barra de estado ni la barra de navegación. Los atributos android:windowTranslucentStatus y android:windowTranslucentNavigation hacen que la barra de estado y la barra de navegación sean translúcidas, permitiendo que la actividad ocupe todo el espacio en pantalla. El atributo android:windowDrawsSystemBarBackgrounds indica que se debe dibujar el fondo de la barra de estado y la barra de navegación. Por último, el atributo android:windowLightStatusBar establece que el texto en la barra de estado sea oscuro en lugar de claro.

Una vez que hemos creado el estilo, lo siguiente es aplicarlo a la actividad que queremos que se muestre a pantalla completa. Para ello, abrimos el archivo AndroidManifest.xml y agregamos el siguiente atributo al elemento <activity> correspondiente:

android:theme="@style/FullScreenTheme"

Con esto, hemos establecido la actividad a pantalla completa en nuestra aplicación Android.

Dispositivos con notch

Es importante optimizar la interfaz de usuario para los dispositivos más recientes, que a menudo tienen una muesca o notch en la pantalla. Para ofrecer una experiencia de usuario óptima en estos dispositivos, se debe establecer la actividad a pantalla completa y utilizar todo el espacio disponible, incluido el espacio entre el notch y el borde de la pantalla. Para lograr esto, podemos usar el atributo android:windowLayoutInDisplayCutoutMode en nuestro archivo de estilo XML.

El valor shortEdges para el atributo android:windowLayoutInDisplayCutoutMode indica que la actividad debe ocupar todo el espacio de pantalla disponible, incluido el espacio entre el notch y el borde de la pantalla. Este valor es compatible con Android 9 (Pie) y versiones posteriores.

Para establecer este valor, podemos agregar el siguiente atributo a nuestro estilo en el archivo styles.xml:

<item name="android:windowLayoutInDisplayCutoutMode" tools:targetApi="o_mr1">shortEdges</item>

El atributo tools:targetApi="o_mr1" indica que este valor solo se aplicará en dispositivos con Android 9 (Pie) y versiones posteriores.

Para establecer la actividad a pantalla completa y utilizar todo el espacio disponible en dispositivos con muesca en la pantalla, también podemos utilizar funciones de extensión Kotlin. Estas funciones nos permiten establecer la actividad a pantalla completa de manera programática y pueden ser reutilizadas en diferentes actividades en nuestra aplicación.

Mostrar contenido por debajo de la muesca

fun Activity.showBelowCutout() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
        window.attributes.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
    }
}

La función showBelowCutout() establece la actividad a pantalla completa y asegura que el contenido se muestre debajo del espacio de la muesca. Para lograr esto, establece el modo LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER en el atributo layoutInDisplayCutoutMode del objeto de atributos de ventana.

Mostrar contenido con la muesca

fun Activity.showFullscreenCutout() {
    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
        window.attributes.layoutInDisplayCutoutMode = WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES
    }
}

Por otro lado, la función showFullscreenCutout() establece la actividad a pantalla completa y utiliza todo el espacio disponible, incluyendo el espacio de la muesca. Para lograr esto, establece el modo LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES en el atributo layoutInDisplayCutoutMode del objeto de atributos de ventana.

Más información

Si quieres expandir más tu conocimiento sobre cómo manejar la muesca de pantalla en dispositivos Android, la documentación oficial de Android ofrece información detallada sobre cómo trabajar con el espacio de la muesca en tus diseños de interfaz de usuario. Puedes consultar esta información en la página de la documentación oficial de Android dedicada a la muesca de pantalla, la cual se encuentra en el siguiente enlace:

En esta página encontrarás información sobre cómo detectar si un dispositivo tiene una muesca en la pantalla, cómo establecer el margen de la ventana de tu aplicación para evitar recortes, y cómo establecer el comportamiento del sistema para tu actividad cuando se muestra en dispositivos con muesca: Support display cutouts

La documentación también proporciona información detallada sobre cómo establecer la actividad a pantalla completa y utilizar todo el espacio disponible, incluyendo el espacio de la muesca, y cómo trabajar con el nuevo modo de diseño LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT, introducido en Android 11. También encontrarás ejemplos de cómo trabajar con la muesca en tus diseños de interfaz de usuario utilizando XML o programación Kotlin.

Anuncio publicitario