Tugas 2 - Aplikasi Hello Android Jetpack Compose

Aplikasi Hello Android Jetpack Compose

    Jetpack Compose adalah toolkit UI modern dari Android yang dirancang untuk membangun antarmuka pengguna (UI) secara deklaratif menggunakan Kotlin. Berbeda dengan pendekatan tradisional yang menggunakan XML, Jetpack Compose memungkinkan pengembang untuk membuat UI dengan kode yang lebih bersih, fleksibel, dan mudah dipelihara.

Keunggulan Jetpack Compose

Deklaratif dan Reaktif

• UI didefinisikan berdasarkan state, sehingga ketika data berubah, UI otomatis diperbarui tanpa perlu memperbarui elemen secara manual.
• Mirip dengan cara kerja framework seperti React dan Flutter.

Tanpa XML

• Tidak perlu lagi membuat file XML terpisah untuk desain UI.
• Semua komponen UI ditulis langsung dalam kode Kotlin.

Mudah Digunakan dan Dapat Dikombinasikan

• Bisa digunakan bersama dengan View lama yang berbasis XML.
• Bisa mengadopsi Compose secara bertahap tanpa harus mengubah seluruh aplikasi.

Kode Lebih Ringkas dan Mudah Dipahami

• Mengurangi jumlah kode boilerplate dibandingkan dengan RecyclerView, Adapter, dan ViewModel tradisional.

Performa Lebih Baik

• Jetpack Compose lebih efisien karena hanya merender ulang elemen UI yang berubah.
• Tidak memerlukan hirarki View yang dalam seperti XML.

Implementasi

Langkah 1: Membuat Proyek Baru di Android Studio

1. Buka Android Studio setelah instalasi selesai.
2. Klik "Start a new Android Studio project".
3. Pada layar pemilihan template, pilih "Empty Compose Activity" lalu klik Next.
4. Masukkan nama aplikasi (misalnya, "HelloAndroid").
5. Tentukan lokasi penyimpanan proyek di sistem Anda.
6. Pilih Language sebagai Kotlin.
7. Pastikan Use AndroidX artifacts dicentang.
8. Klik Finish.
9. Pada halaman "Select a minimum SDK", pilih API Level 21: Android 5.0 (Lollipop) sebagai Minimum SDK.
10. Android Studio akan mulai membangun proyek Anda. Tunggu hingga proses ini selesai.

Langkah 2: Mengedit File MainActivity.kt

1. Setelah proyek selesai dibangun, buka file MainActivity.kt.
2. Sesuaikan kode seperti berikut:

package com.example.helloandroid

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.Box
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.Alignment
import androidx.compose.ui.tooling.preview.Preview
import com.example.helloandroid.ui.theme.HelloAndroidTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            HelloAndroidTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier
                            .fillMaxSize()
                            .padding(innerPadding)
                    )
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Box(
        modifier = modifier
    ) {
        Text(
            text = "Hello $name!",
            modifier = Modifier.align(Alignment.Center)
        )
    }
}

@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
    HelloAndroidTheme {
        Greeting("Android")
    }
}

Berikut adalah penjelasan singkat tentang fungsi-fungsi dalam kode di atas:

1. MainActivity (Activity Utama)

   • onCreate() → Fungsi utama yang dipanggil saat aplikasi berjalan.
   • enableEdgeToEdge() → Mengaktifkan tampilan layar penuh tanpa batas.
   • setContent { ... } → Menetapkan konten UI menggunakan Jetpack Compose.
   • HelloAndroidTheme { ... } → Menerapkan tema aplikasi.
   • Scaffold(...) → Layout dasar yang menyediakan struktur tata letak, termasuk padding yang diperlukan.
   • Greeting(...) → Memanggil fungsi Greeting untuk menampilkan teks.

2. Greeting(name: String, modifier: Modifier) (Composable Function)

   • Fungsi ini menampilkan teks "Hello [name]!".
   • Box(...) → Mengatur elemen di dalamnya.
   • Text(...) → Menampilkan teks di tengah menggunakan Modifier.align(Alignment.Center).

3. @Preview (Fungsi untuk Pratinjau UI di Android Studio)

   • GreetingPreview() → Menampilkan pratinjau dari Greeting("Android") tanpa harus menjalankan aplikasi di emulator.

Langkah 3: Menjalankan Aplikasi

1. Klik "Run" (ikon hijau di toolbar) untuk menjalankan aplikasi.
2. Pilih Emulator yang sudah Anda siapkan atau sambungkan perangkat fisik Android Anda.
3. Android Studio akan membangun dan menjalankan aplikasi.
4. Setelah berhasil dijalankan, aplikasi akan menampilkan teks "Hello Android!" di tengah layar.

Dokumentasi