Tugas 3 - Aplikasi Happy Birthday Jetpack Compose

 

Aplikasi Happy Birthday Jetpack Compose

Berikut adalah langkah-langkah untuk membuat aplikasi Happy Birthday dengan Jetpack Compose. 

1. Buka Android studio setelah instalasi selesai.
2. Klik "Start a new Android Studio project".
3. Pada layar pemilihan template, pilih "Empty Compose Activity" dan klik Next.
4. Masukkan nama aplikasi (misalnya, "My Application" atau "HelloAndroid").
5. Tentukan lokasi penyimpanan proyek di sistem Anda.
6. Pilih Language sebagai Kotlin.
7. Pastikan Use AndroidX artifacts dicentang (untuk menggunakan pustaka AndroidX yang modern). 
8. Klik Finish.
9. Pada halaman "Select a minimum SDK", pilih API Level 24: Android 7.0 (Nougat) sebagai Minimum SDK.
10. Android Studio akan mulai membangun proyek Anda. Tunggu hingga proses ini selesai.
11. Setelah selesai, Anda akan melihat proyek baru dengan struktur file default yang sudah siap untuk digunakan.
12. Setelah proyek selesai dibangun, buka file MainActivity.kt dan masukkan kode dibawah. 
13. Klik "Run" (ikon hijau di toolbar) untuk menjalankan aplikasi.
14. Pilih Emulator yang sudah Anda siapkan atau sambungkan perangkat fisik Android Anda.
15. Aplikasi akan dibangun dan dijalankan di perangkat atau emulator yang Anda pilih.

MainActivity.kt 

package com.example.happybirthday

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
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.graphics.Color
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
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.happybirthday.ui.theme.HappyBirthdayTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = Color(0xFFE3F2FD)
                ) {
                    GreetingText(
                        message = "Happy Birthday Budi!",
                        from = "From Andi",
                        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,
            fontFamily = FontFamily.Cursive,
            fontWeight = FontWeight.Bold,
            color = Color(0xFF0D47A1)
        )
        Text(
            text = from,
            fontSize = 36.sp,
            modifier = Modifier
                .padding(16.dp)
                .align(alignment = Alignment.End),
            fontFamily = FontFamily.Serif,
            fontWeight = FontWeight.Light,
            color = Color(0xFF1976D2)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        GreetingText(message = "Happy Birthday Budi!", from = "From Andi")
    }
}

Penjelasan Kode

1. MainActivity (entri point aplikasi)
• MainActivity: Aktivitas utama aplikasi yang diwarisi dari ComponentActivity.
• onCreate: Fungsi yang dipanggil saat aktivitas dibuat.
• setContent: Mengatur tampilan menggunakan Jetpack Compose.
• HappyBirthdayTheme: Tema aplikasi yang digunakan.
• Surface: Kontainer utama dengan warna latar belakang biru muda #E3F2FD.
• GreetingText: Memanggil fungsi komponen untuk menampilkan teks ucapan ulang tahun.
2. GreetingText (menampilkan ucapan)
• @Composable: Menandakan bahwa fungsi ini adalah komponen UI Compose.
• Column: Menyusun elemen secara vertikal.
• Text (pesan ulang tahun):
  • Ukuran 100sp, tebal, warna biru tua #0D47A1, dan huruf bergaya Cursive.
• Text (pengirim):
• Ukuran 36sp, lebih ringan, warna biru #1976D2, dan bergaya Serif.
3. BirthdayCardPreview (pratinjau di Android Studio)
• @Preview: Menampilkan hasil desain UI di Android Studio.
• Memanggil GreetingText: Dengan teks "Happy Birthday Budi!" dan "From Andi".

Dokumentasi 

https://github.com/fairuuz16/ppb-tasks/tree/main/HappyBirthday