Jetpack Compose, Android • 17 Mei 2024

Jetpack Compose - OutlinedButton

Penting

Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE

Pengertian

OutlinedButton adalah salah satu jenis button di Jetpack Compose yang menampilkan teks dengan border luar tanpa latar belakang. Ini adalah pilihan yang baik ketika Anda ingin membuat button dengan tampilan yang lebih ringan atau untuk menonjolkan button di atas latar belakang yang kompleks.

Kapan Harus Menggunakan OutlinedButton:

Desain Minimalis: Cocok digunakan jika Anda ingin button dengan tampilan yang lebih sederhana dan ringan.
Mempertahankan Keterbacaan: Berguna ketika Anda ingin menjaga keterbacaan teks button pada latar belakang yang sibuk.
Pilihan Sekunder: Bisa digunakan untuk menunjukkan aksi sekunder yang kurang menonjol dibandingkan dengan Button biasa.

Perbedaan dengan Button:

Tampilan: OutlinedButton memiliki border luar dan tidak memiliki latar belakang, sementara Button biasa memiliki latar belakang dan tidak memiliki border.
Estetika: OutlinedButton memberikan tampilan yang lebih ringan dan minimalis, sementara Button biasa memberikan tampilan yang lebih mencolok dengan latar belakang berwarna.
Penggunaan: Gunakan OutlinedButton ketika Anda ingin membuat button dengan penampilan yang lebih sederhana atau sebagai alternatif dari Button biasa di dalam desain aplikasi Anda.

Anda dapat menggunakan OutlinedButton untuk menambahkan aksi interaktif dalam aplikasi Anda tanpa mengganggu desain visual yang ada.

Parameter/Atribut

@Composable
fun OutlinedButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    shape: Shape = ButtonDefaults.outlinedShape,
    colors: ButtonColors = ButtonDefaults.outlinedButtonColors(),
    elevation: ButtonElevation? = null,
    border: BorderStroke? = ButtonDefaults.outlinedButtonBorder,
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable RowScope.() -> Unit
)

onClick: () -> Unit

Sebuah lambda yang akan dipanggil ketika pengguna mengklik button. Anda harus menentukan aksi atau fungsi yang akan dijalankan ketika button ditekan.

modifier: Modifier = Modifier

Modifier untuk menyesuaikan tampilan dan perilaku dari button. Dengan menggunakan modifier, Anda dapat mengatur hal-hal seperti padding, margin, ukuran, warna latar belakang, dan tata letak dari button.

enabled: Boolean = true

Menentukan apakah button dapat digunakan atau tidak. Jika true, button dapat ditekan (aktif). Jika false, button tidak dapat ditekan (non-aktif).

shape: Shape = ButtonDefaults.outlinedShape

Bentuk dari button. Anda dapat menggunakan nilai bawaan ButtonDefaults.outlinedShape atau menyediakan bentuk kustom sesuai kebutuhan desain aplikasi Anda.

colors: ButtonColors = ButtonDefaults.outlinedButtonColors()

Warna dari button dalam berbagai keadaan, seperti warna border dan warna teks. Anda dapat menggunakan nilai bawaan ButtonDefaults.outlinedButtonColors() atau menyediakan warna kustom sesuai kebutuhan desain aplikasi Anda.

elevation: ButtonElevation? = null

Elevasi dari button ketika ditekan. Elevasi menentukan seberapa jauh button akan "melayang" di atas permukaan. Jika null, button tidak akan memiliki elevasi.

border: BorderStroke? = ButtonDefaults.outlinedButtonBorder

Garis tepi (border) dari button. Anda dapat menentukan ketebalan garis dan warna dari border menggunakan objek BorderStroke. Jika menggunakan ButtonDefaults.outlinedButtonBorder, Anda akan mendapatkan border dengan ketebalan default.

contentPadding: PaddingValues = ButtonDefaults.ContentPadding

Padding (jarak dalam) dari konten di dalam button. Anda dapat menggunakan nilai bawaan ButtonDefaults.ContentPadding atau menyesuaikan padding sesuai kebutuhan desain aplikasi Anda.

interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }

Objek untuk menangani interaksi pengguna seperti sentuhan, klik, dan hover. Anda dapat menggunakan nilai bawaan MutableInteractionSource() atau menyediakan objek interaksi kustom.

content: @Composable RowScope.() -> Unit

Lambda untuk mendefinisikan konten dari button. Ini memungkinkan Anda untuk menambahkan komponen-komponen ke dalam button, seperti teks, ikon, atau elemen UI lainnya, dan mengatur tata letak serta perilaku mereka dalam button.

Contoh

@Composable
fun DemoOutlinedButton(modifier: Modifier = Modifier) {
    OutlinedButton(onClick = {
        Log.d("Tag", "DemoButton: The Ngoding")
    }) {
        Text(text = "Click Me")
    }
}