androidkotlinuser-interfaceandroid-jetpack-compose

compose.material3 TopAppBar has a color transition effect when switching between light and dark mode


        topBar = {
        TopAppBar(
            title = { Text("Norm Calculator") },
            actions = {
                IconButton(onClick = onThemeToggle) {
                    Icon(
                        imageVector = if (isDarkMode) Icons.Default.WbSunny else Icons.Default.NightsStay,
                        contentDescription = "Toggle Theme"
                    )
                }
            }
        )
    }

This is the way im using the TopAppBar, it is the only control that fades to the color and it looks extremely jank; enter image description here

I have tried specifying colors but that made no difference


Solution

  • Defined my own TopBar like this:

    fun CompactTopAppBar(
        title: String,
        isDarkMode: Boolean,
        currentLang: String,
        onThemeToggle: () -> Unit,
        onLangToggle: () -> Unit
    ) {
        Surface(
            modifier = Modifier.fillMaxWidth()
        ) {
            Row(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(24.dp)
                    .padding(horizontal = 12.dp),
                verticalAlignment = Alignment.CenterVertically,
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Text(
                    text = title,
                    style = MaterialTheme.typography.titleLarge.copy(fontSize = 24.sp),
                    color = MaterialTheme.colorScheme.onSurface
                )
    
                Row(verticalAlignment = Alignment.CenterVertically) {
                    IconButton(
                        onClick = onThemeToggle,
                        modifier = Modifier.size(24.dp)
                    ) {
                        Icon(
                            imageVector = if (isDarkMode) Icons.Default.WbSunny else Icons.Default.NightsStay,
                            contentDescription = stringResource(R.string.toggle_theme),
                            modifier = Modifier.size(20.dp)
                        )
                    }
    
                    TextButton(
                        onClick = onLangToggle,
                        contentPadding = PaddingValues()
                    ) {
                        Text(
                            text = if (currentLang == "en") "SI" else "EN",
                            style = MaterialTheme.typography.labelLarge.copy(fontSize = 18.sp),
                            color = MaterialTheme.colorScheme.onSurface
                        )
                    }
                }
            }
        }
    }
    

    It works well enough for me without any color transitions/crossfades