Jetpack Compose: Hello Android

Nama : Made Nanda Wija Vahindra

NRP : 5025211160

Kelas : PBB - A

Tugas 2: Membuat aplikasi Hello Android menggunakan Jetpack Compose

Dokumentasikan proyek Basics Codelab menggunakan Jetpack Compose, framework UI deklaratif untuk Android. Aplikasi ini menyajikan daftar Greetings dengan animasi expand serta layar Onboarding yang menyambut pengguna saat pertama kali membuka aplikasi.

Aplikasi ini terdiri dari beberapa komponen utama:

1. MainActivity – Titik masuk aplikasi

2. MyApp – Mengelola tampilan utama

3. OnboardingScreen – Layar penyambutan pengguna

4. Greetings – Daftar greeting dengan animasi ekspansi

5. Greeting – Komponen kartu yang menampilkan nama dengan teks animasi

6. CardContent – Konten dalam kartu yang dapat diperluas

7. Preview Functions – Untuk menampilkan tampilan dalam Android Studio

1. MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            BasicsCodelabTheme {
                MyApp(modifier = Modifier.fillMaxSize())
            }
        }
    }
}

Penjelasan:

• enableEdgeToEdge() memungkinkan UI merender hingga batas layar.

• setContent {} mengatur tampilan utama aplikasi dengan tema yang telah dibuat.

2. MyApp

@Composable
fun MyApp(modifier: Modifier = Modifier) {
    var shouldShowOnboarding by rememberSaveable { mutableStateOf(true) }

    Surface(modifier) {
        if (shouldShowOnboarding) {
            OnboardingScreen(onContinueClicked = { shouldShowOnboarding = false })
        } else {
            Greetings()
        }
    }
}

Penjelasan:

• Menampilkan OnboardingScreen pertama kali.

• Setelah tombol "Continue" ditekan, akan menampilkan daftar greeting.

3. OnboardingScreen

@Composable
fun OnboardingScreen(onContinueClicked: () -> Unit, modifier: Modifier = Modifier){
    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ){
        Text("Welcome to the Basics Codelab!")
        Button(
            modifier = Modifier.padding(vertical = 24.dp),
            onClick = onContinueClicked
        ){
            Text("Continue")
        }
    }
}

Penjelasan:

• Menampilkan teks "Welcome to the Basics Codelab!" dan tombol "Continue".

• Ketika tombol ditekan, aplikasi beralih ke daftar greeting.

4. Greetings

@Composable
private fun Greetings(
    modifier: Modifier = Modifier,
    names: List<String> = List(1000) { "$it" }
) {
    LazyColumn(modifier = modifier.padding(vertical = 4.dp)) {
        items(items = names) { name ->
            Greeting(name = name)
        }
    }
}

Penjelasan:

• Menggunakan LazyColumn untuk membuat daftar yang efisien.

• List(1000) { "$it" } membuat daftar 1000 angka sebagai nama.

5.Greeting

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.primary
        ),
        modifier = modifier.padding(vertical = 4.dp, horizontal = 8.dp)
    ){
        CardContent(name)
    }
}

Penjelasan:

• Card digunakan untuk menampilkan nama dalam bentuk kartu dengan padding.

• Warna latar belakang mengikuti skema warna utama.

• Memanggil CardContent(name) untuk mengelola konten kartu.

6. CardContent

@Composable
fun CardContent(name: String){
    var expanded by rememberSaveable {mutableStateOf(false)}
    
    Row(
        modifier = Modifier.padding(24.dp).animateContentSize(
            animationSpec = spring(
                dampingRatio = Spring.DampingRatioMediumBouncy,
                stiffness = Spring.StiffnessLow
            )
        )
    ) {
        Column(modifier = Modifier.weight(1f).padding(10.dp)) {
            Text(text = "Hello ")
            Text(text = name, style = MaterialTheme.typography.headlineMedium.copy(fontWeight = FontWeight.ExtraBold))
            if (expanded){
                Text(
                    text = ("Composem ipsum color sit lazy, padding theme elit, sed do bouncy. ").repeat(4),
                )
            }
        }
        IconButton(onClick = {expanded = !expanded}) {
            Icon(
                imageVector = if (expanded) Filled.KeyboardArrowUp else Filled.KeyboardArrowDown,
                contentDescription = if(expanded){
                    stringResource(R.string.show_less)
                }else{
                    stringResource(R.string.show_more)
                }
            )
        }
    }
}

Penjelasan:

• Row menampilkan teks dan tombol ikon dalam satu baris.

• animateContentSize menambahkan animasi saat konten diperluas.

• IconButton memungkinkan pengguna menampilkan lebih banyak teks.

Ini adalah implementasi dasar Jetpack Compose, yang menunjukkan bagaimana membangun UI dinamis dengan animasi, daftar efisien, dan pengelolaan state.

Referensi : https://developer.android.com/codelabs/jetpack-compose-basics

Link Github: https://github.com/NandaVahindra/PBB-A/tree/main/Tugas2/BasicsCodelab

Link youtube dokumentasi : 

---