Tugas Pertemuan 3 PPB - Membangun aplikasi sederhana dengan Composable Teks

Nama	Akmal Sulthon Fathulloh
NRP	5025211047
Kelas	PPB - D

Pada pertemuan kali ini, kita diminta untuk belajar menggunakan Jetpack Compose untuk membangun aplikasi Android sederhana yang menampilkan pesan ulang tahun di layar. Dalam mengerjakan ini, saya mengacu pada dokumentasi resmi mengenai Membangun aplikasi sederhana dengan composable teks. Berikut adalah dokumentasi dan hasil aplikasi yang telah dibuat.

Menyiapkan aplikasi Happy Birthday

Setelah mengikuti langkah-langkah dari dokumentasi codelab, kita akan mendapatkan aplikasi yang menampilkan pesan ulang tahun sederhana. Berikut adalah hasil aplikasi yang telah dibuat.

	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 Sam!",
	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() {
	HappyBirthdayTheme {
	GreetingText(message = "Happy Birthday Sam!", from = "From Emma")
	}
	}

view raw MainActivity.kt hosted with ❤ by GitHub

Berikut adalah hasil running aplikasi pada Android Virtual Device.

Modifikasi

Saya melakukan beberapa modifikasi dan penyesuaian pada kode sebelumnya. Berikut adalah perubahan yang saya lakukan.

• Menambahkan beberapa komponen baru seperti Card dan gambar latar belakang
• Menggunakan Box sebagai container utama
• Melakukan beberapa penyesuaian pada ukuran dan gaya teks

Berikut adalah kode yang telah saya modifikasi.

	class MainActivity : ComponentActivity() {
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContent {
	HappyBirthdayTheme {
	Surface(modifier = Modifier.fillMaxSize()) {
	BirthdayCard(
	message = "Happy Birthday, Carmen! 🥳",
	from = "from Akmal"
	)
	}
	}
	}
	}
	}
	@Composable
	fun BirthdayCard(message: String, from: String) {
	Box(modifier = Modifier.fillMaxSize()) {
	Image(
	painter = painterResource(id = R.drawable.background),
	contentDescription = null,
	modifier = Modifier.fillMaxSize(),
	contentScale = ContentScale.Crop
	)
	Card(
	modifier = Modifier
	.fillMaxWidth()
	.padding(48.dp)
	.align(Alignment.BottomCenter)
	.offset(y = (-80).dp),
	shape = RoundedCornerShape(24.dp),
	colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surface)
	) {
	Column(
	modifier = Modifier.padding(vertical = 40.dp, horizontal = 24.dp),
	horizontalAlignment = Alignment.CenterHorizontally
	) {
	Text(
	text = message,
	fontSize = 32.sp,
	fontWeight = FontWeight.Bold,
	textAlign = TextAlign.Center,
	lineHeight = 36.sp,
	modifier = Modifier
	.fillMaxWidth()
	.padding(bottom = 16.dp)
	)
	Text(
	text = from,
	fontSize = 20.sp,
	fontWeight = FontWeight.Medium,
	textAlign = TextAlign.Center,
	modifier = Modifier.fillMaxWidth()
	)
	}
	}
	}
	}
	@Preview(showBackground = true)
	@Composable
	fun BirthdayCardPreview() {
	HappyBirthdayTheme {
	BirthdayCard(message = "Happy Birthday, Carmen! 🥳", from = "from Akmal")
	}
	}

view raw MainActivity.kt hosted with ❤ by GitHub

Berikut adalah hasil running aplikasi dari kode yang telah saya modifikasi.

Video Presentasi

Berikut adalah video presentasi demonstrasi aplikasi yang telah saya buat.

Kode Sumber

Kode sumber dapat dilihat pada repositori GitHub berikut.

Referensi

https://kuliahppb.blogspot.com/2024/03/mengenal-composable.html
https://developer.android.com/codelabs/basic-android-kotlin-compose-text-composables