When I use the following code, the Text inside Scaffold is white (I can barely see it) in the debugging device (Xiaomi Pocophone F1). The weird thing is when I rotate the phone the text becomes black like it shoud be. The button I have added calls another activity which is a default and simple hello world. If I press the button and go the the second activity and then go back, the text is fine. The third time that I go back and forth, the text breaks again and there is nothing to make it black again.
package com.test.pricejournal
import android.app.Activity
import android.content.Intent
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedButton
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.rememberTopAppBarState
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.nestedscroll.nestedScroll
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.test.pricejournal.ui.theme.PriceJournalTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
MainUI()
}
}
private fun navigateToSecondActivity() {
val intent = Intent(this, AddShopActivity::class.java)
startActivity(intent)
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MainUI() {
val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior(rememberTopAppBarState())
Scaffold(
modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
topBar = {
CenterAlignedTopAppBar(
colors = TopAppBarDefaults.topAppBarColors(
containerColor = MaterialTheme.colorScheme.primaryContainer,
titleContentColor = MaterialTheme.colorScheme.primary,
),
title = {
Text(
"Price Journal",
maxLines = 1,
overflow = TextOverflow.Ellipsis
)
},
/*navigationIcon = {
IconButton(onClick = { /* do something */ }) {
Icon(
imageVector = Icons.Filled.ArrowBack,
contentDescription = "Localized description"
)
}
},
actions = {
IconButton(onClick = { /* do something */ }) {
Icon(
imageVector = Icons.Filled.Menu,
contentDescription = "Localized description"
)
}
},*/
scrollBehavior = scrollBehavior,
)
},
) { innerPadding ->
Column(
modifier = Modifier
.padding(innerPadding),
verticalArrangement = Arrangement.spacedBy(16.dp),
) {
Text(
color = Color.Black,
modifier = Modifier.padding(8.dp),
text =
"""
This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button.
It also contains some basic inner content, such as this text.
""".trimIndent()
)
OutlinedButton(
onClick = { navigateToSecondActivity() },
modifier = Modifier.padding(8.dp)
) {
Text("Add Shop")
}
}
}
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MainUI()
}
}
I have a thought that it may be the use of ExperimentalMaterial3Api but I cannot be sure.
The device’s API is 29 (Android 10.0).
Thank you in advance.