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 ")
    }
}

image-20240121224944476