Cambiare il colore della barra di stato in Jetpack Compose

Ogni problema risolto è una lezione appresa. #AndroidTips #ProblemaRisoltoOggi

La modifica del colore della barra di stato è un'attività comune durante la progettazione di applicazioni Android. Con Jetpack Compose, è un processo semplice che può essere eseguito in poche righe di codice.

Per cambiare il colore della barra di stato in Jetpack Compose, possiamo usare il SystemUiControllerfornito dal androidx.compose.ui.platformpacchetto.

Innanzitutto, abbiamo bisogno di accompanist-systemuicontroller, aggiungi la dipendenza al file build.gradle della tua app:

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

Dobbiamo creare una funzione componibile che imposterà il colore della barra di stato (creare la classe SetStatusBarColor.kt ). Ecco un esempio:

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

Successivamente, possiamo chiamare questa funzione nella nostra @Composablefunzione principale su MainActivity , in questo modo:

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()
                }
            }
        }
    }
}

E questo è tutto! Con poche righe di codice, possiamo cambiare facilmente il colore della barra di stato nella nostra applicazione Android basata su Jetpack Compose.

L'utilizzo SystemUiControllernon si limita solo alla modifica del colore della barra di stato, ma può essere utilizzato anche per altre configurazioni dell'interfaccia utente del sistema, come la barra di navigazione, la modalità immersiva e altro.

Ho un'app sampel che utilizza jetpack compose nel mio repository github.com/im-o .

Fatto e spolverato, grazie!