Tugas 3 - Aplikasi Happy Birthday Jetpack Compose

Aplikasi Happy Birthday Jetpack Compose

 

Langkah 1: Membuat Proyek Baru di Android Studio

1. Buka Android Studio setelah instalasi selesai.
2. Klik "Start a new Android Studio project".
3. Pada layar pemilihan template, pilih "Empty Compose Activity" lalu klik Next.
4. Masukkan nama aplikasi (misalnya, "Happy Birthday").
5. Tentukan lokasi penyimpanan proyek di sistem Anda.
6. Pilih Language sebagai Kotlin.
7. Pastikan Use AndroidX artifacts dicentang.
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.

Langkah 2: Mengedit File MainActivity.kt

1. Setelah proyek selesai dibangun, buka file MainActivity.kt.
2. Sesuaikan kode seperti berikut:

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(0xFFE3FF7D)
                ) {
                    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(0xFF749B40)
        )
        Text(
            text = from,
            fontSize = 36.sp,
            modifier = Modifier
                .padding(16.dp)
                .align(alignment = Alignment.End),
            fontFamily = FontFamily.Serif,
            fontWeight = FontWeight.Light,
            color = Color(0xFF4B7219)
        )
    }
}

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

Berikut adalah penjelasan singkat tentang fungsi-fungsi dalam kode di atas:

• MainActivity : Kelas utama yang menjalankan aplikasi menggunakan Jetpack Compose.

• onCreate : Fungsi yang dipanggil saat aplikasi dijalankan.

• setContent : Menentukan tampilan aplikasi menggunakan Jetpack Compose.

• HappyBirthdayTheme : Tema aplikasi yang digunakan.

• Surface : Container dengan warna latar belakang khusus.

• GreetingText : Fungsi yang menampilkan teks ucapan ulang tahun.

• Column : Layout vertikal untuk menata teks secara bertumpuk.

• Text : Komponen untuk menampilkan teks dengan ukuran dan warna yang dapat disesuaikan.

  • Properti fontSize, fontFamily, dan color digunakan untuk menyesuaikan tampilan teks.

  • align(Alignment.CenterHorizontally) memastikan teks utama berada di tengah layar.

  • align(Alignment.End) memastikan teks pengirim ada di bagian kanan bawah.

• Preview : Fungsi untuk menampilkan pratinjau di Android Studio tanpa menjalankan emulator.

Langkah 3: Menjalankan Aplikasi

1. Klik "Run" (ikon hijau di toolbar) untuk menjalankan aplikasi.
2. Pilih Emulator yang sudah Anda siapkan atau sambungkan perangkat fisik Android Anda.
3. Android Studio akan membangun dan menjalankan aplikasi.
4. Setelah berhasil dijalankan, aplikasi akan menampilkan teks "Happy Birthday Budi!" dan "From Andi" di tengah layar.

Dokumentasi