Membuat Program Ucapan Selamat Ulang Tahun Menggunakan Composable

Pendahuluan

Pada pertemuan ketiga kuliah Pemrograman Perangkat Bergerak kali ini kita akan mempelajari tentang Composable pada JetPack Compose. Latihan pada pertemuan kali ini kita akan membuat sebuah proyek menggunakan template Empty Activity untuk mengubah pesan teks menjadi ucapan ulang tahun secara personal.

Membuat Proyek Ucapan Ulang Tahun

Sekarang kita akan membuat proyek baru kita dengan menggunakan template yang sudah ada pada Android Studio. Disini kita akan memilih template Empty Activity kembali sama seperti proyek sebelumnya. Pada proyek ini kita akan membuat sebuah proyek sederhana yang menampilkan ucapan "Selamat Ulang Tahun". Selain itu kita akan mengubah ukuran dari teks yang ditampilkan.

Membuka Android Studio dan memilih opsi "Empty Activity".
Setelah memilih template Empty Activity kita akan memilih level API minimum untuk proyek kita, disini kita akan memilih API 24 (Nougat)
Setelah memilih opsi tersebut tunggu hingga semua kode dimuat.

Kemudian kita akan menulis kode sesuai dengan panduan yang sudah dijelaskan di kelas pada pertemuan kemarin

	package com.example.happybirthday

	import android.os.Bundle
	import androidx.activity.ComponentActivity
	import androidx.activity.compose.setContent
	import androidx.compose.foundation.layout.Arrangement
	import androidx.compose.foundation.layout.Column
	import androidx.compose.foundation.layout.fillMaxSize
	import androidx.compose.foundation.layout.padding
	import androidx.compose.material3.MaterialTheme
	import androidx.compose.material3.Surface
	import androidx.compose.material3.Text
	import androidx.compose.runtime.Composable
	import androidx.compose.ui.Alignment
	import androidx.compose.ui.Modifier
	import androidx.compose.ui.text.style.TextAlign
	import androidx.compose.ui.tooling.preview.Preview
	import androidx.compose.ui.unit.dp
	import androidx.compose.ui.unit.sp
	import com.example.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 Fuad!",
	from = "From Salim",
	modifier = Modifier.padding(8.dp)
	)
	}
	}
	}
	}
	}

	@Composable
	fun GreetingText(message : String,from : String,modifier: Modifier = Modifier) {
	Column(
	verticalArrangement = Arrangement.Center,
	modifier = modifier.padding(8.dp)
	){
	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 Fuad!", from = "From Salim")
	}
	}

view raw gistfile1.txt hosted with ❤ by GitHub

Di atas adalah sebuah fungsi GreetingText yang merupakan bagian dari framework Jetpack Compose. Fungsi ini bertujuan untuk menampilkan teks ucapan selamat ulang tahun. Dengan menerima dua parameter string: message (sebagai pesan utama) dan from (sebagai penanda pengirim), fungsi ini berperan dalam menyajikan ucapan secara dinamis. Komponen Text yang terdiri dari dua bagian disusun dalam Column. Bagian pertama menampilkan pesan utama dengan gaya font yang besar, yaitu 100 sp dengan tinggi baris sebesar 116 sp. Sementara itu, bagian kedua menampilkan pengirim ucapan dengan ukuran font yang lebih kecil, yaitu 36 sp. Dengan pengaturan Column ini, teks akan ditampilkan secara vertikal, di mana pesan utama akan mendahului nama pengirim.

Setelah itu kita bisa langsung jalankan kode yang sudah kita tulis hingga tampilan Android Studio seperti ini.

Setelah berhasil menjalankan kode sebelumnya kita bisa melakukan sedikit modifikasi untuk mempercantik tampilan dari ucapan "Selamat Ulang Tahun". Disini saya memodifikasi kode ini dengan membuat sebuah card yang berisi ucapan Selamat Ulang Tahun versi saya seperti ini.

Berikut adalah kode proyek yang sudah saya modifikasi :

	package com.example.happybirthday

	import android.icu.text.AlphabeticIndex.Bucket.LabelType
	import android.os.Bundle
	import androidx.activity.ComponentActivity
	import androidx.activity.compose.setContent
	import androidx.compose.foundation.Image
	import androidx.compose.foundation.background
	import androidx.compose.foundation.layout.Arrangement
	import androidx.compose.foundation.layout.Box
	import androidx.compose.foundation.layout.Column
	import androidx.compose.foundation.layout.fillMaxSize
	import androidx.compose.foundation.layout.height
	import androidx.compose.foundation.layout.padding
	import androidx.compose.foundation.layout.width
	import androidx.compose.foundation.shape.RoundedCornerShape
	import androidx.compose.material3.Card
	import androidx.compose.material3.CardDefaults
	import androidx.compose.material3.MaterialTheme
	import androidx.compose.material3.Surface
	import androidx.compose.material3.Text
	import androidx.compose.runtime.Composable
	import androidx.compose.ui.Alignment
	import androidx.compose.ui.Modifier
	import androidx.compose.ui.draw.scale
	import androidx.compose.ui.graphics.Color
	import androidx.compose.ui.res.painterResource
	import androidx.compose.ui.text.font.FontWeight
	import androidx.compose.ui.text.style.TextAlign
	import androidx.compose.ui.tooling.preview.Preview
	import androidx.compose.ui.unit.dp
	import androidx.compose.ui.unit.sp
	import com.example.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 Fuad!",
	from = "From Salim",
	modifier = Modifier.padding(16.dp)
	)
	}
	}
	}
	}
	}

	@Composable
	fun GreetingText(message : String,from : String, modifier: Modifier = Modifier) {
	Box(
	modifier = Modifier.fillMaxSize(),
	contentAlignment = Alignment.Center
	){
	Card(
	modifier = Modifier
	.width(350.dp)
	.height(550.dp),
	elevation = CardDefaults.cardElevation(10.dp),
	colors = CardDefaults.cardColors(
	containerColor = Color.White
	)
	)
	{
	Column(
	horizontalAlignment = Alignment.CenterHorizontally,
	modifier = Modifier.fillMaxSize(),
	){

	Image(painter = painterResource(id = R.drawable.kueulangtahun), contentDescription = "null",
	modifier = Modifier.scale(scale = 1f).padding(bottom = 0.dp, top = 40.dp))
	Text(
	text = message,
	fontWeight = FontWeight.SemiBold,
	fontSize = 30.sp,
	lineHeight = 20.sp,
	textAlign = TextAlign.Center,
	modifier = Modifier.padding(horizontal = 16.dp)
	)
	Text(
	text = from,
	color = Color.Gray,
	fontSize = 24.sp,
	lineHeight = 30.sp,
	textAlign = TextAlign.Center,
	modifier = Modifier
	.padding(bottom = 24.dp, top = 16.dp, start = 16.dp, end = 16.dp )
	)
	Text(
	text = "Barakallah🤗",
	color = Color.White,
	fontSize = 24.sp,
	fontWeight = FontWeight.SemiBold,
	modifier = Modifier
	.background(Color(android.graphics.Color.parseColor("#FC245D")),shape = RoundedCornerShape(8.dp))
	.width(200.dp)
	.padding(horizontal = 20.dp, vertical = 16.dp)
	)
	}
	}
	}

	}

	@Preview(showBackground = true)
	@Composable
	fun BirthdayCardPreview() {
	HappyBirthdayTheme {
	GreetingText(message = "Happy Birthday!", from = "Kami Ucapkan Selamat untuk Kamu😍")
	}
	}