CODEWITHSUNDEEP
androidkotlinandroid-jetpack-compose
Paul9999
Paul9999

Reputation: 1001

How to change the color of the icons in the navigation bar in Jetpack Compose?

I have modified the color of the navigation bar to put a lighter color:

<item name="android:navigationBarColor" tools:targetApi="1">@color/navigation_bar</item>

Now the problem is that the icons on the bar are still blank so they are hardly visible. How can you change the color of these icons?

enter image description here

Thanks

Upvotes: 3

Views: 2517

Answers (2)

Phyo Thiha Win
Phyo Thiha Win

Reputation: 99

If you are developing the Jetpack Compose App, I also recommend you to make theme changes in the theme.kt file. You can completely control everything inside it. Here is my usage in theme.kt of my Jetpack Compose project. You can use your own colors depending on your theme (Light or Dark).

WindowCompat.getInsetsController(window, view).isAppearanceLightNavigationBars = !darkTheme

    val darkTheme = isSystemInDarkTheme()
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor =
                if (darkTheme) md_theme_dark_background.toArgb() else ColorPrimary.toArgb()
            window.navigationBarColor =
                if (darkTheme) md_theme_dark_surface.toArgb() else md_theme_light_surface.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme
            WindowCompat.getInsetsController(window, view).isAppearanceLightNavigationBars = !darkTheme
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        shapes = Shapes,
        content = {
            content(darkTheme)
        }
    )

Upvotes: 1

Linh
Linh

Reputation: 60973

Because your navigation bar is light, you can use this function to make the icon on navigation bar easy to see

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

        WindowInsetsControllerCompat(window, window.decorView).isAppearanceLightNavigationBars = true
        setContent {
             ...
        }
    }
}

Upvotes: 5

Related Questions