Android Academy · Pelajaran

Warna dan MaterialTheme

Terapkan tema yang konsisten.

Pelajaran 4 dari 413 langkah

Warna dan MaterialTheme adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.

Warna di Compose

Compose merepresentasikan warna dengan kelas Color. Tersedia nilai siap pakai seperti Color.Red dan Color.Blue.

Anda meneruskan Color ke parameter seperti warna Text atau latar belakang.

Text(
    text = "Hi",
    color = Color.Blue
)

Nilai Warna Kustom

Buat warna apa pun dari kode heksadesimal menggunakan Color(0xFFRRGGBB). Dua digit pertama, FF, berarti sepenuhnya buram.

Contohnya, 0xFF6200EE adalah warna ungu.

val purple = Color(0xFF6200EE)
Text("Brand", color = purple)

Warna Latar Belakang

Gunakan modifier background untuk memberi warna di belakang composable. Tambahkan padding agar konten tidak menyentuh tepi.

Urutan itu penting: background lalu padding akan mengisi area padding.

Text(
    text = "Box",
    modifier = Modifier
        .background(Color.Yellow)
        .padding(8.dp)
)

Apa Itu MaterialTheme?

MaterialTheme adalah sistem yang menyimpan warna, font, dan bentuk aplikasi Anda di satu tempat.

Composable membacanya sehingga seluruh aplikasi tetap konsisten dan mudah diubah gayanya.

MaterialTheme {
    Text("Themed app")
}

Skema Warna Tema

colorScheme milik tema menyediakan peran bernama seperti primary, secondary, dan background.

Membaca peran-peran ini, bukan menggunakan warna tetap, memungkinkan Anda mengubah tampilan di satu tempat.

Text(
    text = "Primary",
    color = MaterialTheme.colorScheme.primary
)

Primary dan onPrimary

Setiap warna utama memiliki pasangan on untuk teks yang digambar di atasnya, seperti onPrimary.

Menggunakan primary sebagai latar belakang dan onPrimary sebagai teks menjamin kontras yang mudah dibaca.

Box(
    Modifier.background(MaterialTheme.colorScheme.primary)
) {
    Text("Label", color = MaterialTheme.colorScheme.onPrimary)
}

Tipografi Tema

MaterialTheme juga menyimpan gaya teks di dalam typography, seperti titleLarge dan bodyMedium.

Teruskan salah satunya ke gaya Text agar teks konsisten dan berukuran sesuai.

Text(
    text = "Heading",
    style = MaterialTheme.typography.titleLarge
)

Skema Terang dan Gelap

Anda dapat membuat skema dengan lightColorScheme() atau darkColorScheme(), lalu meneruskannya ke MaterialTheme.

Beralih antar-skema memungkinkan aplikasi mendukung mode terang dan gelap.

MaterialTheme(
    colorScheme = darkColorScheme()
) {
    Text("Dark mode")
}

Menyesuaikan Skema

Ganti peran dengan menamainya saat membuat skema. Di sini, primary menjadi warna teal kustom.

Semua bagian yang membaca colorScheme.primary akan diperbarui secara otomatis.

val scheme = lightColorScheme(
    primary = Color(0xFF018786)
)

Mengapa Menggunakan Tema?

Menetapkan warna secara langsung di banyak tempat membuat desain ulang menjadi sulit. Membaca dari MaterialTheme berarti satu perubahan akan memperbarui seluruh aplikasi.

Ini juga membantu aksesibilitas karena warna on mempertahankan kontras yang baik.

Surface dan Latar Belakang

Composable Surface menerapkan warna latar belakang tema dan elevasi di belakang kontennya.

Ini adalah cara yang rapi untuk memberi kartu atau layar warna dasar yang tepat.

Surface(
    color = MaterialTheme.colorScheme.background
) {
    Text("On surface")
}

Pemeriksaan Singkat

Uji pengetahuan Anda tentang warna dan tema.

Jawab di pelajaran interaktif

Rangkuman

Anda telah mempelajari cara menggunakan kelas Color, warna heksadesimal kustom, dan modifier background. MaterialTheme mengelompokkan colorScheme, typography, dan bentuk.

Membaca peran seperti primary dan onPrimary menjaga kontras serta konsistensi, dan mendukung skema terang maupun gelap.

Kerja bagus karena telah menyelesaikan kursus penataan gaya!

Gratis untuk memulai

Belajar Kotlin dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 36
Pelajaran: 152

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Warna dan MaterialTheme” gratis?

Ya — teks lengkap “Warna dan MaterialTheme” 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 “Warna dan MaterialTheme”?

Terapkan tema yang konsisten. 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 4 dari 4.

Berapa lama pelajaran “Warna dan MaterialTheme” 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