PPB G - Pertemuan 3

Nama: Moh rosy haqqy aminy

NRP: 5025211012

Kelas: PPB G

Latihan Membuat Aplikasi Ulang Tahun dari CodeLab

package com.example.rosy_ppb_1

import android.os.Bundle

import androidx.activity.ComponentActivity

import androidx.activity.compose.setContent

import androidx.compose.foundation.layout.Box

import androidx.compose.foundation.layout.Column

import androidx.compose.foundation.layout.Row

import androidx.compose.foundation.layout.fillMaxSize

import androidx.compose.foundation.layout.fillMaxWidth

import androidx.compose.foundation.layout.padding

import androidx.compose.foundation.layout.wrapContentSize

import androidx.compose.material3.MaterialTheme

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.rosy_ppb_1.ui.theme.Rosy_ppb_1Theme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContent {

            Rosy_ppb_1Theme {

                Box (

                    modifier = Modifier.fillMaxSize(),

                    contentAlignment = Alignment.Center,

                ){

                    Surface(

                        modifier = Modifier.padding(16.dp),

                        color = MaterialTheme.colorScheme.background,

                    ) {

                        GreetingText(message = "Happy Birthday 1744!", from = "rom Rosy \n" +

                                " \n" +

                                " \n" +

                                " (5025211012)")

                    }

                }

            }

        }

    }

}

@Composable

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

    Column {

        Text(

            text = message,

            fontSize = 50.sp,

            lineHeight = 116.sp,

            textAlign = TextAlign.Center

        )

        Text(

            text = from,

            fontSize = 36.sp,

            textAlign = TextAlign.End,

            modifier = Modifier.fillMaxWidth()

        )

    }

}

@Preview(showBackground = true)

@Composable

fun BirthDayCardPreview() {

    Rosy_ppb_1Theme {

        GreetingText(message = "Happy Birthday 1744!", from = "From Rosy \n \n \n (5025211012)")

    }

}

---

📦 Paket dan Impor

package com.example.rosy_ppb_1

Mendefinisikan namespace aplikasi.

import ... 

Mengimpor berbagai fungsi dan komponen dari Jetpack Compose dan Android seperti Text, Box, Column, Surface, Modifier, TextAlign, dll.

---

🏛️ MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        ...
    }
}

MainActivity adalah titik masuk utama aplikasi Android.

setContent {
    Rosy_ppb_1Theme {
        Box(
            modifier = Modifier.fillMaxSize(),
            contentAlignment = Alignment.Center,
        ) {
            Surface(
                modifier = Modifier.padding(16.dp),
                color = MaterialTheme.colorScheme.background,
            ) {
                GreetingText(
                    message = "Happy Birthday 1744!",
                    from = "rom Rosy \n\n\n (5025211012)"
                )
            }
        }
    }
}

Penjelasan:

• setContent { ... }: Memulai UI menggunakan Jetpack Compose.

• Rosy_ppb_1Theme { ... }: Menerapkan tema khusus.

• Box: Menyusun elemen UI dengan properti contentAlignment = Alignment.Center sehingga anak-anak di dalamnya akan diposisikan di tengah layar.

• Surface: Wadah UI dengan background dari tema dan padding.

• GreetingText(...): Fungsi yang akan menampilkan ucapan ulang tahun dan nama pengirim.

---

🎨 Composable Function: GreetingText

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column {
        Text(
            text = message,
            fontSize = 50.sp,
            lineHeight = 116.sp,
            textAlign = TextAlign.Center
        )
        Text(
            text = from,
            fontSize = 36.sp,
            textAlign = TextAlign.End,
            modifier = Modifier.fillMaxWidth()
        )
    }
}

Penjelasan:

• @Composable: Fungsi UI yang bisa digunakan oleh Jetpack Compose.

• Column: Layout vertikal (seperti LinearLayout vertical di XML).

• Teks pertama (message): Menampilkan ucapan seperti "Happy Birthday 1744!"

  • Ukuran besar (50.sp) dengan tinggi baris (lineHeight) tinggi.

• Teks kedua (from): Nama pengirim, ditampilkan rata kanan (TextAlign.End) dan memenuhi lebar layar (fillMaxWidth()).

---

👁️ Preview: BirthDayCardPreview

@Preview(showBackground = true)
@Composable
fun BirthDayCardPreview() {
    Rosy_ppb_1Theme {
        GreetingText(message = "Happy Birthday 1744!", from = "From Rosy \n \n \n (5025211012)")
    }
}

Penjelasan:

• Fungsi ini digunakan untuk menampilkan preview di Android Studio tanpa harus menjalankan emulator.

• Menampilkan GreetingText(...) di dalam tema aplikasi.

• showBackground = true menampilkan latar belakang saat preview.