Pertemuan 2 - Aplikasi Hello Android

Nama              : Al-Ferro Yudisthira Putra

NRP                : 5025211176

Kelas               : PPB - A

APLIKASI HELLO ANDROID

Pada tugas pertemuan 2, kami diminta untuk membuat sebuah aplikasi sederhana mengikuti referensi pada link berikut.

https://developer.android.com/codelabs/jetpack-compose-basics?hl=id#0

Terdapat beberapa fungsi yang dibangun untuk membuat aplikasi sederhana ini. Berikut penjelasan fungsi dan code yang digunakan untuk membangun aplikasi.

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

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

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

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

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

MainActivity

Kelas MainActivity merupakan titik masuk utama aplikasi Android ini. Di dalam onCreate, fungsi setContent digunakan untuk menentukan UI menggunakan Jetpack Compose. Tema BasicsCodelabTheme diterapkan, dan fungsi MyApp dipanggil dengan Modifier.fillMaxSize() agar mengisi seluruh layar perangkat.

MyApp

Fungsi MyApp adalah composable utama yang menentukan apakah layar onboarding (OnboardingScreen) atau daftar salam (Greetings) akan ditampilkan. Variabel shouldShowOnboarding menyimpan status apakah pengguna masih berada di layar onboarding. Jika nilai true, maka OnboardingScreen ditampilkan; jika false, maka Greetings ditampilkan.

OnboardingScreen

Fungsi OnboardingScreen menampilkan layar awal (onboarding) dengan pesan selamat datang dan tombol "Continue". Jika tombol ditekan, fungsi onContinueClicked dipanggil untuk mengubah status onboarding dan menampilkan layar berikutnya. Tampilan menggunakan Column agar elemen-elemen tersusun secara vertikal dan berada di tengah layar.

Greetings

Fungsi Greetings menampilkan daftar salam untuk 1000 nama dalam LazyColumn, yang memungkinkan daftar ditampilkan secara efisien tanpa membebani memori. Setiap item daftar diproses menggunakan fungsi Greeting.

Greeting

Fungsi Greeting menampilkan setiap item dalam daftar dengan menggunakan kartu (Card). Warna latar belakang kartu mengikuti warna tema utama aplikasi (MaterialTheme.colorScheme.primary). Komponen ini memiliki padding agar tampilannya lebih estetis.

CardContent

Fungsi CardContent menangani isi dari kartu di dalam Greeting. Variabel expanded digunakan untuk menentukan apakah teks tambahan akan ditampilkan. Jika pengguna menekan tombol expand/collapse (IconButton), nilai expanded akan beralih antara true dan false. Animasi perubahan ukuran diterapkan dengan animateContentSize, membuat transisi lebih halus.

IconButton dalam CardContent

Tombol ini memungkinkan pengguna untuk memperluas atau menyembunyikan teks tambahan. Ikon yang ditampilkan berubah antara Filled.ExpandLess (untuk menyembunyikan teks) dan Filled.ExpandMore (untuk menampilkan teks). Deskripsi ikon diperoleh dari stringResource, yang seharusnya mengambil nilai dari strings.xml. Jika ada error pada stringResource(R.string.show_more), pastikan string tersebut sudah didefinisikan.

Demonstrasi

Repository

https://github.com/YudisthiraPutra/PPB_Week2_Assignment