如何在 Android Jetpack Compose 中使导航栏透明？

Question

I want to make the navigation bar transparent in Jetpack Compose.

This is the code:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.SideEffect
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.core.view.WindowCompat
import com.google.accompanist.systemuicontroller.rememberSystemUiController

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {

        // app UI is expanded to system bars
        WindowCompat.setDecorFitsSystemWindows(window, false)

        super.onCreate(savedInstanceState)

        // this is also not working
        // window.navigationBarColor = android.graphics.Color.TRANSPARENT

        setContent {
            YourProjectNameTheme {

                val systemUiController = rememberSystemUiController()

                SideEffect {
                    // set transparent color so that our image is visible
                    // under the status bar
                    systemUiController.setStatusBarColor(color = Color.Transparent)

                    // not working
                    systemUiController.setNavigationBarColor(color = Color.Transparent)
                }

                Surface(
                    modifier = Modifier
                        .fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {

                    LazyColumn(
                        modifier = Modifier
                            .fillMaxSize()
                        .navigationBarsPadding() // adds padding below
                    ) {
                        items(count = 4) {
                            Image(
                                painter = painterResource(id = R.drawable.squirrel),
                                contentDescription = "Squirrel",
                                contentScale = ContentScale.FillWidth,
                                modifier = Modifier.fillMaxWidth()
                            )
                        }
                    }
                }
            }
        }
    }
}

Here is the output:

The navigation bar is not 100% transparent. I'm using the system ui controller:

implementation "com.google.accompanist:accompanist-systemuicontroller:0.28.0"

Other colors like Red, Green (fully opaque) are working. But I cannot set trasparent color. Anyone knows the solution?

Answer 1

val systemUiController = rememberSystemUiController()
SideEffect {
    systemUiController.setNavigationBarColor(
        // setColor Here
        color = Color.Magenta,
        darkIcons = false
    )
}

set color on Color.Magenta