I am pretty new to Kotlin. I have a BottomNavigation
wrapped in a Scaffold
. The tabs background color change works well. But, though the icons are actually white, it appears black on the app, though I set the selectedContentColor
to Color.White
.
And unselectedContentColor
to Color.White.copy(alpha = 0.7f)
.
It does not even show whether or not I am in one tab or the other. They all just remain the same.
This is the code for the Scaffold
:
Scaffold(
bottomBar = {
BottomNavigation(
backgroundColor = Color(0xff6c247c),
contentColor = Color.White
) {
tabs.forEachIndexed { index, title ->
BottomNavigationItem(
icon = { Icon(painter = icons[index], contentDescription = title) },
label = { Text(title) },
selected = selectedTab == index,
onClick = { selectedTab = index },
alwaysShowLabel = true,
selectedContentColor = Color.White,
unselectedContentColor = Color.White.copy(alpha = 0.7f)
)
}
}
}
)
And my theme.xml
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="Theme.HSMApp" parent="android:Theme.Material.Light.NoActionBar" >
<item name="colorPrimary">@color/primaryColor</item>
<item name="colorPrimaryVariant">@color/primaryVariantColor</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">@color/secondaryColor</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
</resources>
I also have this is in my Theme.kt
package com.phela.hsmapp.ui.theme
import android.app.Activity
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.SideEffect
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalView
import androidx.core.view.WindowCompat
private val DarkColorScheme = darkColorScheme(
primary = Purple80,
secondary = PurpleGrey80,
tertiary = Pink80
)
private val LightColorScheme = lightColorScheme(
primary = Purple40,
secondary = PurpleGrey40,
tertiary = Pink40
/* Other default colors to override
background = Color(0xFFFFFBFE),
surface = Color(0xFFFFFBFE),
onPrimary = Color.White,
onSecondary = Color.White,
onTertiary = Color.White,
onBackground = Color(0xFF1C1B1F),
onSurface = Color(0xFF1C1B1F),
*/
)
@Composable
fun HSMAppTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
// Dynamic color is available on Android 12+
dynamicColor: Boolean = true,
content: @Composable () -> Unit
) {
val colorScheme = when {
dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
val context = LocalContext.current
if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
}
darkTheme -> DarkColorScheme
else -> LightColorScheme
}
val view = LocalView.current
if (!view.isInEditMode) {
SideEffect {
val window = (view.context as Activity).window
window.statusBarColor = colorScheme.primary.toArgb()
WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
}
}
MaterialTheme(
colorScheme = colorScheme,
typography = Typography,
content = content
)
}
What should I change?
Mary Kuranchie is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.