Tombol dan Klik
Tambahkan tombol interaktif.
Tombol dan Klik adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 4 pelajaran total.
Apa Itu Tombol?
Button adalah composable yang dapat diketuk. Saat pengguna mengetuknya, aplikasi Anda menjalankan kode tertentu.
Tombol memerlukan tindakan onClick dan konten untuk ditampilkan, biasanya label Text.
Button(onClick = { }) {
Text("Tap me")
}Lambda onClick
Parameter onClick menerima lambda, yaitu kode di dalam kurung kurawal { }. Kode tersebut berjalan setiap kali tombol ditekan.
Anda dapat menempatkan logika apa pun di sana, seperti mencetak atau mengubah data.
Button(onClick = {
println("Clicked!")
}) {
Text("Click")
}Konten Tombol
Konten di dalam kurung kurawal penutup adalah RowScope. Anda dapat menempatkan Text, ikon, atau keduanya.
Sebagian besar tombol hanya memuat satu label Text yang menjelaskan tindakan.
Button(onClick = { }) {
Text("Save")
}Menghitung Klik dengan State
Untuk merespons ketukan, simpan nilai dengan remember dan mutableStateOf. Saat nilainya berubah, UI akan diperbarui.
Di sini, setiap ketukan menambahkan satu ke count.
var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
Text("Count: $count")
}Menonaktifkan Tombol
Parameter enabled mengatur apakah sebuah tombol dapat diketuk. Atur ke false untuk membuatnya berwarna abu-abu dan memblokir klik.
Ini berguna saat formulir belum lengkap.
Button(
onClick = { },
enabled = false
) {
Text("Locked")
}OutlinedButton
OutlinedButton hanya menggambar garis tepi tanpa isian. Cara kerjanya sama, tetapi tampilannya lebih ringan.
Gunakan untuk tindakan sekunder di samping Button utama yang lebih menonjol.
OutlinedButton(onClick = { }) {
Text("Cancel")
}TextButton
TextButton hanya menampilkan label tanpa garis tepi atau isian. Ini adalah gaya tombol yang paling ringan.
Cocok digunakan untuk tindakan dengan penekanan rendah seperti Lewati atau Pelajari lebih lanjut.
TextButton(onClick = { }) {
Text("Skip")
}Warna Tombol
Anda dapat mengubah warna Button dengan ButtonDefaults.buttonColors, menggunakan containerColor untuk latar belakang.
Pilih warna yang sesuai dengan merek Anda dan tetap mudah dibaca.
Button(
onClick = { },
colors = ButtonDefaults.buttonColors(
containerColor = Color.Green
)
) {
Text("Go")
}IconButton
IconButton adalah area kecil berbentuk bulat yang dapat diketuk dan ditujukan untuk satu ikon, seperti hati atau menu.
Karena tidak memiliki label, komponen ini menghemat ruang di bilah alat.
IconButton(onClick = { }) {
Icon(Icons.Default.Favorite, contentDescription = "Like")
}Membentuk Tombol
Parameter shape mengubah sudut-sudut tombol. Gunakan RoundedCornerShape dengan nilai dp untuk membuat tepi lebih membulat.
Angka yang lebih besar menghasilkan tombol yang lebih lembut dan menyerupai pil.
Button(
onClick = { },
shape = RoundedCornerShape(16.dp)
) {
Text("Rounded")
}Memberi Nama Fungsi Klik
Agar kode tetap rapi, berikan fungsi bernama kepada onClick, bukan logika langsung di dalamnya. Ini membuat UI lebih mudah dibaca.
Teruskan referensi fungsi tersebut atau panggil fungsi itu di dalam lambda.
fun onSave() { println("Saved") }
Button(onClick = { onSave() }) {
Text("Save")
}Pemeriksaan Singkat
Uji pemahaman Anda tentang tombol.
Rangkuman
Anda telah mempelajari bahwa Button menggunakan onClick untuk tindakannya dan blok konten untuk labelnya. State dengan remember memungkinkan ketukan mengubah UI.
Anda juga telah melihat OutlinedButton, TextButton, IconButton, serta cara mengatur enabled, warna, dan shape.
Selanjutnya, Anda akan mengatur jarak dengan padding.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Tombol dan Klik” gratis?
Ya — teks lengkap “Tombol dan Klik” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Tombol dan Klik”?
Tambahkan tombol interaktif. Kamu berlatih Android Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Android Academy?
Tidak diperlukan pengalaman sebelumnya. Android Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Tombol dan Klik” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Android Academy ini?
Ya. Setiap pelajaran Android Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.