PPB I - Tugas 3 - Composable - Membuat Aplikasi "Happy Birthday" Sederhana

 Composable - Membuat Aplikasi Happy Birthday Sederhana

Link Github

    Pada pertemuan minggu ke-3 perkuliahan mata kuliah Pemrograman Perangkat Bergerak, kami membahas tentang Composable. Fungsi Composable adalah elemen dasar dalam membangun UI di Compose. Fungsi ini memiliki beberapa karakteristik penting:

• Menjelaskan bagian-bagian dari UI.
• Tidak menampilkan elemen apapun secara langsung.
• Mengambil input dan menghasilkan elemen yang akan ditampilkan di layar.

    Kami diminta untuk membuat aplikasi ucapan Happy Birthday sederhana. Langkah pertama adalah membuat proyek menggunakan activity kosong. Setelah membuat proyek, langkah selanjutnya adalah mengisi kolom Name dengan Happy Birthday, memilih level API minimum 24 (Nougat) di kolom Minimum SDK, dan kemudian mengklik tombol Finish.

    Selanjutnya, modifikasi file MainActivity.kt seperti di bawah ini:

	package com.ariefbadrussholeh.happybirthday
	import android.os.Bundle
	import androidx.activity.ComponentActivity
	import androidx.activity.compose.setContent
	import androidx.compose.foundation.layout.Column
	import androidx.compose.foundation.layout.fillMaxSize
	import androidx.compose.material3.MaterialTheme
	import androidx.compose.material3.Surface
	import androidx.compose.material3.Text
	import androidx.compose.runtime.Composable
	import androidx.compose.ui.Modifier
	import androidx.compose.ui.tooling.preview.Preview
	import androidx.compose.ui.unit.sp
	import com.ariefbadrussholeh.happybirthday.ui.theme.HappyBirthdayTheme
	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
	) {
	GreetingText(message="Happy Birthday Isol!", from="From Arief")
	}
	}
	}
	}
	}
	@Composable
	fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
	Column {
	Text(
	text = message,
	fontSize = 100.sp,
	lineHeight = 116.sp,
	)
	Text(
	text = from,
	fontSize = 36.sp,
	)
	}
	}
	@Preview(showBackground = true)
	@Composable
	fun BirthdayCardPreview() {
	HappyBirthdayTheme {
	GreetingText(message="Happy Birthday Isol!", from="From Arief")
	}
	}

view raw MainActivity.kt hosted with ❤ by GitHub

    Fungsi GreetingText di atas adalah sebuah composable function dalam framework Jetpack Compose, yang digunakan untuk menampilkan teks ucapan selamat ulang tahun. Fungsi ini mengambil dua parameter string: message, yang merupakan pesan utama ucapan selamat ulang tahun, dan string: from, yang menunjukkan siapa yang memberikan ucapan tersebut. Dalam fungsi ini, dua komponen Text ditempatkan dalam sebuah Column. Text pertama menampilkan pesan utama dengan ukuran font 100 sp dan garis baru (line height) sebesar 116 sp, sedangkan Text kedua menampilkan pengirim ucapan dengan ukuran font 36 sp. Dengan menggunakan Column, komponen Text tersebut akan ditampilkan secara vertikal, di mana pesan utama akan ditampilkan di atas nama pengirim.

    Terakhir, kita dapat menjalankan aplikasi. Berikut adalah tampilan aplikasi pada menu preview:

    Dan berikut adalah tampilan aplikasi pada perangkat Android:

Arief Badrus Sholeh

5025201228

Pemrograman Perangkat Bergerak I

2023/2024