Tugas Jetpack Compose

Membuat Aplikasi Happy Birthday dengan Composable Text

Halo Teman-teman, Pada kesempatan ini, kita akan mencoba membuat Aplikasi sederhana dengan menggunakan Composable Text, yaitu Aplikasi "Happy Birhtday", Untuk langkah-langkah pembuatan aplikasi nya adalah sebagai berikut ya ...

1. Membuat Project di Android Studio

    a. Buka Android Studio, dan di halaman welcome, pilih New Project

    b. Pada Halaman New Project, Pilih Empty Activity, lalu klik Next

    c. Di kolom Name, Masukkan nama "Happy Birhtday", dan klik Finish

    d.  Tunggu sampai Android Studio selesai mem-build dan sync Gradle Project tersebut

    e. Setelah selesai, klik Run App

2. Membuat Aplikasi Happy Birthday

a. Pada file MainActivity.kt, hapus definisi function Greeting() serta semua referensi yang

memanggilnya, sehingga function onCreate() dan BirthdayCardPreview() menjadi seperti berikut:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                }
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
    }
}

b. Sebelum function BirthdayCardPreview(), buat function baru dengan nama GreetingText(), jangan lupa tambahkan anotasi @Composable

c. Tambahkan parameter message dan modifier ke function GreetingText()

@Composable
fun GreetingText(message: String, modifier: Modifier = Modifier) {
    Text(
        text = message
    )
}
d. Pada function GreetingText(), tambahkan sebuah composable Text, yang mengirimkan pesan text sebagai argumen yang dinamai
@Composable
fun GreetingText(message: String, modifier: Modifier = Modifier) {
    Text(
        text = message
    )
}
Preview Function GreetingText(
e. Tambahkan GreetingText(message = "Happy Birthday Khuria!") ke function BirthdayCardpreview()
@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        GreetingText(message = "Happy Birthday Khuria!")
    }
}
Mengubah Ukuran Font
f. Pada file MainActivity.kt, scroll ke composable Text() di function GreetingText()
g. Tambah argumen fontSize ke function Text() sebagai argumen kedua yang dinamai dan atur nilai ke 100.sp
h. Klik .sp yang di highlight oleh Android Studio
i. Pada pop-up yang muncul, klik Import untuk mengimpor androidx.compose.ui.unit.sp untuk menggunakan ekstensi .sp
j. Perbarui composable Text() untuk menyertakan tinggi baris, agar text tidak tumpang tindih
@Composable
fun GreetingText(message: String, modifier: Modifier = Modifier) {
    Text(
        text = message,
        fontSize = 100.sp,
        lineHeight = 116.sp,
    )
}
Menambahkan Elemen Teks lainnya
k. Didalam file MainActivity.kt, scroll le fungsi GreetingText
l. Teruskan parameter from jenis String ke fungsi untuk nama pengirim.
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier)
m. Setelah composable pesan ulang tahun Text,tambahkan composable Text lain yang menerima argumen text yang ditetapkan ke nilai from
@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Text(
        // ...
    )
    Text(
        text = from
    )
}
n. Tambahkan argumen yang telah diberi nama fontSize yang ditetapkan ke nilai 36.sp
Text(
    text = from,
    fontSize = 36.sp
)
o. Scroll ke fungsi BirthdayCardPreview()
p. Tambahkan argumen String lain untuk menandatangani kartu, seperti "From Dimas"
GreetingText(message = "Happy Birthday Khuria!", from ="From Dimas")
q. Perhatikan pratinjau

Mengatur Elemen Teks dalam Baris dan Kolom
r. Didalam file MainActivity.kt, scroll ke fungsi GreetingText()
s. Tambahkan composable Column di sekitar elemen teks agar kolom dengan dua elemen teks dapat ditampilkan. Pilih dua composable Text, Klik bohlam. 
Pilih Surround with widget > Surround with Row

Sekarang fungsi ini akan terlihat seperti cuplikan kode ini :
@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Row {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
        )
        Text(
            text = from,
            fontSize = 36.sp
        )
    }
}
t. Lihat hasilnya

Sekian dan Terimakasih!