Tugas PPB Pertemuan 3

Nathanael Valen Susilo

5025231099

Happy Birthday Greeting dengan Composable

Anotasi @Composable dalam Jetpack Compose berfungsi sebagai penanda utama bahwa sebuah fungsi merupakan blok pembangun antarmuka (UI) yang dapat diolah oleh compiler untuk menghasilkan elemen visual secara deklaratif, sedangkan anotasi @Preview digunakan khusus untuk merender fungsi tersebut secara instan di panel Design Android Studio tanpa perlu menjalankan aplikasi di emulator atau perangkat fisik. Kombinasi keduanya memungkinkan pengembang untuk membangun komponen UI secara modular dan langsung memantau perubahan desain (seperti orientasi, tema gelap, atau ukuran layar) secara real-time, sehingga mempercepat proses iterasi dan pengembangan antarmuka pengguna pada aplikasi Android.

Pada bagian sebelumnya, kita sudah mencoba membuat aplikasi "Hello Android!" menggunakan Android Studio. Kali ini, kita akan mencoba mengubah fungsi GreetingText sebelumnya untuk menampilkan Ucapan "Happy Birthday" dengan 2 parameter.

Import yang Mungkin Perlu Ditambahkan

import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
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.font.FontStyle
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.myapplication.ui.theme.HappyBirthdayTheme

Pada bagian import, kita perlu menambahkan beberapa library yang nantinya akan digunakan seperti anotasi @Composable dan Preview, serta library terkait desain UI seperti Text, Font, Unit, dan seterusnya.

Fungsi GreetingText

@Composable
fun GreetingText(name: String, from: String, modifier: Modifier = Modifier) {
    Column(
        modifier = modifier
    ) {
        Text(
            text = "Happy Birthday $name!",
            fontSize = 90.sp,
            lineHeight = 80.sp,
            textAlign = TextAlign.Center
        )
        Text(
            text = "From $from",
            fontStyle = FontStyle.Italic,
            fontSize = 30.sp,
            modifier = Modifier
                .padding(5.dp)
                .align(alignment = Alignment.End)
        )
    }
}

Fungsi GreetingText mengambil 2 parameter name dan from untuk menampilkan ucapan Happy Birthday berdasarkan kedua parameter tersebut. Anotasi @Composable digunakan untuk menandakan bahwa fungsi akan berkaitan dengan UI aplikasi karena fungsi ini akan menampilkan teks ke layar pengguna. 

Teks ucapan "Happy Birthday $name!" dibuat dengan penyesuaian ukuran font, tinggi baris, dan posisi teks. Penyesuaian ini membutuhkan library yang sebelumnya kita tambahkan pada bagian import contohnya pada import androidx.compose.ui.unit.sp ; yang digunakan untuk memberitahu satuan ukuran pixel yang digunakan teks.

Teks "From $from" menginformasikan pengirim ucapan yang mana diposisikan di bawah kalimat ucapan sebelumnya. Gaya teks juga diganti menjadi italik dengan alignment pada posisi akhir (kanan) secara horizontal.

Penggunaan Preview

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        GreetingText(name = "Emma", from = "Sam")
    }
}

Anotasi preview ini digunakan untuk membuat preview tampilan dari fungsi BirthdayCardPreview dimana menjalankan fungsi GreetingText dengan parameter name="Emma" dan from="Sam". Preview ini tidak akan ditampilkan ke pengguna, tetapi hanya sebagai alat bantu developer dalam merancang tampilan aplikasi di Android Studio. 

Hasil

Tampilan Pada Aplikasi

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            HappyBirthdayTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    GreetingText(
                        name = "Sam",
                        from = "Emma",
                        modifier = Modifier.padding(8.dp)
                    )
                }
            }
        }
    }
}

Pada kelas MainActivity, fungsi GreetingText digunakan dengan parameter name dan from yang dibalik jika dibandingkan dengan preview. Sehingga tampilan pada aplikasi juga akan memiliki nama yang terbalik jika dibandingkan dengan preview sebelumnya.