Android Academy · Pelajaran

Teks, Gambar, dan Tombol

Gunakan composable bawaan yang utama.

Teks, Gambar, dan Tombol adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Composable Bawaan

Compose menyediakan composable siap pakai untuk UI umum. Tiga composable yang akan sering Anda gunakan adalah Text, Image, dan Button.

Composable Text

Text menampilkan string. Parameter terpentingnya adalah text.

@Composable
fun Title() {
    Text(text = "My App")
}

Memberi Gaya pada Teks

Text menerima banyak parameter gaya seperti fontSize, color, dan fontWeight.

Text(
    text = "Big Bold",
    fontSize = 24.sp,
    color = Color.Blue,
    fontWeight = FontWeight.Bold
)

sp vs dp

Ukuran font menggunakan .sp (piksel yang tidak bergantung skala) agar mengikuti pengaturan aksesibilitas ukuran font pengguna. Ukuran tata letak menggunakan .dp (piksel yang tidak bergantung kepadatan).

Gunakan sp untuk teks, dp untuk yang lainnya.

Composable Image

Image menampilkan gambar. Gunakan painterResource untuk memuat drawable, dan selalu sediakan contentDescription untuk aksesibilitas.

Image(
    painter = painterResource(id = R.drawable.logo),
    contentDescription = "App logo"
)

contentDescription

contentDescription dibacakan oleh pembaca layar. Untuk gambar dekoratif yang tidak memiliki makna, berikan null. Untuk gambar yang bermakna, berikan deskripsi singkat.

Composable Button

Button adalah elemen yang dapat diklik. Parameter utamanya adalah onClick, yaitu lambda yang dijalankan saat tombol diketuk. Label tombol ditempatkan di dalam lambda kontennya — biasanya berupa Text.

Button(onClick = { /* do something */ }) {
    Text(text = "Tap me")
}

Merespons Klik

Lambda onClick adalah tempat Anda menulis logika — memperbarui keadaan, berpindah layar, atau memanggil fungsi.

Button(onClick = { println("Clicked!") }) {
    Text(text = "Log")
}

Lambda Konten

Perhatikan bahwa Button menerima lambda konten di bagian akhir. Apa pun yang Anda letakkan di dalamnya akan dirender sebagai konten tombol, sehingga tombol dapat berisi ikon dan teks, bukan hanya label.

Button(onClick = { }) {
    Text(text = "Save")
}

Menggabungkannya

UI nyata menggabungkan composable ini. Di sini, judul, gambar, dan tombol ditumpuk di dalam Column.

@Composable
fun Card() {
    Column {
        Text(text = "Profile")
        Image(
            painter = painterResource(id = R.drawable.avatar),
            contentDescription = "Avatar"
        )
        Button(onClick = { }) { Text("Follow") }
    }
}

Masih Banyak yang Lain

Selain ketiga composable tersebut, Compose menyediakan TextField, Icon, Checkbox, Switch, dan banyak lagi. Polanya tetap sama: teruskan parameter dan lambda konten.

Pemeriksaan Cepat

Parameter Button mana yang menjalankan kode Anda saat pengguna mengetuknya?

Rangkuman

Anda telah mempelajari tiga komposabel inti:

Text — menampilkan string; atur gayanya dengan fontSize, color (gunakan sp).
Image — painterResource + contentDescription.
Button — lambda onClick serta lambda konten.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Teks, Gambar, dan Tombol” gratis?

Ya — teks lengkap “Teks, Gambar, dan Tombol” 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 “Teks, Gambar, dan Tombol”?

Gunakan composable bawaan yang utama. 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 3 dari 4.

Berapa lama pelajaran “Teks, Gambar, dan Tombol” 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.

Semua pelajaran dalam kursus ini

← Kembali ke Android Academy