Tugas 2 : Mengenal Composable

Nama : Robby Ulung Pambudi

NRP : 5025211042

Kelas : PPB A

MEMBANGUN APLIKASI SEDERHANA DENGAN COMPOSABLE TEXT

Aplikasi yang dibuat adalah sebuah kartu ucapan ulang tahun digital yang menampilkan pesan personal dengan tampilan yang menarik dan sederhana. Dalam tugas ini, konsep dasar Composable Function, layout dengan Column, serta penggunaan Modifier untuk styling diterapkan guna menciptakan tampilan yang responsif dan estetis. Harapannya, tugas ini dapat memberikan pemahaman lebih dalam mengenai pengembangan UI modern di Android serta menjadi dasar untuk eksplorasi lebih lanjut dalam pengembangan aplikasi mobile.

    

package com.example.pbb_task2

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.material3.Surface
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.pbb_task2.ui.theme.Pbb_task2Theme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Pbb_task2Theme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    GreetingText(
                        message = "Happy Birthday Robby!",
                        from = "From Emma",
                        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
            )
            Text(
                text = from,
                fontSize = 36.sp,
                modifier = Modifier
                    .padding(16.dp)
                    .align(alignment = Alignment.End)
            )
        }
    }

    @Preview(showBackground = true)
    @Composable
    fun BirthdayCardPreview() {
        Pbb_task2Theme {
            GreetingText(message = "Happy Birthday Sam!", from = "From Emma")
        }
    }
}

Kode di atas adalah sebuah aplikasi Android sederhana yang dibuat menggunakan Jetpack Compose. Aplikasi ini menampilkan pesan ulang tahun dengan desain minimalis. Dimulai dengan deklarasi package com.example.happybirthday, kode ini kemudian mengimpor berbagai komponen yang diperlukan untuk membangun UI, seperti Text, Column, Surface, dan Modifier dari Jetpack Compose.

Di dalam MainActivity, metode onCreate() menggunakan setContent {} untuk mengatur tampilan UI. Tema aplikasi diterapkan menggunakan HappyBirthdayTheme, dan Surface digunakan sebagai container utama dengan latar belakang berwarna Dark Gray. Di dalam Surface, fungsi Greeting() dipanggil untuk menampilkan teks ucapan ulang tahun beserta nama pengirimnya.

Fungsi Greeting() adalah composable function yang menampilkan dua elemen teks menggunakan Text() dalam susunan vertikal (Column). Teks utama, yaitu ucapan ulang tahun, dibuat dengan ukuran font 80sp, font tebal, serta warna hitam. Teks kedua, yaitu nama pengirim, dibuat lebih kecil (32sp), memiliki warna cyan, dan diratakan ke kanan menggunakan align(Alignment.End). Modifier digunakan untuk menambahkan padding agar tampilan lebih rapi.

Terakhir, fungsi GreetingPreview() dengan anotasi @Preview digunakan untuk menampilkan preview tampilan tanpa harus menjalankan aplikasi. Secara keseluruhan, kode ini menciptakan aplikasi sederhana yang menampilkan pesan ulang tahun dengan tampilan yang menarik menggunakan Jetpack Compose.