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). Jikafalse
, 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 menggunakanButtonDefaults.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")
}
}
✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i