Aplikasi Ulang Tahun Sederhana

Alif Adrian Anzary - 5025201274

Composable adalah sebuah pendekatan dalam pengembangan antarmuka pengguna (UI) di Android yang memungkinkan pengembang untuk membagi tampilan aplikasi menjadi fungsi-fungsi modular yang dapat digabungkan. Dengan menggunakan pendekatan ini, setiap bagian dari tampilan aplikasi dapat dipisahkan menjadi komponen-komponen independen yang dapat digunakan kembali, sehingga meningkatkan kebersihan, keterbacaan, dan pemeliharaan kode.

Pada latihan ini, saya akan membuat sebuah aplikasi sederhana untuk mengingat ulang tahun menggunakan pendekatan Composable. Aplikasi ini akan memiliki tampilan yang menarik dan interaktif untuk memberikan pengalaman yang menyenangkan bagi pengguna.

Langkah awal adalah memahami struktur dasar aplikasi kita. Kita akan menggunakan berbagai komponen Composable seperti Column, Text, dan Image untuk merancang tampilan aplikasi. Selain itu, kita akan memanfaatkan fleksibilitas Composable untuk membuat tampilan yang responsif dan dinamis, sehingga aplikasi kita dapat menyesuaikan dengan berbagai ukuran layar perangkat.

Berikut adalah contoh tampilannya :

dan berikut adalah sourcecode yang saya gunakan :

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(
                        "Happy Birthday Aliyya! 🥳🎉",
                        "From Andri",
                        modifier = Modifier.padding(8.dp)
                    )
                }
            }
        }
    }
}

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
    ) {
        Text(
            text = message,
            fontSize = 36.sp,
            lineHeight = 48.sp,
            textAlign = TextAlign.Center,
            modifier = Modifier.padding(bottom = 8.dp)
        )
        Text(
            text = from,
            fontSize = 18.sp,
            lineHeight = 24.sp,
            textAlign = TextAlign.Center
        )
    }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        GreetingText(
            "Happy Birthday Andri! 🥳",
            "From Aliyya"
        )
    }
}