Android Day 3 Customize the Display
package com.williamjiamin.greetingsfromwilliam
import android.os.Bundle
import android.view.View
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.ButtonDefaults.elevatedButtonColors
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.material3.ElevatedButton
import androidx.compose.ui.Alignment
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.tooling.preview.Preview
import com.williamjiamin.greetingsfromwilliam.ui.theme.GreetingsFromWilliamTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
GreetingsFromWilliamTheme {
MyWholeApp(modifier = Modifier.fillMaxSize())
}
}
}
}
@Composable
fun MyWholeApp(modifier: Modifier = Modifier,
names: List<String> = listOf("William Jiamin", "Mary", "Chen", "Jack", "Lilly")) {
val statusBarHeight = getStatusBarHeight().dp
val customBackgroundColor = Color(android.graphics.Color.parseColor("#FFF78A"))
Box(modifier = Modifier
.fillMaxSize()
.background(customBackgroundColor)
.padding(top = statusBarHeight) // Add padding here
) {
Column(modifier = modifier.padding(8.dp)) {
for (name in names) {
Greeting(name = name)
}
}
}
}
// Function to get the status bar height
@Composable
fun getStatusBarHeight(): Int {
val configuration = LocalConfiguration.current
val density = LocalDensity.current.density
val resourceId = configuration.screenHeightDp
return if (resourceId > 0) {
(32 * density).toInt()
} else 0
}
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
val changed = remember { mutableStateOf(false) }
val changedPadding = if (changed.value) 64.dp else 8.dp
val buttonCustomBackgroundColor = if (changed.value) Color(android.graphics.Color.parseColor("#D9EDBF")) else Color(android.graphics.Color.parseColor("#FFC47E"))
val buttonCustomTextColor = Color.Black
Surface(
color = if (changed.value) Color.White else Color(android.graphics.Color.parseColor("#FFE382")),
shape = RoundedCornerShape(48.dp),
modifier = modifier.padding(8.dp)
) {
Column(modifier = Modifier.fillMaxWidth()) {
Text(
text = if (changed.value) "Welcome to $name's channel!" else "Thanks for watching $name's video!",
modifier = Modifier.padding(start = 16.dp, end = 16.dp, bottom = changedPadding, top = 16.dp),
)
ElevatedButton(
onClick = { changed.value = !changed.value },
modifier = Modifier.align(Alignment.CenterHorizontally),
colors = elevatedButtonColors(
containerColor = buttonCustomBackgroundColor,
contentColor = buttonCustomTextColor
)
) {
Text(if (changed.value) "Checked!" else "Check It Out!")
}
}
}
}
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
GreetingsFromWilliamTheme {
Greeting("William Jiamin's ")
}
}