Tugas 2: Membuat Aplikasi Hello World menggunakan Jetpack Compose

Nama: Ken Anargya Alkausar

NRP: 5025211168

Kelas: PPB - A

Tugas 2: Membuat Aplikasi Hello World menggunakan Jetpack Compose

Dalam proyek ini, kita akan membahas beberapa komponen utama yang digunakan dalam aplikasi Android yang dibangun dengan Jetpack Compose. Proyek ini bertujuan untuk memberikan pemahaman dasar tentang cara menggunakan Jetpack Compose untuk membuat antarmuka pengguna yang modern dan responsif.

1. MainActivity

MainActivity adalah titik masuk utama dari aplikasi Android. Di sinilah aplikasi dimulai dan diatur. Dalam konteks Jetpack Compose, MainActivity biasanya akan mengatur konten yang ditampilkan kepada pengguna dengan memanggil fungsi setContent untuk menampilkan tampilan yang dikelola oleh Compose.

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

2. MyApp

MyApp adalah fungsi yang mengelola tampilan utama aplikasi. Fungsi ini biasanya berfungsi sebagai pembungkus untuk tema dan navigasi aplikasi. Di dalamnya, Anda dapat mengatur tema dan elemen UI lainnya yang akan digunakan di seluruh aplikasi.

fun MyApp(modifier: Modifier = Modifier) {

    var shouldShowOnboarding by rememberSaveable { mutableStateOf(true) }

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

3. Onboarding Screen

OnboardingScreen adalah tampilan yang ditujukan untuk menyambut pengguna baru. Layar ini biasanya berisi informasi penting tentang aplikasi dan cara menggunakannya. 

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

}

4. Greetings

Greetings adalah komponen yang menampilkan daftar greeting. Setiap greeting dapat diperluas untuk menampilkan informasi lebih lanjut.

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

5. Greeting

Greeting adalah komponen individual yang menampilkan nama pengguna dalam bentuk kartu. Kartu ini dapat memiliki animasi untuk menarik perhatian pengguna dan memberikan umpan balik visual saat pengguna berinteraksi dengannya.

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

CardContent adalah fungsi yang menampilkan konten di dalam kartu. Ini dapat mencakup teks, gambar, atau elemen UI lainnya. Konten ini dapat diperluas untuk memberikan informasi tambahan kepada pengguna.

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

7. Preview Functions

Preview Functions digunakan untuk menampilkan tampilan dalam Android Studio tanpa perlu menjalankan aplikasi di perangkat fisik.

@Preview(showBackground = true, widthDp = 320)
@Composable
fun GreetingPreview() {
    BasicsCodelabTheme {
        Greetings()
    }
}

Github: https://github.com/kenanargya/jetpack_compose_ppblatihan2

Referensi: 

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

https://developer.android.com/codelabs/jetpack-compose-basics