Tugas 3 - Pemrograman Perangkat Bergerak G - Membuat Aplikasi Ulang Tahun

Berikut adalah penjelasan mengenai tugas 3 PPB, yaitu proyek Android berbasis Jetpack Compose, yang digunakan untuk membuat UI dengan pendekatan deklaratif. Proyek ini adalah aplikasi sederhana yang menampilkan pesan "Happy Birthday Annisa!" dengan nama pengirim, "From Consetta."

---

Penjelasan Kode

1. Package & Import

package com.example.happybithday

• Menentukan package aplikasi sebagai com.example.happybithday.

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.*
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.happybithday.ui.theme.HappyBithdayTheme

• Mengimpor berbagai fungsi dan komponen dari Jetpack Compose untuk membuat UI.

---

2. MainActivity (Entry Point)

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

• MainActivity adalah activity utama yang menjalankan aplikasi.
• enableEdgeToEdge() memungkinkan tampilan layar penuh tanpa batas tepi.
• setContent { ... } digunakan untuk mengatur UI aplikasi dengan Jetpack Compose.
• HappyBithdayTheme adalah tema kustom yang digunakan.
• Surface adalah wadah dasar UI dengan warna latar belakang yang diambil dari tema Material 3.
• GreetingText(...) menampilkan teks ulang tahun.

---

3. Fungsi GreetingText (Composable)

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

• Fungsi ini adalah Composable, yaitu fungsi yang dapat digunakan untuk membangun UI dengan Jetpack Compose.
• Column digunakan untuk menyusun teks secara vertikal.
• Text(...) menampilkan teks dengan atribut seperti ukuran (fontSize), jarak antar baris (lineHeight), dan perataan (textAlign).
• modifier digunakan untuk menyesuaikan tampilan dengan padding dan alignment.

---

4. Fungsi BirthdayCardPreview (Preview)

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBithdayTheme {
        GreetingText("Happy Birthday Annisa!", "From Consetta")
    }
}

• @Preview digunakan untuk menampilkan preview UI langsung di Android Studio tanpa menjalankan aplikasi.
• showBackground = true menampilkan background dalam preview.

---

Hasil

Penjelasan Konsep Jetpack Compose

1. @Composable

• Anotasi @Composable digunakan untuk menandai fungsi yang menghasilkan UI di Jetpack Compose.
• Contoh:

  @Composable
  fun MyComponent() {
      Text("Hello, Compose!")
  }
  

2. Modifier

• Modifier digunakan untuk mengubah tampilan dan perilaku komponen dalam Compose.

• Contoh penggunaan:

  Text(
      text = "Hello",
      modifier = Modifier.padding(16.dp)
  )
  

  Menambahkan padding 16dp di sekitar teks.

• Modifier lainnya:

  • .fillMaxSize() → Mengisi seluruh layar.
  • .background(Color.Red) → Memberi warna latar belakang merah.
  • .align(Alignment.CenterHorizontally) → Menyusun elemen secara horizontal di tengah.

3. sp dan dp

• sp (Scale-independent Pixels): Digunakan untuk ukuran teks agar tetap proporsional dengan pengaturan ukuran font pengguna.

  Text(text = "Hello", fontSize = 24.sp)
  

• dp (Density-independent Pixels): Digunakan untuk ukuran elemen UI agar sesuai di berbagai kepadatan layar.

  Modifier.padding(16.dp)
  

---

Cara Memodifikasi Atribut Teks

Misalkan ingin mengubah warna teks, jenis font, atau ketebalan:

Text(
    text = "Selamat Ulang Tahun!",
    fontSize = 100.sp,
    color = Color.Red, 
    fontWeight = FontWeight.Bold,
    fontStyle = FontStyle.Italic,
    textAlign = TextAlign.Center
)

Contoh lain, mengganti font dengan FontFamily:

import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight

Text(
    text = "Selamat Ulang Tahun!",
    fontSize = 100.sp,
    fontFamily = FontFamily.Serif, 
    fontWeight = FontWeight.Bold
)

---

Kode di atas adalah contoh sederhana aplikasi Birthday Card dengan Jetpack Compose.