Tugas 2 PPB - Membuat Aplikasi "Hello Android" Sederhana Menggunakan Jetpack Compose
Tugas 2 - Aplikasi Hello Android Sederhana Menggunakan Jetpack Compose
Pada tugas ini saya membuat aplikasi Hello Android sederhana menggunakan Jetpack Compose di Android Studio. Aplikasi yang dibuat tidak hanya menampilkan teks statis, tetapi juga memiliki interaksi sederhana seperti input nama, tombol aksi, perubahan teks, dan perubahan warna latar belakang.
1. Informasi Pribadi
| Nama | Dapunta Adyapaksi Ratyanasja |
|---|---|
| NRP | 5025231187 |
| Kelas | Pemrograman Perangkat Bergerak (C) |
| Tugas | (Tugas 2) Membuat Aplikasi Hello Android Sederhana Menggunakan Jetpack Compose |
2. Penjelasan Singkat
Android Studio
Android Studio adalah IDE resmi untuk pengembangan aplikasi Android. Di dalamnya sudah tersedia editor kode, emulator, sistem build, dan berbagai tools yang membantu proses pembuatan serta pengujian aplikasi.
Kotlin
Kotlin adalah bahasa pemrograman modern yang didukung secara resmi untuk Android. Sintaksnya lebih ringkas, mudah dibaca, dan sangat cocok digunakan bersama Jetpack Compose.
Gradle
Gradle adalah sistem build yang dipakai untuk mengatur dependency, proses kompilasi, dan konfigurasi project Android. Dengan Gradle, project dapat di-build dan dijalankan secara terstruktur.
Jetpack Compose
Jetpack Compose adalah toolkit UI modern dari Android untuk membangun tampilan langsung dengan Kotlin tanpa XML. Dengan Compose, pembuatan antarmuka menjadi lebih deklaratif, ringkas, dan interaktif.
3. Cara Setup Project di Android Studio
Pertama, buka Android Studio lalu pilih New Project. Setelah itu pilih template Empty Activity karena pada versi Android Studio yang saya gunakan, template Compose muncul dengan nama tersebut.
Isi konfigurasi project sebagai berikut:
| Name | Latihan Hello Android |
|---|---|
| Package Name | com.example.latihan_hello_android |
| Save Location | ~\AndroidStudioProjects\LatihanHelloAndroid |
| Minimum SDK | API 24 |
| Build Configuration Language | Kotlin DSL |
Setelah project dibuat, saya perlu mengubah pengaturan Gradle dari versi JDK 21 ke JDK 17. Pengaturan ini dilakukan melalui Settings > Build, Execution, Deployment > Build Tools > Gradle, lalu pada bagian versi dipilih 17. Langkah ini diperlukan agar proses build dan sync project berjalan dengan stabil.
4. Penjelasan Kode Program
Berikut adalah file utama yang menjadi fokus pada project ini, yaitu MainActivity.kt. File ini berisi struktur dasar aplikasi Compose, state, layout, komponen interaktif, dan preview.
package com.example.latihan_hello_android
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
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.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.latihan_hello_android.ui.theme.LatihanHelloAndroidTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
LatihanHelloAndroidTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
HelloAndroidApp(
modifier = Modifier.padding(innerPadding)
)
}
}
}
}
}
@Composable
fun HelloAndroidApp(modifier: Modifier = Modifier) {
var name by remember { mutableStateOf("") }
var title by remember { mutableStateOf("Hello Android 👋") }
var subtitle by remember { mutableStateOf("Selamat datang di Jetpack Compose") }
var colorIndex by remember { mutableIntStateOf(0) }
val bgColors = listOf(
Color(0xFFE3F2FD),
Color(0xFFE8F5E9),
Color(0xFFFFF3E0),
Color(0xFFF3E5F5),
Color(0xFFFFEBEE)
)
val messages = listOf(
"Compose itu modern dan enak dipakai",
"Sekarang hello world-mu sudah interaktif",
"Belajar mobile pelan-pelan, yang penting paham",
"Kotlin + Compose terasa lebih simpel untuk UI",
"Aplikasi kecil, tapi langkah awal yang bagus"
)
Box(
modifier = modifier
.fillMaxSize()
.background(bgColors[colorIndex])
.padding(24.dp),
contentAlignment = Alignment.Center
) {
Card(
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(24.dp),
elevation = CardDefaults.cardElevation(defaultElevation = 8.dp)
) {
Column(
modifier = Modifier
.fillMaxWidth()
.padding(24.dp),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center
) {
Text(
text = "🚀",
style = MaterialTheme.typography.displaySmall
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = title,
style = MaterialTheme.typography.headlineMedium,
fontWeight = FontWeight.Bold
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = subtitle,
style = MaterialTheme.typography.bodyLarge
)
Spacer(modifier = Modifier.height(20.dp))
OutlinedTextField(
value = name,
onValueChange = { name = it },
label = { Text("Masukkan nama") },
modifier = Modifier.fillMaxWidth(),
singleLine = true,
shape = RoundedCornerShape(16.dp)
)
Spacer(modifier = Modifier.height(16.dp))
Button(
onClick = {
val finalName = if (name.isBlank()) "Android" else name
title = "Hello, $finalName! 👋"
subtitle = "Senang bertemu denganmu di Compose"
colorIndex = (colorIndex + 1) % bgColors.size
},
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(16.dp)
) {
Text("Sapa Aku")
}
Spacer(modifier = Modifier.height(10.dp))
Button(
onClick = {
title = "Compose Surprise 🎉"
subtitle = messages.random()
colorIndex = (colorIndex + 1) % bgColors.size
},
modifier = Modifier.fillMaxWidth(),
shape = RoundedCornerShape(16.dp)
) {
Text("Surprise")
}
Spacer(modifier = Modifier.height(10.dp))
TextButton(
onClick = {
name = ""
title = "Hello Android 👋"
subtitle = "Selamat datang di Jetpack Compose"
colorIndex = 0
}
) {
Text("Reset")
}
}
}
}
}
@Preview(showBackground = true, showSystemUi = true)
@Composable
fun HelloAndroidAppPreview() {
LatihanHelloAndroidTheme {
HelloAndroidApp()
}
}a. Baris package com.example.latihan_hello_android
Baris package digunakan untuk menunjukkan lokasi atau identitas package dari file Kotlin tersebut.
Package ini membantu Android Studio dan Kotlin dalam mengelompokkan file program agar lebih rapi dan terstruktur.
b. Blok import ...
Blok import digunakan untuk mengambil class, fungsi, dan komponen yang dibutuhkan dari library Android dan Compose.
Dengan import ini, program dapat memakai komponen seperti Text, Button, Card, OutlinedTextField,
serta fitur state dan preview.
c. Blok class MainActivity : ComponentActivity()
Blok ini adalah activity utama yang pertama kali dijalankan saat aplikasi dibuka.
Karena project menggunakan Jetpack Compose, activity ini mewarisi ComponentActivity agar dapat menampilkan UI Compose melalui setContent.
d. Blok override fun onCreate(savedInstanceState: Bundle?)
Fungsi onCreate() dipanggil saat activity dibuat pertama kali.
Pada bagian ini dilakukan inisialisasi awal, pengaturan edge-to-edge, dan penempatan tampilan Compose ke layar aplikasi.
e. Baris enableEdgeToEdge()
Fungsi ini digunakan agar tampilan aplikasi dapat memanfaatkan area layar secara lebih penuh hingga ke tepi layar. Dengan begitu, UI terlihat lebih modern dan mengikuti gaya tampilan Android saat ini.
f. Blok setContent { ... }
Blok setContent adalah tempat utama untuk menampilkan UI Compose.
Semua tampilan Compose ditulis di dalam blok ini, sehingga kita tidak lagi menggunakan file XML seperti pada pendekatan Android lama.
g. Blok LatihanHelloAndroidTheme { ... }
Theme digunakan untuk membungkus tampilan agar warna, tipografi, dan gaya antarmuka mengikuti tema aplikasi. Dengan adanya theme, tampilan menjadi lebih konsisten dan rapi.
h. Blok Scaffold(modifier = Modifier.fillMaxSize())
Scaffold adalah layout dasar dari Material Design di Compose.
Komponen ini membantu menyusun tampilan utama aplikasi, sementara Modifier.fillMaxSize() membuat tampilan memenuhi seluruh layar.
i. Pemanggilan HelloAndroidApp(modifier = Modifier.padding(innerPadding))
Baris ini memanggil composable utama bernama HelloAndroidApp.
Padding dari Scaffold diteruskan agar isi tampilan tidak bertabrakan dengan area sistem seperti status bar atau navigation bar.
j. Blok @Composable fun HelloAndroidApp(...)
Fungsi ini adalah composable utama yang berisi seluruh antarmuka interaktif aplikasi. Di dalamnya terdapat state, warna latar, pesan, input nama, tombol, dan logika perubahan teks ketika pengguna berinteraksi.
k. State dengan remember dan mutableStateOf
Variabel seperti name, title, subtitle, dan colorIndex disimpan sebagai state.
State ini penting karena ketika nilainya berubah, Compose akan otomatis memperbarui tampilan tanpa perlu refresh manual.
var name by remember { mutableStateOf("") }
var title by remember { mutableStateOf("Hello Android 👋") }
var subtitle by remember { mutableStateOf("Selamat datang di Jetpack Compose") }
var colorIndex by remember { mutableIntStateOf(0) }l. List bgColors
List bgColors berisi beberapa warna latar belakang yang akan digunakan secara bergantian.
Saat tombol ditekan, nilai colorIndex berubah sehingga background aplikasi ikut berubah.
m. List messages
List messages berisi beberapa kalimat yang akan dipilih secara acak saat tombol Surprise ditekan.
Hal ini membuat aplikasi terasa lebih hidup dan tidak terlalu statis.
n. Blok Box(...)
Box digunakan sebagai wadah utama layar.
Pada bagian ini diterapkan ukuran penuh layar, warna background yang berubah-ubah, padding, serta posisi isi di tengah layar.
o. Blok Card(...)
Card dipakai agar isi aplikasi terlihat seperti kartu modern dengan sudut membulat dan bayangan.
Ini membuat tampilan Hello Android menjadi lebih menarik dibanding teks biasa.
p. Blok Column(...)
Column digunakan untuk menyusun komponen secara vertikal dari atas ke bawah.
Semua elemen seperti emoji, judul, subtitle, input, dan tombol diletakkan di dalam column ini.
q. Komponen Text(...)
Komponen Text digunakan untuk menampilkan teks pada layar, baik emoji, judul, maupun subtitle.
Judul diberi gaya lebih besar dan tebal agar menjadi pusat perhatian.
r. Komponen Spacer(...)
Spacer digunakan untuk memberi jarak antar komponen.
Dengan adanya spacer, tampilan menjadi lebih rapi dan tidak terlalu rapat.
s. Komponen OutlinedTextField(...)
Komponen ini digunakan sebagai input nama pengguna.
Nilai input disimpan ke dalam state name, sehingga nantinya bisa dipakai untuk menampilkan sapaan personal.
t. Tombol Button(...) pertama
Tombol pertama berfungsi untuk menyapa pengguna. Jika kolom nama kosong, aplikasi akan memakai kata Android, tetapi jika diisi maka nama pengguna akan ditampilkan pada judul.
Button(
onClick = {
val finalName = if (name.isBlank()) "Android" else name
title = "Hello, $finalName! 👋"
subtitle = "Senang bertemu denganmu di Compose"
colorIndex = (colorIndex + 1) % bgColors.size
}
)u. Tombol Button(...) kedua
Tombol kedua adalah tombol Surprise. Saat ditekan, judul berubah menjadi Compose Surprise, subtitle menampilkan pesan acak, dan warna background juga ikut berubah.
v. Tombol TextButton(...)
Tombol ini berfungsi untuk mereset aplikasi ke kondisi awal. Nama dikosongkan kembali, judul dan subtitle dikembalikan seperti semula, lalu background kembali ke warna awal.
w. Blok @Preview fun HelloAndroidAppPreview()
Fungsi preview digunakan untuk menampilkan tampilan aplikasi langsung di Android Studio tanpa harus menjalankan emulator. Fitur ini sangat membantu untuk melihat hasil desain UI secara cepat selama proses pengembangan.
5. Screenshot Aplikasi
Penutup
Dari tugas ini saya belajar bagaimana membuat aplikasi Android sederhana menggunakan Jetpack Compose. Meskipun konsepnya masih dasar, project ini sudah memperlihatkan penggunaan activity, composable, state, input, tombol, serta perubahan tampilan secara dinamis. Dengan latihan seperti ini, saya jadi lebih memahami dasar pengembangan UI modern di Android.
Komentar
Posting Komentar