Tugas 2 (Membuat Aplikasi Sederhana dengan Jetpack Compose)

 Membuat Aplikasi Sederhana dengan Jetpack Compose

    Dalam pertemuan ke-2, diberikan tugas untuk mencoba untuk melakukan instalasi pada aplikasi Android Studio dan mencoba untuk membuat aplikasi sederhana berdasarkan Tutorial Jetpack Compose. Lalu, dilakukan modifikasi terhadap tampilan dan font. Pertama, diberikan tugas untuk membuat "Hello Word"

Hello Word

Selanjutnya, dilakukan pengembangan dengan membuat aplikasi yang sederhana sebagai berikut

Aplikasi Sederhana

Langkah terakhir, dilakukan modifikasi terhadap tampilan dan font sesuai keinginan

Modifikasi Aplikasi Sederhana

Adapun beberapa hal dalam modifikasi yang saya lakukan adalah sebagai berikut :

• Penggantian warna agar lebih menarik

• Menggunakan Font yang lebih bagus agar relevan dengan zaman

• Memperbarui tampilan UI agar lebih relevan dengan zaman

Readable Source Code 

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

• Entry point aplikasi.

• setContent memanggil MyApp() yang membungkus semua tampilan dengan tema BasicsCodelabTheme.

fun MyApp(modifier: Modifier = Modifier) {

    var shouldShowOnboarding by rememberSaveable { mutableStateOf(true) }

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

• Menampilkan OnboardingScreen jika shouldShowOnboarding == true.

• Setelah klik "Next", akan berpindah ke tampilan daftar kartu Greetings().

fun OnboardingScreen(
    onContinueClicked: () -> Unit,
    modifier: Modifier = Modifier
) {
    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(24.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "Halo, aku zidan",
            fontSize = 26.sp, // Headline lebih besar
            fontWeight = FontWeight.Bold,
            color = Color(0xFF37474F) // Warna elegan: Abu kebiruan
        )

        Spacer(modifier = Modifier.height(32.dp)) // Spasi lebih nyaman

        Button(
            modifier = Modifier
                .padding(horizontal = 24.dp)
                .height(56.dp), // Tombol lebih tinggi untuk tampilan premium
            onClick = onContinueClicked,
            colors = ButtonDefaults.buttonColors(
                containerColor = Color(0xFF607D8B), // Soft Blue-Gray
                contentColor = Color.White
            )
        ) {
            Text(
                text = "Next",
                fontSize = 20.sp, // Lebih besar & lebih nyaman
                fontWeight = FontWeight.Medium
            )
        }
    }
}

• Tampilan sambutan awal.

• Setelah tombol ditekan, akan memanggil onContinueClicked, yang membuat shouldShowOnboarding = false.

fun Greetings(
    modifier: Modifier = Modifier,
    names: List<String> = List(1000) { "$it" } // Lebih deskriptif
) {
    LazyColumn(
        modifier = modifier.padding(vertical = 8.dp)
    ) {
        items(items = names) { name ->
            Greeting(name = name)
        }
    }
}

• Menampilkan daftar 1000 kartu menggunakan LazyColumn (mirip RecyclerView).

• Tiap item di-render oleh Greeting().

fun Greeting(name: String, modifier: Modifier = Modifier) {
    Card(
        colors = CardDefaults.cardColors(
            containerColor = Color(0xFFF5F5F5) // Abu-abu lembut
        ),
        shape = MaterialTheme.shapes.medium, // Bentuk lebih smooth
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp), // Bayangan halus
        modifier = modifier.padding(vertical = 8.dp, horizontal = 16.dp)
    ) {
        CardContent(name)
    }
}

• Membungkus konten dalam sebuah Card dengan padding dan elevation.

• Memanggil CardContent() untuk mengatur isi tiap kartu.

fun CardContent(name: String) {
    var expanded by rememberSaveable { mutableStateOf(false) }

    Row(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth()
            .animateContentSize()
    ) {
        Column(
            modifier = Modifier
                .weight(1f)
                .padding(end = 8.dp) // Jarak agar tidak terlalu rapat
        ) {
            Text(
                text = "Belajar Kotlin,",
                fontSize = 18.sp,
                fontWeight = FontWeight.Medium,
                color = Color(0xFF455A64) // Warna abu kebiruan
            )
            Text(
                text = name,
                fontSize = 22.sp,
                fontWeight = FontWeight.Bold,
                color = Color(0xFF1E88E5) // Biru elegan
            )
            if (expanded) {
                Text(
                    text = ("Masih belajar! \n Ampun puh Sepuh ")
                        .repeat(2), // Tidak terlalu panjang
                    fontSize = 16.sp,
                    color = Color(0xFF616161), // Abu-abu gelap untuk readability
                    modifier = Modifier.padding(top = 8.dp)
                )
            }
        }
        IconButton(
            onClick = { expanded = !expanded },
            modifier = Modifier.align(Alignment.CenterVertically)
        ) {
            Icon(
                imageVector = if (expanded) Icons.Filled.ExpandLess else Icons.Filled.ExpandMore,
                contentDescription = if (expanded) "Show Less" else "Show More",
                tint = Color(0xFF1E88E5) // Ikon lebih kontras
            )
        }
    }
}

• Konten tiap kartu memiliki 2 baris utama: Kalimat "Belajar Kotlin" dan Angka dari name

• Jika diklik (expand), menampilkan kalimat tambahan.

• Tombol ikon untuk expand/collapse.

fun MyAppPreview() {
    BasicsCodelabTheme {
        MyApp(Modifier.fillMaxSize())
    }
}

• Ada beberapa fungsi @Preview untuk melihat tampilan di Android Studio tanpa menjalankan aplikasi.

• Preview onboarding dan greetings (juga dalam mode dark).

Code dari tugas kali ini :

Code Aplikasi Sederhana dengan Jetpack Compose

Sekian hasil pekerjaan saya, semoga dapat memberikan ilmu dan pengetahuan baru, baik dari saya dan teman teman 😊

Video Presentasi

Referensi

https://kuliahppb.blogspot.com/2024/03/android-1-jetpack-compose.html

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