Tugas 2 PPB A Jetpack Compose

Nama : Dafarel Fatih Wirayudha
NRP : 5025211120
Kelas : PPB A

Aplikasi ini adalah contoh dasar dari Jetpack Compose yang menunjukkan cara membuat tampilan onboarding sederhana dan daftar salam (greeting list) dinamis dengan fitur ekspansi. Jetpack Compose adalah toolkit modern dari Android untuk membangun UI secara deklaratif menggunakan Kotlin.

Berikut adalah implementasi code dari aplikasi ini:

Struktur Utama:

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

MainActivity adalah titik masuk utama aplikasi. Fungsi setContent digunakan untuk mendefinisikan UI menggunakan Jetpack Compose, dengan menerapkan tema aplikasi dan memanggil fungsi MyApp.

Fungsi 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()
        }
    }
}

Fungsi ini menentukan logika tampilan antara layar onboarding dan daftar greetings. Variabel shouldShowOnboarding menyimpan apakah pengguna masih dalam tahap awal aplikasi. Setelah tombol "Continue" ditekan, variabel ini berubah dan daftar greeting ditampilkan.

Onboarding Screen:

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

Ini adalah tampilan awal yang menyapa pengguna. Menggunakan Column, Text, dan Button untuk menampilkan pesan sambutan dan tombol "Continue".

Daftar Greeting:

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

Menampilkan daftar 1000 salam dalam bentuk LazyColumn, yang memungkinkan scrolling efisien pada jumlah item besar. Setiap item menggunakan fungsi Greeting.

Fungsi Greeting dan CardContent:

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

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

Setiap nama ditampilkan dalam sebuah Card.
CardContent berisi logika untuk ekspansi konten tambahan.
Variabel expanded digunakan untuk menentukan apakah teks tambahan akan ditampilkan atau tidak. Efek animasi diberikan dengan animateContentSize().
Tombol ikon digunakan untuk memperluas atau menyembunyikan deskripsi tambahan. Ikon dan deskripsi berubah tergantung status ekspansi.

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

Video Demo: