Implementasi Card pada Jetpack Compose Menggunakan Annotation dan Text Element

Nama : Iftala Zahri Sukmana

NRP : 5025221002

Kelas : G

Jetpack Compose adalah toolkit modern untuk membangun antarmuka pengguna (UI) native di Android. Dirilis oleh Google sebagai pengganti dari sistem UI tradisional berbasis XML, Compose menggunakan pendekatan deklaratif dan reaktif yang menjadikan pengembangan UI lebih efisien dan intuitif. Dalam artikel ini, kita akan membahas konsep-konsep dasar Jetpack Compose seperti annotation, composable function, preview, dan komponen text element berdasarkan contoh kode yang telah disediakan.

Apa itu Jetpack Compose?

Jetpack Compose adalah framework UI yang sepenuhnya menggunakan Kotlin untuk membangun antarmuka pengguna Android. Berbeda dengan pendekatan tradisional yang memisahkan layout XML dan logika Java/Kotlin, Compose memungkinkan pengembang untuk mendefinisikan UI dan logikanya dalam satu bahasa pemrograman, yaitu Kotlin.

Compose menggunakan pendekatan deklaratif di mana kita mendefinisikan "apa" yang harus ditampilkan, bukan "bagaimana" untuk membuatnya. Framework ini akan menangani rendering dan pembaruan UI secara otomatis ketika data yang mendasari berubah.

Annotation dalam Jetpack Compose

Annotation adalah metadata yang ditambahkan ke kode untuk memberikan informasi tambahan kepada kompiler. Dalam Jetpack Compose, annotation memainkan peran penting dalam mengidentifikasi fungsi-fungsi khusus. Mari kita lihat beberapa annotation penting:

@Composable

Annotation @Composable adalah yang paling fundamental dalam Jetpack Compose. Annotation ini menandai fungsi yang dapat menghasilkan UI dan dapat dipanggil oleh fungsi Compose lainnya. Fungsi yang ditandai dengan @Composable tidak mengembalikan nilai (void) tetapi menghasilkan UI.

Contoh dari kode yang diberikan:

@Composable
fun MainScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        GreetingCard(name = "Iftala")
    }
}

Fungsi MainScreen() adalah composable yang berisi elemen Column dan memanggil composable lain bernama GreetingCard().

@Preview

Annotation @Preview memungkinkan kita untuk melihat pratinjau UI dalam Android Studio tanpa harus menjalankan aplikasi di emulator atau perangkat fisik. Ini sangat berguna untuk pengembangan UI yang cepat dan iteratif.

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    PPBBasicTheme {
        MainScreen()
    }
}

Dalam contoh di atas, DefaultPreview() akan menampilkan pratinjau dari MainScreen() dengan tema PPBBasicTheme. Parameter showBackground = true menunjukkan bahwa latar belakang akan ditampilkan dalam pratinjau.

Parameter Annotation

Annotation juga dapat menerima parameter untuk menyesuaikan perilakunya. Seperti yang kita lihat pada @Preview(showBackground = true), parameter showBackground disetel ke true untuk menampilkan latar belakang dalam pratinjau.

Parameter lain yang sering digunakan dengan @Preview termasuk:

widthDp dan heightDp: Menentukan lebar dan tinggi pratinjau dalam dp
name: Memberikan nama pratinjau
showSystemUi: Menampilkan elemen UI sistem seperti status bar dan navigation bar

Composable Function

Fungsi Composable adalah blok bangunan utama dalam Jetpack Compose. Fungsi-fungsi ini memiliki beberapa karakteristik penting:

Deklaratif: Mendefinisikan UI berdasarkan keadaan saat ini, bukan langkah-langkah untuk mencapai tampilan tertentu.
Rekomposisi: Secara otomatis dijalankan ulang (recompose) ketika data yang mereka gunakan berubah.
Stateless: Secara default, composable tidak menyimpan state.

Mari kita lihat contoh dari kode yang diberikan:

@Composable
fun GreetingCard(name: String) {
    Card(
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth(),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(
                text = "Happy Birthday, $name!",
                style = MaterialTheme.typography.titleLarge,
                textAlign = TextAlign.Left,
                modifier = Modifier.fillMaxWidth()
            )
            Spacer(modifier = Modifier.height(8.dp))
            Text(
                text = "From PPB G",
                style = MaterialTheme.typography.bodyMedium,
                textAlign = TextAlign.Left,
                modifier = Modifier.fillMaxWidth()
            )
        }
    }
}

Fungsi GreetingCard() adalah composable yang menerima parameter name. Fungsi ini mendefinisikan sebuah Card yang berisi Column dengan dua Text dan satu Spacer.

Text Element

Text adalah salah satu komponen dasar dalam Jetpack Compose yang digunakan untuk menampilkan teks. Dari contoh kode di atas, kita dapat melihat dua penggunaan komponen Text:

Text(
    text = "Happy Birthday, $name!",
    style = MaterialTheme.typography.titleLarge,
    textAlign = TextAlign.Left,
    modifier = Modifier.fillMaxWidth()
)
Spacer(modifier = Modifier.height(8.dp))
Text(
    text = "From PPB G",
    style = MaterialTheme.typography.bodyMedium,
    textAlign = TextAlign.Left,
    modifier = Modifier.fillMaxWidth()
)

Komponen Text memiliki beberapa parameter penting:

text: Teks yang akan ditampilkan
style: Gaya teks (ukuran, font, dll.)
textAlign: Perataan teks (kiri, tengah, kanan)
modifier: Untuk mengubah tampilan dan perilaku komponen

Theming di Jetpack Compose

Theming adalah cara untuk memberikan gaya konsisten ke seluruh aplikasi. Dari kode theme.kt yang diberikan, kita dapat melihat cara mendefinisikan tema terang dan gelap:

private val LightColors = lightColorScheme(
    primary = Color(0xFF6200EE),
    onPrimary = Color.White,
    secondary = Color(0xFF03DAC5),
    onSecondary = Color.Black,
    background = Color.White,
    onBackground = Color.Black,
    surface = Color.White,
    onSurface = Color.Black
)
private val DarkColors = darkColorScheme(
    primary = Color(0xFFBB86FC),
    onPrimary = Color.Black,
    secondary = Color(0xFF03DAC5),  
    onSecondary = Color.Black,
    background = Color(0xFF121212),
    onBackground = Color.White,
    surface = Color(0xFF121212),
    onSurface = Color.White
)

Fungsi PPBBasicTheme menggunakan tema terang atau gelap berdasarkan preferensi sistem:

@Composable
fun PPBBasicTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColors
    } else {
        LightColors
    }
    MaterialTheme(
        colorScheme = colors,
        content = content
    )
}

Parameter content dalam fungsi PPBBasicTheme adalah contoh parameter bertipe @Composable () -> Unit, yang berarti fungsi ini menerima fungsi composable lain sebagai parameter.

Struktur Aplikasi Jetpack Compose

Dari MainActivity.kt, kita dapat melihat struktur dasar aplikasi Compose:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            PPBBasicTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    MainScreen()
                }
            }
        }
    }
}

Fungsi setContent menetapkan konten UI untuk aktivitas. Konten ini dibungkus dalam PPBBasicTheme untuk menerapkan tema aplikasi dan Surface untuk memberikan latar belakang. Kemudian, MainScreen() dipanggil untuk mendefinisikan tata letak utama aplikasi.

Kesimpulan

Jetpack Compose menawarkan pendekatan baru dalam pengembangan UI Android yang lebih intuitif dan efisien. Dengan memahami konsep dasar seperti annotation, composable function, preview, dan text element, kita dapat mulai membangun aplikasi Android modern dengan Compose.

Contoh kode yang telah dibahas menunjukkan cara membuat tampilan kartu ucapan sederhana dengan Jetpack Compose. Tentu saja, ini hanya permulaan; Compose menawarkan banyak komponen dan fitur lainnya yang dapat digunakan untuk membangun aplikasi Android yang lebih kompleks dan menarik.

Cari Blog Ini

Iftala Zahri Sukmana