Tugas 2 PPB A 2025 - Aplikasi Sederhana Jetpack Compose
Nama : Rayhan Arvianta Bayuputra
NRP : 5025211217
Kelas : PPB A
TA : 2024 (Genap)
Aplikasi Hello Sederhana dengan Jetpack Compose
Pada pertemuan kali ini, kami membuat sebuah aplikasi sederhana yang mencakup dasar-dasr Jetpack Compose.
Aplikasi sederhana ini dibangun dengan mengikuti tutorial dasar Jetpack Compose yang dapat diakses di https://developer.android.com/codelabs/jetpack-compose-basics#0. Berikut adalah cuplikan kode dari aplikasi sederhana 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, 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)
}
)
}
}
}
@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())
}
}
Package dan Impor Library
Kode ini dimulai dengan deklarasi package com.example.basicscodelab, yang menentukan namespace aplikasi. Setelah itu, ada berbagai impor library Jetpack Compose yang digunakan untuk membangun UI aplikasi. Library yang digunakan mencakup:
- MaterialTheme untuk menerapkan desain Material 3.
- LazyColumn untuk menampilkan daftar secara efisien.
- Card, Button, dan Icon untuk elemen UI yang lebih interaktif.
- Spring Animation untuk membuat animasi ketika kartu diperbesar atau diperkecil.
- Preview untuk melihat tampilan UI langsung di Android Studio tanpa menjalankan emulator.
Kelas MainActivity (Komponen Utama Aplikasi)
Kelas MainActivity adalah pintu masuk utama aplikasi, yang merupakan turunan dari ComponentActivity. Di dalamnya, metode onCreate() digunakan untuk menginisialisasi tampilan aplikasi dengan setContent {} yang memanfaatkan Jetpack Compose.
Di dalamnya, terdapat fungsi BasicsCodelabTheme {} yang menerapkan tema aplikasi. Fungsi MyApp() kemudian dipanggil untuk menangani logika utama aplikasi, seperti menentukan apakah tampilan onboarding screen masih perlu ditampilkan atau tidak.
Fungsi MyApp()
Fungsi MyApp() bertanggung jawab untuk menentukan apakah pengguna masih berada di layar onboarding atau sudah masuk ke tampilan utama. Variabel shouldShowOnboarding digunakan untuk menyimpan status apakah onboarding masih ditampilkan atau tidak. Variabel ini menggunakan rememberSaveable { mutableStateOf(true) }, sehingga jika pengguna menutup dan membuka kembali aplikasi, statusnya tetap tersimpan. Jika shouldShowOnboarding bernilai true, maka fungsi OnboardingScreen() akan ditampilkan. Jika tidak, maka daftar nama dari fungsi Greetings() akan muncul.
Fungsi OnboardingScreen()
Fungsi OnboardingScreen() digunakan untuk menampilkan layar awal (onboarding) kepada pengguna sebelum masuk ke tampilan utama. Di dalamnya, Column digunakan untuk menyusun elemen UI secara vertikal. Teks sambutan "Welcome to the Basics Codelab!" ditampilkan di tengah layar, diikuti dengan tombol "Continue". Saat tombol ditekan, fungsi onContinueClicked() akan dijalankan, yang akan mengubah nilai shouldShowOnboarding menjadi false, sehingga tampilan akan berganti ke daftar nama.
Fungsi Greetings()
Fungsi Greetings() menampilkan daftar nama menggunakan LazyColumn. Di dalamnya, daftar nama dibuat menggunakan List(1000) { "$it" }, yang menghasilkan daftar angka dari 0 hingga 999 dalam bentuk string. Daftar ini kemudian ditampilkan sebagai kartu-kartu individual menggunakan fungsi Greeting(). Penggunaan LazyColumn memastikan bahwa hanya elemen yang terlihat di layar yang dirender, sehingga aplikasi tetap efisien meskipun menampilkan ribuan item.
Fungsi Greeting()
Fungsi Greeting() bertugas untuk menampilkan setiap item dalam daftar sebagai sebuah kartu (Card). Setiap kartu memiliki warna latar belakang yang diambil dari MaterialTheme.colorScheme.primary. Selain itu, kartu ini memanggil fungsi CardContent(), yang menangani isi dari kartu, termasuk teks "Hello" dan nama yang ditampilkan.
Fungsi CardContent()
Fungsi CardContent() adalah bagian utama dari kartu, di mana setiap kartu memiliki kemampuan untuk diperbesar dan diperkecil menggunakan animasi ekspansi. Di dalamnya, variabel expanded digunakan untuk menyimpan status apakah kartu sedang diperbesar atau tidak. Ketika tombol ikon ditekan, nilai expanded akan berubah dan menentukan apakah teks tambahan harus ditampilkan.
Animasi diperhalus dengan animateContentSize() yang menggunakan efek spring animation untuk transisi yang lebih alami. Ikon tombol juga berubah berdasarkan status expanded, menggunakan Icons.Filled.ExpandMore atau Icons.Filled.ExpandLess untuk menampilkan ikon panah ke atas atau ke bawah.
Aplikasi ini memiliki beberapa fungsi @preview, yang memungkinkan pengembang untuk melihat tampilan aplikasi secara langsung di Android Studio tanpa perlu menjalankan emulator atau perangkat fisik.
- GreetingPreview() menampilkan daftar nama yang dihasilkan oleh fungsi
Greetings(). - OnboardingPrewview() menampilkan tampilan awal onboarding dengan tombol "Continue".
- MyAppPreview() menampilkan tampilan utama aplikasi, baik dalam kondisi onboarding aktif maupun sudah melewati onboarding.
Fungsi @preview juga mencakup mode gelap (UI_MODE_NIGHT_YES), sehingga pengembang dapat melihat bagaimana tampilan aplikasi berubah saat mode gelap diaktifkan.
Comments
Post a Comment