Tugas 2 PPB A

Nama: Muhamad Faiz Fernanda

NRP: 502521118

Kelas: PPB-A

---

Pada tugas minggu kedua, kami diminta membuat aplikasi sederhana menggunakan Jetpack Compose, yang menampilkan daftar sapaan (greeting) di mana setiap kontainer dapat diperluas (expand) secara individual.

---

Tampilan Aplikasi

---

Kode Program Lengkap

package com.example.basicscodelab

import android.content.res.Configuration.UI_MODE_NIGHT_YES
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.animation.animateContentSize
import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.spring
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons.Filled
import androidx.compose.material.icons.filled.ExpandLess
import androidx.compose.material.icons.filled.ExpandMore
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.basicscodelab.ui.theme.BasicsCodelabTheme

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

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

    Surface(modifier, color = MaterialTheme.colorScheme.background) {
        if (shouldShowOnboarding) {
            OnboardingScreen(onContinueClicked = { shouldShowOnboarding = false })
        } else {
            Greetings()
        }
    }
}

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

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

// Greeting
@Composable
private 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)
    }
}

// CardContent
@Composable
private fun CardContent(name: String) {
    var expanded by rememberSaveable { mutableStateOf(false) }

    Row(
        modifier = Modifier
            .padding(12.dp)
            .animateContentSize(
                animationSpec = spring(
                    dampingRatio = Spring.DampingRatioMediumBouncy,
                    stiffness = Spring.StiffnessLow
                )
            )
    ) {
        Column(
            modifier = Modifier
                .weight(1f)
                .padding(12.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.ExpandLess else Filled.ExpandMore,
                contentDescription = if (expanded) {
                    stringResource(R.string.show_less)
                } else {
                    stringResource(R.string.show_more)
                }
            )
        }
    }
}

// Previews
@Preview(showBackground = true, widthDp = 320, uiMode = UI_MODE_NIGHT_YES, name = "GreetingPreviewDark")
@Preview(showBackground = true, widthDp = 320)
@Composable
fun GreetingPreview() {
    BasicsCodelabTheme {
        Greetings()
    }
}

@Preview(showBackground = true, widthDp = 320, heightDp = 320)
@Composable
fun OnboardingPreview() {
    BasicsCodelabTheme {
        OnboardingScreen(onContinueClicked = {})
    }
}

@Preview
@Composable
fun MyAppPreview() {
    BasicsCodelabTheme {
        MyApp(Modifier.fillMaxSize())
    }
}

---

---

Penjelasan Aplikasi

Deskripsi Aplikasi: Aplikasi ini dibuat menggunakan Jetpack Compose untuk menampilkan daftar sapaan (greeting), di mana setiap item bisa diperluas (expand) dengan efek animasi yang halus. Aplikasi ini terdiri dari beberapa komponen utama yang saling berhubungan.

MainActivity: Bertindak sebagai titik awal aplikasi. Menggunakan setContent untuk mengatur tema BasicsCodelabTheme dan memanggil fungsi MyApp(). Dengan penggunaan Modifier.fillMaxSize(), aplikasi bisa mengisi seluruh layar perangkat.

MyApp – Pengelolaan Layar Sambutan: Fungsi ini menentukan apakah aplikasi akan menampilkan layar sambutan (OnboardingScreen) atau langsung ke daftar sapaan. Menggunakan rememberSaveable { mutableStateOf(true) } untuk menyimpan status walaupun terjadi perubahan orientasi perangkat.

OnboardingScreen: Menampilkan pesan "Welcome to the Basics Codelab!" di tengah layar menggunakan Column yang diatur agar elemen berada di tengah vertikal maupun horizontal. Terdapat tombol "Continue" untuk beralih ke daftar sapaan.

Greetings – Daftar Menggunakan LazyColumn: Menggunakan LazyColumn untuk menampilkan daftar 1000 sapaan. Setiap item dihasilkan dengan List(1000) { "$it" } dan ditampilkan melalui fungsi Greeting().

Greeting – Menampilkan Setiap Sapaan dalam Card: Setiap sapaan dibungkus dalam komponen Card dengan warna utama dari tema Material3. Setiap kartu memiliki padding dan memanggil fungsi CardContent().

CardContent – Efek Animasi Ekspansi: Mengelola ekspansi konten menggunakan animateContentSize() dari Compose Animation. Status ekspansi dikontrol dengan rememberSaveable. Ketika tombol panah ditekan, teks tambahan akan muncul atau menghilang dengan efek animasi.

Preview Functions: Beberapa fungsi @Preview disediakan untuk melihat tampilan aplikasi tanpa harus menjalankannya di emulator, termasuk preview untuk OnboardingScreen, Greetings dalam mode terang dan gelap, serta keseluruhan aplikasi lewat MyAppPreview.

Kesimpulan: Aplikasi ini menggabungkan berbagai fitur Jetpack Compose seperti LazyColumn, Card, animasi ekspansi, dan theming Material3 untuk memberikan pengalaman interaktif yang menarik. Dengan adanya fungsi rememberSaveable dan @Preview, pengelolaan state dan pengujian UI menjadi lebih mudah dan efisien.

Source : developer.android.com/codelabs/basic-android-kotlin-compose-text-composables
Vidio Demo :