Aplikasi Selamat Ulang Tahun

Pertemuan 3

Nama: Rayhan Almer Kusumah

NRP: 5025211115

Kelas: Pemrograman Perangkat Bergerak (A)

Tahun: 2025

Aplikasi Selamat Ulang Tahun

Dokumentasi

Source Code

GitHub:  Go to code!

package com.example.happy_birthday_android_app

import android.os.Bundle
import android.os.Message
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
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.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.happy_birthday_android_app.ui.theme.HappyBirthdayAndroidAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            HappyBirthdayAndroidAppTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    GreetingText(
                        message = "Happy Birthday Rayhan!",
                        from = "From Almer",
                        modifier = Modifier.padding(8.dp)
                    )
                }
            }
        }
    }
}

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier
    ) {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
            textAlign = TextAlign.Center
        )
        Text(
            text = from,
            fontSize = 36.sp,
            modifier = Modifier
                .padding(16.dp)
                .align(alignment = Alignment.End)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayAndroidAppTheme {
        GreetingText("Happy Birthday Rayhan!",  "From Almer")
    }
}

Pada pertemuan ini ditugaskan membuat aplikasi Happy Birthday yaitu sebuah aplikasi sederhana yang menampilkan sebuah ucapan ulang tahun beserta signature dari pengirim. Berikut adalah beberapa konsep utama yang dibahas pada tugas pertemuan kali ini setelah mengikuti referensi codelab.

Key Concept

Composable Functions

Fungsi @Composable merupakan inti dari Jetpack Compose. Dalam aplikasi ini, UI utama dibangun menggunakan fungsi GreetingText() yang menerima dua parameter: message dan from.

    @Composable
    fun GreetingText(message: String, from: String, modifier: Modifier = Modifier)

Text() dan Styling

Jetpack Compose memungkinkan kita untuk mengatur gaya teks langsung di dalam kode. Teks ucapan ulang tahun ditampilkan dengan ukuran huruf sangat besar:

    Text(
        text = message,
        fontSize = 100.sp,
        lineHeight = 116.sp,
        textAlign = TextAlign.Center
    )

Sementara itu, teks pengirim disusun di bawahnya dengan ukuran yang lebih kecil dan diposisikan ke kanan:

    Text(
        text = from,
        fontSize = 36.sp,
        modifier = Modifier
            .padding(16.dp)
            .align(alignment = Alignment.End)
    )

Column dan Modifier

Agar teks dapat ditampilkan secara vertikal, digunakan Column, sebuah layout yang menyusun elemen dari atas ke bawah:

    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier
    )

Penggunaan Modifier memungkinkan penyesuaian posisi, padding, dan ukuran setiap komponen secara fleksibel.

Preview

Jetpack Compose menyediakan anotasi @Preview untuk melihat hasil UI tanpa menjalankan aplikasi. Ini sangat membantu untuk iterasi desain:

    @Preview(showBackground = true)
    @Composable
    fun BirthdayCardPreview() {
        HappyBirthdayAndroidAppTheme {
            GreetingText("Happy Birthday Rayhan!",  "From Almer")
        }
    }