Jetpack Compose 3 — Membangun Aplikasi Sederhana dengan Composable “Text”

13 min readMar 3, 2024

Dalam codelab ini, kita akan menggunakan Jetpack Compose untuk membuat aplikasi Android sederhana yang menampilkan pesan ulang tahun di layar.

Prasyarat:

Pengalaman membuat aplikasi di Android Studio.
Kemampuan menjalankan aplikasi di emulator atau perangkat Android.

Yang Akan Dipelajari:

Menulis fungsi komposable, seperti Text, Column, dan Row.
Menampilkan teks di aplikasi dalam tata letak.
Memformat teks, seperti mengubah ukuran teks.

Yang Akan Dibangun:

Aplikasi Android yang menampilkan ucapan ulang tahun dalam format teks, dengan tampilan mirip screenshot berikut:

Yang Dibutuhkan:

Komputer dengan Android Studio terinstal.

1. Menyiapkan Aplikasi Happy Birthday

Dalam tugas ini, kita akan menyiapkan proyek di Android Studio menggunakan template Empty Activity dan mengubah pesan teks menjadi ucapan ulang tahun yang personal.

Membuat Project Empty Activity

Pada dialog Welcome to Android Studio, pilih New Project.
Pada dialog New Project, pilih Empty Activity, lalu klik Next.
Isi kolom Name dengan Happy Birthday, pilih level API minimum 24 (Nougat) di kolom Minimum SDK, dan klik Finish.

Tunggu hingga Android Studio membuat file proyek dan membangun proyek tersebut.
Klik Run ‘app’.

Aplikasi akan muncul seperti gambar berikut:

Ketika membuat aplikasi Happy Birthday menggunakan template Empty Activity, Android Studio akan menyiapkan sumber daya untuk aplikasi Android dasar dengan pesan “Hello Android!” di layar. Kita akan mempelajari cara menampilkan pesan tersebut, mengubahnya menjadi ucapan ulang tahun, dan menambah serta memformat pesan tambahan.

Apa itu Antarmuka Pengguna (UI)?

Antarmuka Pengguna atau User Interface (UI) aplikasi adalah tampilan visual yang terlihat di layar: teks, gambar, tombol, dan berbagai elemen lainnya, serta cara elemen tersebut diletakkan di layar. Ini adalah cara aplikasi menampilkan informasi kepada pengguna dan cara pengguna berinteraksi dengan aplikasi.

Contoh UI

Tombol yang bisa diklik, pesan teks dalam kartu, dan kolom input teks adalah contoh dari elemen-elemen UI. Hampir semua yang terlihat di layar aplikasi adalah elemen UI, baik yang bersifat interaktif maupun dekoratif.

Latihan

Pada aplikasi berikut, cobalah temukan komponen UI sebanyak mungkin.

Adapun link yang dapat dijadikan sebagai referensi nama komponen UI yang terdapat pada Jetpack Compose adalah sebagai berikut:

Material Components | Jetpack Compose | Android Developers

Material components allow you to build detailed interfaces in line with Material Design principles.

developer.android.com

Jetpack Compose — Material Design 3

Start building with Jetpack Compose

m3.material.io

2. Apa itu Jetpack Compose?

Jetpack Compose adalah toolkit modern untuk membangun antarmuka pengguna (UI) Android. Compose menyederhanakan dan mempercepat pengembangan UI di Android dengan kode yang lebih sedikit, alat canggih, dan kemampuan Kotlin yang intuitif. Dengan Compose, kamu dapat membangun UI dengan menentukan sekumpulan fungsi, yang disebut fungsi composable, untuk mengambil dan menampilkan data di layar.

Fungsi Composable

Fungsi composable adalah elemen dasar dalam membangun UI di Compose. Fungsi ini memiliki beberapa karakteristik penting:

Menjelaskan bagian-bagian dari UI.
Tidak menampilkan elemen apa pun secara langsung.
Mengambil input dan menghasilkan elemen yang akan ditampilkan di layar.

Anotasi

Anotasi digunakan untuk melampirkan informasi tambahan ke kode. Pada Compose, anotasi seperti @Composable digunakan untuk memberi tahu compiler dan pengembang lain bahwa suatu fungsi adalah fungsi composable. Contohnya dapat dilihat pada cuplikan kode berikut:

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

Anotasi dengan Parameter

Anotasi juga dapat memiliki parameter untuk memberikan informasi tambahan. Contoh penggunaannya dapat dilihat dalam pratinjau berikut:

Anotasi dengan parameter untuk melihat pratinjau latar belakang

Anotasi untuk menambahkan judul pratinjau

“Preview” adalah sebuah anotasi yang berfungsi untuk menampilkan preview aplikasi tanpa harus menjalankannya di perangkat android maupun emulator. Adapun syaratnya adalah kita harus build project minimal satu kali agar tampilan preview dapat muncul. Berikut adalah contoh lain dalam paramaeter @Preview.

Contoh Fungsi Composable

Fungsi composable dapat dianotasi dengan @Composable dan digunakan untuk merender elemen UI. Misalnya, fungsi Greeting menerima nama sebagai parameter dan menampilkan pesan sapaan di layar.

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

Dalam pengembangan UI dengan Compose, penting untuk memberi nama fungsi composable dengan menggunakan Pascal case sesuai dengan konvensi penamaan. Ini membantu menjelaskan fungsi atau tujuan dari fungsi tersebut.

Nama Fungsi Composable

Fungsi composable yang tidak menampilkan elemen dan menggunakan anotasi @Composable harus diberi nama menggunakan PascalCase (kata awal huruf kapital) bukan camelCase. Hal ini penting untuk menjaga konsistensi dan kejelasan dalam penamaan fungsi. Contoh penamaan yang benar dapat dilihat dalam contoh berikut:

@Composable
fun FancyButton(text: String) {}

@Composable
fun BackButtonHandler() {}

Dengan menggunakan Jetpack Compose, kita dapat membuat UI Android dengan lebih efisien dan ekspresif menggunakan pendekatan berbasis fungsi composable.

3. Panel Desain di Android Studio

Android Studio memungkinkan kamu melihat pratinjau fungsi composable langsung dalam IDE, tanpa perlu menginstal aplikasi ke perangkat Android atau emulator. Seperti yang telah dibahas sebelumnya, pratinjau tampilan aplikasi dapat dilihat melalui panel Design di Android Studio.

Fungsi composable harus menyediakan nilai default untuk setiap parameter agar dapat dipratinjau. Oleh karena itu, sebaiknya jangan lihat pratinjau fungsi Greeting() secara langsung. Sebagai gantinya, tambahkan fungsi lain, misalnya BirthdayCardPreview(), yang akan memanggil fungsi Greeting() dengan parameter yang sesuai.

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        Greeting("James")
    }
}

Tips: Klik Split untuk melihat kode dan pratinjau desain.

Untuk melihat pratinjau:

Pada fungsi BirthdayCardPreview(), ubah argumen “James” pada fungsi Greeting() menjadi nama kamu.

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        Greeting("Nama Kamu")
    }
}

Build kode-mu. Pratinjau akan otomatis diperbarui.

Penting: Kode yang ditambahkan ke fungsi BirthdayCardPreview() dengan anotasi @Preview hanya berfungsi sebagai pratinjau di panel Design di Android Studio. Perubahan ini tidak diterapkan di aplikasi. Cara melakukan perubahan pada aplikasi akan dipelajari pada bagian selanjutnya dalam codelab ini.

4. Menambahkan Elemen Teks Baru

Dalam tugas ini, kita akan mengganti salam “Hello $name!” dan menambahkan ucapan ulang tahun.

Menambahkan Fungsi Composable Baru

Dalam file MainActivity.kt, hapus definisi fungsi Greeting(). Kita akan menambahkan fungsi sendiri untuk menampilkan ucapan di codelab nanti.

Hapus kode berikut:

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

Dalam fungsi onCreate(), perhatikan bahwa panggilan fungsi Greeting() sekarang berwarna merah, menunjukkan error.

Hapus panggilan fungsi ini dan argumennya dari fungsi onCreate() dan BirthdayCardPreview(). File MainActivity.kt akan terlihat seperti ini:

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

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
    }
}

Sebelum fungsi BirthdayCardPreview(), tambahkan fungsi baru bernama GreetingText(). Jangan lupa untuk menambahkan anotasi @Composable sebelum fungsi.

@Composable
fun GreetingText() {
}

Praktik terbaiknya adalah membuat Composable kamu menerima parameter Modifier, dan meneruskan modifier tersebut ke turunannya. Tambahkan parameter Modifier ke fungsi GreetingText():

@Composable
fun GreetingText(modifier: Modifier = Modifier) {
}

Tambahkan parameter message bertipe String ke fungsi composable GreetingText():

@Composable
fun GreetingText(message: String, modifier: Modifier = Modifier) {
}

Di dalam fungsi GreetingText(), tambahkan composable Text yang menerima pesan teks sebagai argumen yang telah diberi nama:

@Composable
fun GreetingText(message: String, modifier: Modifier = Modifier) {
    Text(
        text = message
    )
}

Fungsi GreetingText() ini menampilkan teks di UI dengan memanggil fungsi composable Text().

Melihat Pratinjau Fungsi

Dalam tugas ini, kamu akan melihat pratinjau fungsi GreetingText() di panel Design.

Panggil fungsi GreetingText() di dalam fungsi BirthdayCardPreview() dan teruskan argumen String yang berisi ucapan ulang tahun untuk teman kamu. Kamu juga dapat menambahkan nama jika diinginkan, misalnya "Selamat Ulang Tahun Sam!".

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        GreetingText(message = "Happy Birthday Sam!")
    }
}

Panel Design akan diperbarui secara otomatis. Lihat pratinjau perubahan-mu.

5. Mengubah Ukuran Font

Kamu telah menambahkan teks ke antarmuka pengguna, tetapi belum mencapai tampilan aplikasi final. Dalam tugas ini, akan dipelajari cara mengubah ukuran, warna teks, dan atribut lain yang memengaruhi tampilan elemen teks. Kamu juga dapat bereksperimen dengan berbagai ukuran dan warna font.

Scalable Pixels (SP) dan Ukuran Font

Scalable Pixels (SP) adalah satuan ukuran untuk ukuran font. Elemen UI di aplikasi Android menggunakan dua unit pengukuran yang berbeda: Density-independent Pixels (DP) untuk tata letak, dan Scalables Pixels (SP). Secara default, unit SP memiliki ukuran yang sama dengan unit DP, tetapi ukurannya dapat diubah berdasarkan ukuran teks pilihan pengguna di setelan ponsel.

Di dalam file MainActivity.kt, scroll ke dalam fungsi GreetingText() yang berisi composable Text().
Teruskan argumen fontSize ke fungsi Text() sebagai argumen kedua yang telah diberi nama dan tetapkan nilai 100.sp.

Text(
    text = message,
    fontSize = 100.sp
)

Android Studio menandai kode .sp, karena perlu mengimpor beberapa class atau properti agar aplikasi dapat dikompilasi.

Klik .sp yang ditandai oleh Android Studio, dan klik “Import” pada pop-up untuk mengimpor androidx.compose.ui.unit.sp agar dapat menggunakan properti ekstensi .sp.

Catatan: Library AndroidX (Android Extension) berisi kumpulan library dan class yang membantu mempercepat pengembangan aplikasi dengan menyediakan fungsi inti.

Scroll ke bagian atas file dan pastikan terdapat pernyataan import yang mencakup androidx.compose.ui.unit.sp. Ini menandakan bahwa Android Studio telah menambahkan paket tersebut ke dalam file.

Catatan: Jika terdapat masalah dengan pengimporan menggunakan Android Studio, kamu dapat menambahkan impor secara manual di bagian atas file.

Perhatikan pratinjau ukuran font yang telah diperbarui. Jika terjadi tumpang tindih, kamu perlu menentukan tinggi baris.

Catatan: .sp adalah properti ekstensi untuk Int, yang membuat unit sp. Kamu dapat menggunakan properti ekstensi .sp pada jenis data lain, seperti Float dan Double.

Perbarui composable Text untuk menyertakan tinggi baris.

@Composable
fun GreetingText(message: String, modifier: Modifier = Modifier) {
    Text(
        text = message,
        fontSize = 100.sp,
        lineHeight = 116.sp,
    )
}

Sekarang, kamu dapat bereksperimen dengan berbagai ukuran font.

6. Menambahkan Elemen Teks Lainnya

Pada tugas sebelumnya, kita sudah menambahkan pesan ucapan ulang tahun untuk teman. Dalam tugas ini, kita akan menandatangani kartu dengan nama kalian.

Di dalam file MainActivity.kt, scroll ke fungsi GreetingText().
Tambahkan parameter from bertipe String ke fungsi untuk menyertakan nama pengirim.

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Text(
        // ...
    )
    Text(
        text = from,
        fontSize = 36.sp
    )
}

Scroll ke fungsi BirthdayCardPreview(). Tambahkan argumen String lain untuk menandatangani kartu, contohnya “From Emma”.

@Preview(showBackground = true)
@Composable
fun BirthdayCardPreview() {
    HappyBirthdayTheme {
        GreetingText(message = "Happy Birthday Sam!", from ="From Emma")
    }
}

Pratinjau akan menunjukkan tampilan yang telah diperbarui.

Fungsi composable mampu menjelaskan beberapa elemen UI. Tetapi, jika tidak memberikan panduan tentang cara mengaturnya, Compose mungkin mengatur elemen secara tidak sesuai dengan keinginan. Sebagai contoh, kode sebelumnya menghasilkan dua elemen teks yang tumpang tindih satu sama lain karena tidak ada panduan mengenai pengaturan kedua composable tersebut.

Pada tugas berikutnya, kalian akan mempelajari cara mengatur composable dalam baris dan kolom.

7. Mengatur Elemen Teks dalam Baris dan Kolom

Dalam tugas sebelumnya, kalian sudah menambahkan pesan ucapan ulang tahun untuk teman. Dalam tugas ini, kalian akan menandatangani kartu dengan nama kalian.

Hierarki UI

Pada bagian ini, kita akan mempelajari composable Column, Row, dan Box yang dapat bertindak sebagai elemen UI induk (parent). Sementara itu, kita akan menempatkan elemen lain seperti Text di dalamnya sebagai turunan (child).

Ketiga komponen tersebut adalah elemen tata letak (layout) standar di Compose. Kita akan mempelajari Box pada codelab selanjutnya.

Di dalam file MainActivity.kt, scroll ke fungsi GreetingText(). Tambahkan composable Row di sekitar elemen teks agar baris dengan dua elemen teks dapat ditampilkan. Pilih dua composable Text, klik bohlam. Pilih Surround with widget > Surround with Row.

Sekarang fungsi ini akan terlihat seperti cuplikan kode ini:

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Row {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp,
        )
        Text(
            text = from,
            fontSize = 36.sp
        )
    }
}

Android Studio otomatis mengimpor fungsi Row untuk Anda. Scroll ke atas, lalu perhatikan bagian impor. import androidx.compose.foundation.layout.Row seharusnya telah ditambahkan.
Amati pratinjau yang telah diperbarui di panel Design. Ubah ukuran font pesan ulang tahun menjadi 30.sp untuk sementara. Ucapan ulang tahun dan nama pengirim ditampilkan berdampingan dalam satu baris.

Elemen Text akan ditampilkan berdampingan di layar, seperti inilah cara kerja Row.

Pratinjau terlihat jauh lebih baik karena tidak tumpang-tindih. Namun, ini bukanlah yang kalian inginkan karena tidak ada ruang untuk menuliskan nama pengirim. Pada tugas berikutnya, kalian dapat mengatur elemen teks dalam kolom untuk mengatasi masalah ini.

Mengatur Elemen Teks dalam Kolom

Dalam tugas ini, giliran kalian untuk mengubah fungsi GreetingText() untuk mengatur elemen teks dalam kolom. Pratinjau akan terlihat seperti screenshot ini:

Setelah kalian mencoba melakukannya sendiri, jangan ragu untuk membandingkan kode kalian dengan kode solusi dalam cuplikan ini:

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp
        )
        Text(
            text = from,
            fontSize = 36.sp
        )
    }
}

Perhatikan paket yang diimpor otomatis oleh Android Studio:

import androidx.compose.foundation.layout.Column

Ingat kembali bahwa kalian perlu meneruskan parameter pengubah ke elemen turunan dalam composable. Artinya, kalian perlu meneruskan parameter pengubah ke composable Column.

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(modifier = modifier) {
        Text(
            text = message,
            fontSize = 100.sp,
            lineHeight = 116.sp
        )
        Text(
            text = from,
            fontSize = 36.sp
        )
    }
}

8. Menambahkan Ucapan ke Aplikasi

Setelah kalian puas dengan pratinjau, kini saatnya menambahkan composable ke aplikasi di perangkat atau emulator.

Di dalam file MainActivity.kt, scroll ke fungsi onCreate(). Panggil fungsi GreetingText() dari blok Surface. Teruskan fungsi GreetingText(), ucapan ulang tahun, dan nama pengirim. Fungsi onCreate() yang telah selesai akan terlihat seperti cuplikan kode ini:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            HappyBirthdayTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    GreetingText(message = "Happy Birthday Sam!", from = "From Emma")
                }
            }
        }
    }
}

Build dan jalankan aplikasi kalian di emulator.

Menyejajarkan Ucapan ke Tengah

Untuk menyejajahkan ucapan di tengah layar, tambahkan parameter yang disebut verticalArrangement, tetapkan ke Arrangement.Center. Kalian akan mempelajari verticalArrangement lebih lanjut di codelab berikutnya.

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier
    ) {
        // ...
    }
}

Tambahkan padding 8.dp di sekitar kolom. Sebaiknya gunakan nilai padding dengan penambahan 4.dp.

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier.padding(8.dp)
    ) {
        // ...
    }
}

Untuk mempercantik aplikasi, sejajarkan teks ucapan ke tengah menggunakan textAlign.

Text(
    text = message,
    fontSize = 100.sp,
    lineHeight = 116.sp,
    textAlign = TextAlign.Center
)

Dalam screenshot di atas, hanya ucapan yang disejajahkan di tengah karena parameter textAlign. Tanda tangan, From Emma memiliki perataan default kiri.

Tambahkan padding ke tanda tangan dan sejajarkan di sebelah kanan.

Text(
    text = from,
    fontSize = 36.sp,
    modifier = Modifier
        .padding(16.dp)
        .align(alignment = Alignment.End)
)

Menerapkan Praktik Baik

Sebaiknya teruskan atribut pengubah beserta pengubah dari composable induk. Perbarui parameter pengubah di GreetingText() sebagai berikut:

onCreate()

Surface(
    //...
) {
    GreetingText(
        message = "Happy Birthday Sam!",
        from = "From Emma",
        modifier = Modifier.padding(8.dp)
    )
}

GreetingText()

@Composable
fun GreetingText(message: String, from: String, modifier: Modifier = Modifier) {
    Column(
        verticalArrangement = Arrangement.Center,
        modifier = modifier
    ) {
        // ...
    }
}

Build dan jalankan aplikasi kalian di emulator untuk melihat hasil akhir.

9. Kesimpulan

Kalian telah berhasil membuat aplikasi Selamat Ulang Tahun.

Pada codelab selanjutnya, kita akan menambahkan gambar ke aplikasi dan mengubah perataan elemen teks untuk membuatnya lebih menarik.

Ringkasan

Jetpack Compose merupakan toolkit modern untuk membangun UI Android. Jetpack Compose memberikan kemudahan dan percepatan dalam pengembangan UI di Android dengan kode yang lebih sedikit, alat canggih, dan API Kotlin yang intuitif.
User Interface (UI) aplikasi adalah tampilan visual yang terlihat di layar, termasuk teks, gambar, tombol, dan berbagai elemen lainnya.
Fungsi composable adalah elemen penyusun dasar Compose. Fungsi composable digunakan untuk mendeskripsikan bagian-bagian UI Anda.
Fungsi composable diberi anotasi @Composable; anotasi ini memberi tahu compiler Compose bahwa fungsi tersebut dimaksudkan untuk mengonversi data menjadi UI.
Tiga elemen tata letak standar dan dasar di Compose adalah Column, Row, dan Box. Ketiga elemen tersebut adalah fungsi Composable yang menggunakan konten Composable, memungkinkan penempatan item di dalamnya. Sebagai contoh, setiap turunan dalam Row akan ditempatkan berdampingan secara horizontal.

Disclaimer: All the information above has been sourced from developer.android.com with minor enhancements to aid Indonesian readers in better comprehension for educational purposes.