Cambiar el color de la barra de estado en Jetpack Compose

Cada problema resuelto es una lección aprendida. #ConsejosAndroid #ProblemaResueltoHoy

Cambiar el color de la barra de estado es una tarea común al diseñar aplicaciones de Android. Con Jetpack Compose, es un proceso simple que se puede realizar con solo unas pocas líneas de código.

Para cambiar el color de la barra de estado en Jetpack Compose, podemos usar el SystemUiControllerproporcionado por el androidx.compose.ui.platformpaquete.

Primero, necesitamos accompanist-systemuicontroller, agregue la dependencia al archivo build.gradle de su aplicación:

dependencies {
    implementation "com.google.accompanist:accompanist-systemuicontroller:x.y.z"
}

Necesitamos crear una función componible que establezca el color de la barra de estado (cree la clase SetStatusBarColor.kt ). Aquí hay un ejemplo:

@Composable
fun SetStatusBarColor(color: Color) {
    val systemUiController = rememberSystemUiController()
    SideEffect {
        systemUiController.setSystemBarsColor(color)
    }
}

A continuación, podemos llamar a esta función en nuestra @Composablefunción principal en MainActivity , así:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            YourAppNameTheme {
                StatusBarColor(color = MaterialTheme.colors.primary)
                // Other content here, example :
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
                    YourAppClass()
                }
            }
        }
    }
}

¡Y eso es! Con solo unas pocas líneas de código, podemos cambiar fácilmente el color de la barra de estado en nuestra aplicación de Android basada en Jetpack Compose.

El uso SystemUiControllerno solo se limita a cambiar el color de la barra de estado, sino que también se puede usar para otras configuraciones de la interfaz de usuario del sistema, como la barra de navegación, el modo inmersivo y más.

Tengo una aplicación de muestra que usa jetpack compose en mi repositorio github.com/im-o .

Listo y espolvoreado, gracias!