TUGAS PERTEMUAN KE-3 [MEMODIFIKASI APP DENGAN COMPOSABLE TEKS]

Berikut merupakan dokumentasi dari hasil membangun aplikasi sederhana dengan fungsi composable teks dengan Jetpack Compose dengan menampilkan pesan "Happy Birthday" yang telah saya buat dengan mengacu pada tutorial dokumentasi tentang Membuat aplikasi sederhana dengan composable teks.

1. Fungsi composable

Fungsi composable adalah elemen dasar penyusun UI compose. Fungsi composable adalah:

• Menjelaskan beberapa bagian UI.

• Tidak menampilkan apapun.

• Mengambil beberapa input dan menghasilkan elemen yang ditampilkan di layar.

Fungsi composable ini dianotasi dengan anotasi @Composable. Semua fungsi composable harus memiliki anotasi ini. Anotasi ini memberi tahu compiler Compose bahwa fungsi ini dimaksudkan untuk mengonversi data menjadi UI. Berikut merupakan contoh dari fungsi composable sederhana yang meneruskan data (parameter fungsi  name) dan menggunakannya untuk merender elemen teks di layar.

	@Composable
	fun Greeting(name: String) {
	Text(text = "Hello $name!")
	}

view raw MainActivity.kt hosted with ❤ by GitHub

2. Membangun aplikasi Happy Birthday 

Setelah mengikuti seluruh langkah dalam dokumentasi Codelab, kita akan berhasil membangun sebuah aplikasi yang menampilkan ucapan ulang tahun secara sederhana. Berikut ini adalah tampilan akhir dari aplikasi yang telah berhasil dibuat.

3. Hasil memodifikasi aplikasi happy birthday 

Berikut adalah beberapa modifikasi yang saya lakukan pada tampilan sebelumnya :

- Menggunakan string resources untuk teks

Pada bagian kode message = "Happy Birthday Laurivasya!", saya menggunakan nilai string menjadi menggunakan string resources dengan mendeklarasikan teks di string.xml seperti berikut:

<string name="birthday_message">Happy Birthday Laurivasya!</string>

view raw MainActivity.kt hosted with ❤ by GitHub







Kemudian, saya menggunakan stringResources(id = R.string.birthday_message) untuk menggantikan value teks.


- Mengubah tema warna

Pada file Theme.kt saya mengganti warna tema yang sebelumnya biru menjadi merah muda dengan menambahkan potongan kode berikut :

val md_theme_light_primary = Color(0xFFFFC0CB) // Merah muda

view raw MainActivity.kt hosted with ❤ by GitHub

- Menambahkan kotak teks untuk informasi penerima/pengirim pesan

Saya juga menambahkan box di sekitar teks "Happy Birthday" agar UI terkesan lebih rapi dengan melakukan perubahan berikut:

	Box(
	modifier = Modifier
	.background(Color.White)
	.padding(24.dp)
	.border(2.dp, Color.Gray)
	) {
	Text(
	text = message,
	style = TextStyle(
	fontSize = 32.sp,
	fontWeight = FontWeight.Bold,
	color = Color.Black,
	textAlign = TextAlign.Center
	)
	)
	}

view raw MainActivity.kt hosted with ❤ by GitHub

Video Demo

Github Link