Tugas 2 PPB-A Dasar Jetpack Compose

         

Nama : Danar Sodik Priyambodo

NRP : 5025211145

PBKK-A

    Pada Tugas minggu kedua, kita diberikan contoh untuk membuat suatu aplikasi sederhana menggunakan Jetpack Compose yang dapat melakukan greeting dan dapat di expand dari masing masing containernya.

    Menggunakan beberapa fungsi yang diperlukan untuk menampilkan dan memberikan experience animasi yang bagus pada kode ini:

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.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
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.Button
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
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

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


@Preview(showBackground = true, widthDp = 320, heightDp = 320)
@Composable
fun OnboardingPreview() {
    BasicsCodelabTheme {
        OnboardingScreen(onContinueClicked = {}) // Do nothing on click.
    }
}

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


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

    Kode ini merupakan aplikasi Android berbasis Jetpack Compose yang menampilkan daftar sapaan dengan animasi ekspansi untuk setiap item. Aplikasi ini terdiri dari beberapa bagian utama, yaitu MainActivity sebagai titik masuk utama, MyApp untuk mengelola tampilan utama, OnboardingScreen sebagai layar sambutan pertama kali, Greetings yang menampilkan daftar sapaan dalam LazyColumn, Greeting yang membungkus setiap item dalam Card, serta CardContent yang menangani animasi ekspansi pada setiap sapaan. Selain itu, terdapat fungsi Preview untuk menampilkan pratinjau tampilan di Android Studio.

MainActivity

Kelas MainActivity berfungsi sebagai titik awal aplikasi dengan memanggil setContent, yang akan menampilkan tema Material3 menggunakan BasicsCodelabTheme. Di dalamnya, MyApp() dipanggil untuk menentukan apakah pengguna akan melihat OnboardingScreen atau langsung ke daftar sapaan. Dengan menerapkan Modifier.fillMaxSize(), tampilan dapat memenuhi layar perangkat.

MyApp – Mengelola Layar Onboarding

Fungsi MyApp bertanggung jawab untuk menampilkan OnboardingScreen terlebih dahulu menggunakan rememberSaveable { mutableStateOf(true) } agar statusnya tetap tersimpan meskipun orientasi berubah. Jika pengguna menekan tombol Continue, nilai shouldShowOnboarding akan berubah menjadi false, sehingga aplikasi beralih ke daftar sapaan yang dikelola oleh Greetings().

OnboardingScreen

OnboardingScreen menampilkan teks sambutan "Welcome to the Basics Codelab!" di tengah layar dengan Column, yang diatur dengan Arrangement.Center agar elemen berada di tengah secara vertikal dan Alignment.CenterHorizontally agar sejajar secara horizontal. Ada tombol Continue yang akan memicu fungsi onContinueClicked, yang pada akhirnya mengganti tampilan ke daftar sapaan.

Greetings – Daftar dengan LazyColumn

Fungsi Greetings digunakan untuk menampilkan daftar sapaan dalam LazyColumn, yang memungkinkan daftar yang besar ditampilkan secara efisien. Data yang digunakan adalah 1000 elemen yang dibuat dengan List(1000) { "$it" }. Setiap item dalam daftar diproses oleh fungsi Greeting(), yang membungkusnya dalam sebuah kartu.

Greeting – Setiap Item dalam Card

Setiap item dalam daftar ditampilkan menggunakan Card, yang diwarnai dengan warna utama dari MaterialTheme.colorScheme.primary. Kartu ini memiliki padding di setiap sisi agar tampilannya lebih rapi. Kartu tersebut memanggil CardContent() yang mengelola teks sapaan dan tombol ekspansi.

CardContent – Animasi Ekspansi

Fungsi CardContent menangani animasi ekspansi menggunakan animateContentSize(), yang memberikan efek transisi saat kartu diperbesar atau diperkecil. Variabel expanded dikelola menggunakan rememberSaveable { mutableStateOf(false) }, sehingga saat ikon tombol ditekan, elemen teks tambahan akan muncul atau menghilang. Ikon panah (ExpandMore dan ExpandLess) digunakan untuk menunjukkan apakah konten telah diperluas atau belum.

Preview Functions

Fungsi pratinjau (@Preview) memungkinkan tampilan diuji di Android Studio tanpa harus menjalankan aplikasi di emulator. OnboardingPreview() menampilkan tampilan awal, GreetingPreview() memperlihatkan daftar sapaan dalam mode terang dan gelap (uiMode = UI_MODE_NIGHT_YES), serta MyAppPreview() untuk melihat keseluruhan tampilan aplikasi dalam mode interaktif.

    Aplikasi ini dirancang untuk menampilkan daftar sapaan dengan pengalaman interaktif yang lebih baik menggunakan Jetpack Compose, seperti LazyColumn, Card, Material3 Theming, dan animasi ekspansi. Dengan adanya OnboardingScreen, pengalaman pengguna menjadi lebih menarik karena diberikan perkenalan sebelum masuk ke daftar sapaan. Implementasi rememberSaveable memastikan status tetap terjaga meskipun terjadi perubahan orientasi, dan pratinjau membantu pengembang menguji UI dengan cepat.

source: Jetpack Compose

Video Demo: