Membangun Aplikasi Sederhana dengan Composable Teks

  Furstin Aprilavia Putri - 5025221234 - PPB D

Aplikasi Selamat Ulang Tahun 🎂

1. Instalasi Android Studio

Untuk memulai, unduh Android Studio dari developer.android.com dan ikuti proses instalasi. Setelah instalasi selesai, buka Android Studio dan buat proyek baru dengan memilih "Empty Activity". Bahasa pemrograman yang digunakan adalah Kotlin, lalu klik Finish dan tunggu hingga proyek siap digunakan. Pada pertemuan 3 ini, kita akan membuat aplikasi sederhana untuk menampilkan ucapan ulang tahun menggunakan Jetpack Compose.

2. Kode

Kode lengkap dapat dilihat di GitHub : https://github.com/furstinvia/ppb-d-3-happybirthday.git

1. MainActivity:

   • Menggunakan setContent {} untuk mengatur UI aplikasi.

   • Surface digunakan untuk membungkus tampilan dengan latar belakang hitam.

   • Fungsi GreetingText() dipanggil untuk menampilkan teks ucapan ulang tahun.

2. GreetingText():

   • Menggunakan Column untuk mengatur layout secara vertikal.

   • Teks pesan menggunakan ukuran 100sp, warna putih, dan font Cursive.

   • Nama pengirim ditampilkan dengan ukuran 36sp, warna putih, dan font Monospace.

   • Menggunakan Alignment.End agar teks pengirim berada di pojok kanan bawah.

3. BirthdayCardPreview():

• Memberikan preview dari tampilan kartu ulang tahun dalam mode desain.

Kode lengkap

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.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.graphics.Color
import androidx.compose.ui.text.font.FontFamily
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 {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = Color.Black // background hitam
                ) {
                    GreetingText(
                        message = "Happy Birthday Furstin!",
                        from = "From Gayu",
                        modifier = Modifier.padding(8.dp)
                    )
                }
            }
        }
    }
}

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier.fillMaxSize()
    ) {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
            textAlign = TextAlign.Center,
            color = Color.White, // warna teks  putih
            fontFamily = FontFamily.Cursive // font
        )
        Text(
            text = from,
            fontSize = 36.sp,
            color = Color.White, //  warna teks  putih
            fontFamily = FontFamily.Monospace, //  font  pengirim
            modifier = Modifier
                .padding(16.dp)
                .align(alignment = Alignment.End)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        Surface(color = Color.Black) { //  preview juga hitam
            GreetingText(message = "Happy Birthday Furstin!", from = "From Gayu")
        }
    }
}

Dengan menggunakan Jetpack Compose, kita dapat dengan mudah membuat aplikasi sederhana namun menarik. Modifikasi lebih lanjut bisa dilakukan dengan menambahkan gambar, animasi, atau interaksi tombol untuk membuat aplikasi lebih interaktif.

3. Video Presentasi

atau klik disini

Referensi 

https://developer.android.com/codelabs/basic-android-kotlin-compose-text-composables?hl=id#9