Tugas 2 - Dasar-dasar Jetpack Compose

Belajar Dasar-Dasar Jetpack Compose: Menampilkan Hello World

Jetpack Compose merupakan toolkit modern untuk pengembangan antarmuka pengguna yang mengutamakan kesederhanaan dan efisiensi. Dengan mengintegrasikan pemrograman reaktif dan keunggulan bahasa Kotlin, Compose memungkinkan developer untuk mendefinisikan UI secara deklaratif melalui fungsi-fungsi yang mengubah data menjadi struktur tampilan. Ketika data berubah, framework secara otomatis memperbarui UI tanpa perlu intervensi manual.

Aplikasi yang dibangun dengan Compose terdiri dari fungsi-fungsi yang ditandai dengan anotasi @Composable. Fungsi-fungsi ini berperan sebagai blok bangunan utama, dapat memanggil fungsi composable lain, dan membantu memecah antarmuka menjadi bagian-bagian kecil yang dapat digunakan kembali. Pendekatan ini tidak hanya membuat kode lebih terstruktur dan mudah dipelihara, tetapi juga memungkinkan pengembangan komponen UI secara modular.

Kelebihan Jetpack Compose

Jetpack Compose memiliki sejumlah kelebihan dibandingkan pendekatan tradisional dalam pembuatan UI di Android:

• Desain Deklaratif: Dengan pendekatan deklaratif, kita dapat langsung menyatakan tampilan UI berdasarkan keadaan (state). Hal ini membuat kode lebih mudah dibaca dan dipelihara.
• Kode Lebih Ringkas: Mengurangi boilerplate code, sehingga memungkinkan pengembangan yang lebih cepat dan efisien.
• Integrasi dengan Kotlin: Compose didesain untuk bekerja secara mulus dengan bahasa Kotlin, memanfaatkan fitur-fitur modern yang dimilikinya.
• Preview yang Interaktif: Fitur @Preview memungkinkan developer untuk melihat tampilan UI secara langsung di Android Studio, mempercepat iterasi desain.
• Material Design Terintegrasi: Komponen Material3 yang tersedia membantu developer untuk membuat antarmuka yang modern dan konsisten dengan pedoman desain Google.

Di sini, kita akan membahas bagaimana cara menampilkan pesan "Hello World" menggunakan Jetpack Compose. Penjelasan akan dibagi menjadi beberapa bagian, yaitu: package, import, class MainActivity, dan composable.

Penjelasan Kode

1. Package

package com.example.myapplication

Bagian package com.example.myapplication merupakan deklarasi package yang mengelompokkan kelas-kelas di dalam aplikasi. Package ini membantu dalam mengorganisasi kode dan mencegah konflik nama dengan library lain.

2. Import

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.MyApplicationTheme

Baris import mendatangkan fungsi, kelas, dan komponen dari pustaka (library) Android dan Jetpack Compose yang diperlukan untuk membuat antarmuka pengguna. Contohnya:

• androidx.activity.ComponentActivity: Kelas dasar untuk aktivitas yang mendukung komposisi.
• androidx.activity.compose.setContent: Fungsi yang memungkinkan kita untuk menetapkan konten UI dengan Jetpack Compose.
• androidx.compose.material3.*: Komponen Material Design versi 3 yang digunakan untuk styling dan layout UI.
• androidx.compose.runtime.Composable: Anotasi untuk menandai fungsi yang menghasilkan UI secara deklaratif.

3. Class MainActivity

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

MainActivity merupakan titik masuk (entry point) aplikasi Android. Pada fungsi onCreate:

• Fungsi setContent menggantikan layout tradisional dengan kode Jetpack Compose. Ini memungkinkan kita untuk langsung membuat UI secara deklaratif.
• MyApplicationTheme digunakan untuk menerapkan tema secara keseluruhan sehingga UI konsisten dengan desain Material.
• Komponen Surface berfungsi sebagai kontainer dengan modifier fillMaxSize() yang memastikan elemen mengisi seluruh layar, serta menetapkan background berdasarkan tema.
• Di dalam Surface, fungsi Greeting("Android") dipanggil untuk menampilkan teks "Hello Android!".

4. Fungsi Composable

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

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

Fungsi yang diberi anotasi @Composable adalah fungsi yang digunakan untuk membangun UI secara deklaratif:

• Greeting: Menerima parameter name dan menampilkan teks "Hello <name>!" menggunakan komponen Text.
• GreetingPreview: Fungsi ini diberi anotasi @Preview sehingga Android Studio dapat menampilkan preview dari UI yang telah dibuat. Preview ini membantu developer untuk melihat hasil UI secara langsung tanpa harus menjalankan aplikasi di perangkat atau emulator.

Voila! Hasil outputnya akan menjadi seperti berikut:

Kesimpulan

Dengan Jetpack Compose, pembuatan antarmuka pengguna menjadi lebih intuitif dan efisien. Melalui pendekatan deklaratif, developer dapat dengan mudah mengekspresikan tampilan UI yang dinamis dan responsif. Codelab dasar ini memberikan gambaran awal tentang bagaimana membuat aplikasi Android yang sederhana dengan menampilkan pesan "Hello World" menggunakan Jetpack Compose.