Tugas 2 - Aplikasi Hello Android Jetpack Compose

 

Aplikasi Hello Android Jetpack Compose

Jetpack Compose adalah toolkit UI modern dari Google yang mempermudah pembuatan antarmuka pengguna di aplikasi Android menggunakan bahasa pemrograman Kotlin. Dengan pendekatan deklaratif, Compose memungkinkan pengembang mendeskripsikan UI secara langsung melalui kode, tanpa perlu menggunakan XML.

Kelebihan Jetpack Compose

1. Deklaratif dan Responsif. Hanya perlu mendeskripsikan UI dan Compose yang akan menangani pembaruan otomatis saat data berubah.
2. Pengembangan Lebih Cepat. Dengan sintaksis yang lebih bersih, Jetpack Compose mengurangi jumlah kode yang dibutuhkan, mempercepat proses pengembangan.
3. Kotlin-First. Jetpack Compose sepenuhnya dibangun dengan Kotlin, memanfaatkan fitur-fitur seperti null safety dan pemrograman fungsional.
4. Live Preview. Fitur live preview di Android Studio memungkinkan pengembang melihat perubahan UI secara langsung tanpa perlu menjalankan aplikasi.
5. Reusabilitas Komponen. Komponen UI yang dibangun dengan Compose mudah untuk digunakan kembali, menjadikan aplikasi lebih modular dan mudah dikelola.
6. Interoperabilitas dengan XML. Jetpack Compose dapat digunakan berdampingan dengan tampilan berbasis XML, memungkinkan transisi bertahap ke Compose.

Implementasi Sederhana

Untuk implementasi sederhana, saya memberikan contoh kode dasar menggunakan Jetpack Compose untuk menampilkan sebuah teks sederhana, seperti "Hello Android!", yang ditampilkan di tengah layar. Berikut adalah contoh implementasi yang sederhana:

1. Buka Android studio setelah instalasi selesai.
2. Klik "Start a new Android Studio project".
3. Pada layar pemilihan template, pilih "Empty Compose Activity" dan klik Next.
4. Masukkan nama aplikasi (misalnya, "My Application" atau "HelloAndroid").
5. Tentukan lokasi penyimpanan proyek di sistem Anda.
6. Pilih Language sebagai Kotlin.
7. Pastikan Use AndroidX artifacts dicentang (untuk menggunakan pustaka AndroidX yang modern). 
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.
11. Setelah selesai, Anda akan melihat proyek baru dengan struktur file default yang sudah siap untuk digunakan.
12. Setelah proyek selesai dibangun, buka file MainActivity.kt dan masukkan kode dibawah. 
13. Klik "Run" (ikon hijau di toolbar) untuk menjalankan aplikasi.
14. Pilih Emulator yang sudah Anda siapkan atau sambungkan perangkat fisik Android Anda.
15. Aplikasi akan dibangun dan dijalankan di perangkat atau emulator yang Anda pilih.

MainActivity.kt 

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.*
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
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")
    }
}

Penjelasan Kode

1. MainActivity:
• onCreate: Fungsi utama yang dipanggil ketika aplikasi dijalankan. Di sini kita menyiapkan konten aplikasi menggunakan setContent dan mendefinisikan tampilan menggunakan Jetpack Compose.
• enableEdgeToEdge: Menghilangkan padding default di sekitar layar sehingga tampilan UI lebih luas dan bersih.
2. Scaffold: Struktur dasar aplikasi yang memungkinkan kita untuk menambahkan elemen-elemen seperti AppBar atau BottomBar. Di sini kita menggunakan fillMaxSize() untuk memastikan konten mengisi seluruh layar.
3. Greeting:
• Box: Layout yang memungkinkan kita menempatkan komponen di dalamnya. Di sini, kita menggunakan Box untuk menempatkan teks.
• Text: Menampilkan teks "Hello Android!".
• Modifier.align(Alignment.Center): Memastikan teks "Hello Android!" muncul tepat di tengah layar, baik secara horizontal maupun vertikal.
4. @Preview: Fitur yang memungkinkan kita melihat tampilan UI secara langsung di Android Studio tanpa perlu menjalankan aplikasi di emulator atau perangkat.

Dokumentasi

https://github.com/fairuuz16/ppb-tasks/tree/main/HelloAndroid