Tugas 2 PPB A - Membuat Program Hello Android dengan Jetpack Compose

Dokumentasi Aplikasi Hello Android

Aplikasi Hello Android adalah aplikasi sederhana yang dibangun menggunakan Jetpack Compose untuk mendemonstrasikan konsep dasar pengembangan UI Android modern. Aplikasi ini menampilkan layar onboarding dan daftar kartu salam yang dapat diperluas dengan animasi yang halus.

Arsitektur Aplikasi

1. MainActivity

Fungsi:

Titik masuk utama aplikasi yang menginisialisasi UI dan mengatur tema aplikasi.

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

Fitur Utama:

Menggunakan setContent untuk menentukan UI dengan Jetpack Compose
Menerapkan tema BasicsCodelabTheme
Memanggil komponen MyApp sebagai root composable

2. MyApp

Fungsi:

Composable utama yang mengatur navigasi antar layar dan mengelola status aplikasi.

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

Fitur Utama:

Menggunakan rememberSaveable untuk menyimpan status onboarding
Navigasi sederhana antara layar onboarding dan layar utama
Menerapkan warna latar belakang tema

3. OnboardingScreen

Fungsi:

Layar pembuka aplikasi yang menampilkan pesan selamat datang dan tombol untuk melanjutkan ke layar utama.

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

Fitur Utama:

Layout vertikal dengan elemen di tengah layar
Callback function untuk handle klik tombol
Desain minimal dan fokus pada call-to-action

4. Greetings

Fungsi:

Menampilkan daftar kartu salam menggunakan LazyColumn untuk menampilkan 1000 item secara efisien.

@Composable
private fun Greetings(
    modifier: Modifier = Modifier,
    names: List = List(1000) { "$it" }
) {
    LazyColumn(modifier = modifier.padding(vertical = 4.dp)) {
        items(items = names) { name ->
            Greeting(name = name)
        }
    }
}

Fitur Utama:

Menggunakan LazyColumn untuk performa optimal
Membuat 1000 item secara programatis
Efficient memory management untuk daftar besar

5. Greeting

Fungsi:

Menampilkan item individual dalam daftar dengan membungkus setiap item menggunakan komponen Card.

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

6. CardContent

Fungsi:

Mengelola konten dan interaksi dalam kartu. Komponen yang menangani tampilan teks dan fitur expand/collapse.

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

Fitur Utama:

State management untuk expand/collapse functionality
Smooth animation dengan animateContentSize
Accessibility support dengan content description
Responsive layout dengan weight modifier

Fitur Aplikasi

Onboarding Flow

Layar pembuka yang user-friendly dengan transisi yang smooth ke layar utama dan persistent state management.

Expandable List

Daftar 1000 item dengan performa optimal, fitur expand/collapse untuk setiap item, dan animasi yang halus dan responsif.

Material Design

Konsisten dengan Material Design guidelines, menggunakan tema dan warna yang sesuai dengan accessibility features terintegrasi.

Teknologi yang Digunakan

Jetpack Compose Material Design 3 Kotlin State Management Compose Animations

Catatan Implementasi

Performa

Menggunakan LazyColumn untuk menangani daftar besar secara efisien
State management yang tepat untuk menghindari recomposition yang tidak perlu

Accessibility

Content description untuk semua elemen interaktif
Struktur layout yang semantic dan mudah diakses

Potential Improvements

Pastikan resource strings sudah didefinisikan di strings.xml
Tambahkan error handling untuk edge cases
Implementasi loading states untuk better UX

Cari Blog Ini

Tigo Yoga - PPB