Apuntes de cómo mostrar u ocultar la barra de estado y la barra de navegación en dispositivos Android utilizando Kotlin.
Los dispositivos Android tienen una interfaz de usuario que consta de la barra de estado y la barra de navegación. La barra de estado muestra información como la hora, la batería y la intensidad de la señal. La barra de navegación permite a los usuarios interactuar con el dispositivo. A veces, es necesario ocultar estas barras para crear una experiencia de pantalla completa. En este artículo, te mostraremos cómo hacerlo en Kotlin.
Mostrando y ocultando la barra de estado:
Para mostrar u ocultar la barra de estado en dispositivos Android, se puede usar las siguientes funciones de extensión que operan sobre la Actividad que pueden ser llamadas en cualquier parte de la aplicación.
Ocultar la interfaz de usuario del sistema
La función hideSystemUI() es una función en Kotlin que permite ocultar la interfaz del sistema en dispositivos Android.
fun Activity.hideSystemUI() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
window.insetsController?.let {
// Default behavior is that if navigation bar is hidden, the system will "steal" touches
// and show it again upon user's touch. We just want the user to be able to show the
// navigation bar by swipe, touches are handled by custom code -> change system bar behavior.
// Alternative to deprecated SYSTEM_UI_FLAG_IMMERSIVE.
it.systemBarsBehavior = WindowInsetsController.BEHAVIOR_SHOW_TRANSIENT_BARS_BY_SWIPE
// make navigation bar translucent (alternative to deprecated
// WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION)
// - do this already in hideSystemUI() so that the bar
// is translucent if user swipes it up
//window.navigationBarColor = getColor(android.R.color.transparent)
// Finally, hide the system bars, alternative to View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
// and SYSTEM_UI_FLAG_FULLSCREEN.
it.hide(WindowInsets.Type.systemBars())
}
} else {
// Enables regular immersive mode.
// For "lean back" mode, remove SYSTEM_UI_FLAG_IMMERSIVE.
// Or for "sticky immersive," replace it with SYSTEM_UI_FLAG_IMMERSIVE_STICKY
@Suppress("DEPRECATION")
window.decorView.systemUiVisibility = (
// Do not let system steal touches for showing the navigation bar
View.SYSTEM_UI_FLAG_IMMERSIVE
// Hide the nav bar and status bar
or View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
or View.SYSTEM_UI_FLAG_FULLSCREEN
// Keep the app content behind the bars even if user swipes them up
or View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)
// make navbar translucent - do this already in hideSystemUI() so that the bar
// is translucent if user swipes it up
@Suppress("DEPRECATION")
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION)
}
setTransparentStatusBar()
}
La función incluye un bloque de condicional que verifica si la versión del sistema operativo es mayor o igual a la versión R de Android. Si se cumple esta condición, la función utiliza la clase WindowInsetsController para establecer el comportamiento de la barra de navegación y la barra de estado.
En particular, se establece el comportamiento para que el usuario pueda mostrar la barra de navegación mediante un gesto de deslizamiento y se oculta la barra de estado y la barra de navegación. También se establece el color de la barra de navegación como transparente y se oculta el contenido detrás de las barras incluso si el usuario las desliza hacia arriba.
Si la versión del sistema operativo no es mayor o igual a la versión R de Android, se establece la visibilidad de la interfaz del sistema usando la clase WindowManager.LayoutParams. En este caso, se establece la visibilidad de la interfaz del sistema para que se oculten la barra de navegación y la barra de estado, y se establece el comportamiento para que el contenido de la aplicación permanezca detrás de las barras incluso si el usuario las desliza hacia arriba.
Barra de estado transparente!
La función también llama a la función setTransparentStatusBar(), que establece la barra de estado como transparente.
Si se desea que la barra de estado en dispositivos Android sea transparente, se debe remover el comentario en la línea de código:
window.navigationBarColor = getColor(android.R.color.transparent)
Esta línea de código se encuentra dentro de la función hideSystemUI() y es la que se encarga de hacer que la barra de navegación sea translúcida. Al remover el comentario, se activa esta línea de código y se logra que la barra de estado también sea transparente.
Es importante destacar que al hacer que la barra de estado sea transparente, se pueden presentar ciertos problemas de legibilidad de contenido, especialmente en dispositivos con fondos de pantalla claros o blancos. Por lo tanto, es importante probar el código en diferentes situaciones y ajustar la transparencia de la barra de estado según las necesidades de la aplicación.
Elementos de navegación de sistema translucidos
Si se desea establecer que tanto la barra de estado como la barra de navegación sean translúcidos en una aplicación de Android, se puede aplicar el siguiente código en el archivo theme.xml de la aplicación:
<item name="android:windowTranslucentStatus">true</item> <item name="android:windowTranslucentNavigation">true</item>
Estas líneas de código establecen que tanto la barra de estado como la barra de navegación sean translúcidos. Al establecer estos valores como «true» en el archivo theme.xml, se asegura que la configuración se aplique en toda la aplicación.
Es importante destacar que al hacer que la barra de estado y la barra de navegación sean translúcidos, el contenido de la aplicación puede superponerse con estas barras y afectar la legibilidad de ciertos elementos. Por lo tanto, es importante probar el código en diferentes situaciones y ajustar la transparencia de la barra de estado y navegación según las necesidades de la aplicación.
Mostrar la interfaz de usuario del sistema
La función showSystemUI() es una función en Kotlin que permite mostrar la interfaz del sistema en dispositivos Android.
fun Activity.showSystemUI() {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
// show app content in fullscreen, i. e. behind the bars when they are shown (alternative to
// deprecated View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION and View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)
window.setDecorFitsSystemWindows(false)
// finally, show the system bars
window.insetsController?.show(WindowInsets.Type.systemBars())
} else {
// Shows the system bars by removing all the flags
// except for the ones that make the content appear under the system bars.
@Suppress("DEPRECATION")
window.decorView.systemUiVisibility = (
View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
or View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)
}
}
La función incluye un bloque de condicional que verifica si la versión del sistema operativo es mayor o igual a la versión R de Android. Si se cumple esta condición, la función utiliza la clase WindowInsetsController para establecer el comportamiento de la barra de navegación y la barra de estado.
En particular, se establece el contenido de la aplicación para que se muestre detrás de las barras cuando se muestran y se muestran las barras del sistema.
Si la versión del sistema operativo no es mayor o igual a la versión R de Android, se establece la visibilidad de la interfaz del sistema usando la clase WindowManager.LayoutParams. En este caso, se establece la visibilidad de la interfaz del sistema para que el contenido de la aplicación aparezca debajo de las barras del sistema.
La función no llama a ninguna otra función y simplemente se encarga de mostrar la interfaz del sistema.
Demostración
En el siguiente tweet se puede encontrar una pequeña demostración de cómo funciona el código que se ha compartido anteriormente para mostrar y ocultar la interfaz del sistema en dispositivos Android
En el video, se puede ver cómo se utiliza el código para ocultar y mostrar la barra de navegación y la barra de estado en un dispositivo Android. También se puede ver cómo se utiliza el código para hacer que la barra de navegación sea translúcida y para permitir que el usuario la muestre con un gesto de deslizamiento.
La demostración es breve pero efectiva y muestra claramente cómo se puede utilizar el código para modificar la visibilidad de la interfaz del sistema en dispositivos Android.
Fuentes
Para obtener información más detallada sobre cómo modificar la visibilidad de la interfaz del sistema en dispositivos Android, se puede consultar la fuente recomendada: Modifying System UI Visibility in Android 11
En este artículo, se explican los cambios en la API de Android 11 relacionados con la modificación de la visibilidad de la interfaz del sistema. También se brindan ejemplos de código y se analizan las diferentes opciones disponibles para mostrar y ocultar la barra de navegación y la barra de estado.
El artículo se enfoca en la API de Android 11, pero también se proporciona información sobre cómo trabajar con versiones anteriores de Android y cómo hacer que las aplicaciones sean compatibles con múltiples versiones del sistema operativo.
Si se está interesado en aprender más sobre la modificación de la visibilidad de la interfaz del sistema en dispositivos Android, este artículo es una excelente fuente de información.
C O D E L A B Y 