Aplikasi Hello Android

Pertemuan 2

Nama: Rayhan Almer Kusumah

NRP: 5025211115

Kelas: Pemrograman Perangkat Bergerak (A)

Tahun: 2025

Aplikasi Hello Android

Dokumentasi

Source Code

GitHub:  Go to code!

package com.example.hello_world_android_app

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.hello_world_android_app.ui.theme.HelloWorldAndroidAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HelloWorldAndroidAppTheme {
                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 = "GreeetingPreviewDark")
@Preview(showBackground = true, widthDp = 320)
@Composable
fun GreetingPreview() {
    HelloWorldAndroidAppTheme {
        Greetings()
    }
}

@Preview(showBackground = true, widthDp = 320, heightDp = 320)
@Composable
fun OnboardingPreview() {
    HelloWorldAndroidAppTheme {
        OnboardingScreen(onContinueClicked = {})
    }
}

@Preview
@Composable
fun MyAppPreview() {
    HelloWorldAndroidAppTheme {
        MyApp(Modifier.fillMaxSize())
    }
}

Pada pertemuan ini ditugaskan membuat aplikasi Hello Android yaitu sebuah aplikasi sederhana yang berisi list card bertuliskan Hello yang dapat diexpand saat button arrow ditekan. Berikut adalah beberapa konsep utama yang dibahas pada tugas pertemuan kali ini setelah mengikuti referensi codelab.

Key Concept

Composable Function

Jetpack Compose menggunakan pendekatan deklaratif dalam membangun UI. Semua elemen UI ditulis sebagai fungsi @Composable, yang memungkinkan kita mendeskripsikan tampilan berdasarkan state aplikasi. 

    @Composable
    fun Greeting(name: String) {
        Text(text = "Hello, $name!")
    }

Hal ini membuat kode lebih ringkas, mudah dibaca, dan lebih terstruktur dibandingkan pendekatan berbasis XML tradisional.

State Management (remember & rememberSaveable)

State dalam Compose dikelola dengan cara yang efisien dan terintegrasi. Pada aplikasi ini, saya menggunakan rememberSaveable untuk menyimpan state tampilan onboarding:

    var shouldShowOnboarding by rememberSaveable { mutableStateOf(true) }

Dengan pendekatan ini, state tetap terjaga meskipun terjadi perubahan konfigurasi seperti rotasi layar.

LazyColumn List

Untuk menampilkan daftar 1000 elemen, codelab ini menggunakan LazyColumn—komponen Compose yang fungsinya mirip dengan RecyclerView, namun jauh lebih sederhana dalam penggunaannya.

    LazyColumn {
        items(items = names) { name ->
            Greeting(name = name)
        }
    }

Expandable Cards Animations

Setiap kartu dapat diperluas (expanded) untuk menampilkan teks tambahan. Transisi ini dibuat lebih dinamis dengan animateContentSize() dan konfigurasi animasi berbasis spring:

    .animateContentSize(
        animationSpec = spring(
            dampingRatio = Spring.DampingRatioMediumBouncy,
            stiffness = Spring.StiffnessLow
        )
    )

Pengguna dapat berinteraksi menggunakan IconButton untuk membuka atau menutup konten tambahan, yang disertai ikon ExpandMore dan ExpandLess.

Material Theme

Aplikasi memanfaatkan komponen dari MaterialTheme untuk menghasilkan tampilan yang konsisten dan modern sesuai dengan pedoman desain Material 3. Selain itu, tema gelap dan terang didukung secara otomatis melalui Surface dan MaterialTheme.colorScheme.