1. Sebelum memulai
Desain Material adalah sistem desain yang dibuat oleh Google untuk menciptakan pengalaman digital berkualitas tinggi untuk Android, serta platform seluler dan web lainnya. Terinspirasi oleh dunia fisik dan teksturnya, termasuk bagaimana objek memantulkan cahaya dan menimbulkan bayangan. Panduan ini berisi langkah-langkah mem-build UI aplikasi Anda dengan cara yang mudah dibaca, menarik, dan konsisten.
Dalam codelab ini, Anda akan mempelajari Tema Material yang memungkinkan Anda menggunakan Desain Material di aplikasi Anda, dengan panduan tentang penyesuaian warna, tipografi, dan bentuk. Anda dapat menyesuaikan sesedikit atau sebanyak yang Anda inginkan untuk aplikasi Anda. Anda juga akan mempelajari cara menambahkan panel aplikasi atas untuk menampilkan nama dan ikon aplikasi.
Prasyarat
- Pemahaman tentang bahasa Kotlin, termasuk sintaksis, fungsi, dan variabel.
- Mampu mem-build tata letak di Compose, termasuk baris dan kolom dengan padding.
- Dapat membuat daftar sederhana di Compose.
Yang akan Anda pelajari
- Cara menerapkan Tema Material ke aplikasi Compose.
- Cara menambahkan font kustom ke aplikasi Anda.
- Cara menambahkan palet warna kustom ke aplikasi Anda.
- Cara menambahkan bentuk kustom ke elemen di aplikasi Anda.
- Cara menambahkan panel aplikasi atas ke aplikasi Anda.
Yang akan Anda build
- Anda akan membuat aplikasi menarik yang menggabungkan praktik terbaik Desain Material.
Yang Anda butuhkan
- Versi terbaru Android Studio.
- Koneksi internet untuk mendownload kode awal dan font.
2. Menonton video tutorial coding langsung (Opsional)
Jika Anda ingin menonton salah satu instruktur kursus saat tengah menyelesaikan codelab, putar video di bawah.
Sebaiknya luaskan video ke layar penuh (dengan ikon ini di pojok kanan bawah video) agar Anda dapat melihat Android Studio dan kodenya dengan lebih jelas.
Langkah ini opsional. Anda juga dapat melewati video dan langsung memulai petunjuk codelab.
3. Ringkasan aplikasi
Dalam codelab ini, Anda akan membuat Woof, yaitu aplikasi yang menampilkan daftar anjing dan menggunakan Desain Material untuk membuat pengalaman aplikasi yang menarik.
Untuk aplikasi Woof, kami bekerja sama dengan desainer untuk membantu kami mendesainnya, yang mencakup pemilihan palet warna, tipografi, dan bentuk aplikasi. Kami tahu bahwa tidak semua orang memiliki akses ke desainer, namun melalui codelab ini, kami akan menunjukkan kemungkinan menggunakan Tema Material. Gunakan codelab ini untuk menemukan ide tentang cara menggunakan Tema Material untuk meningkatkan tampilan dan nuansa aplikasi yang Anda buat di masa mendatang.
Berikut adalah spesifikasi desain dari desainer yang menjelaskan desain visual aplikasi, baik dalam tema terang maupun tema gelap.
Desain aplikasi:
Tema terang | Tema gelap |
Palet warna
Di bawah ini adalah palet warna untuk tema terang dan gelap yang dipilih desainer.
Terang:
Warna | Nama | Warna heksadesimal | Slot |
Grey50 | #F8F9FA | primer | |
Green50 | #E6F4EA | platform | |
Green100 | #CEEAD6 | latar belakang | |
Grey700 | #5F6368 | sekunder | |
Grey900 | #202124 | onSurface | |
Grey900 | #202124 | onPrimary |
Gelap:
Warna | Nama | Warna heksadesimal | Slot |
White | #FFFFFF | primer | |
Grey100 | #F1F3F4 | onSurface | |
Grey100 | #F1F3F4 | onPrimary | |
Cyan700 | #129EAF | platform | |
Cyan900 | #007B83 | latar belakang | |
Grey900 | #202124 | sekunder |
Tipografi
Di bawah ini adalah font untuk aplikasi, seperti yang dipilih oleh desainer.
Judul | Font | Ketebalan font | Ukuran |
h1 | Normal | 30sp | |
h2 | Tebal | 20sp | |
h3 | Tebal | 14sp | |
body1 | Normal | 14sp |
File tema
File Theme.kt adalah file yang menyimpan semua informasi tentang tema aplikasi, yang ditentukan melalui warna, tipografi, dan bentuk. Anda hanya dapat mengubahnya sekali dalam codelab ini, tetapi ini adalah file yang penting untuk Anda ketahui. Di dalam file terdapat WoofTheme()
composable, yang menetapkan warna, tipografi, dan bentuk aplikasi.
@Composable
fun WoofTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
val colors = if (darkTheme) {
DarkColorPalette
} else {
LightColorPalette
}
MaterialTheme(
colors = colors,
typography = Typography,
shapes = Shapes,
content = content
)
}
Di MainActivity.kt, WoofTheme()
ditambahkan untuk menyediakan Tema Material.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
WoofTheme {
WoofApp()
}
}
}
}
Lihat DefaultPreview()
. WoofTheme()
juga ditambahkan untuk menyediakan Tema Material yang Anda lihat di tab Pratinjau.
@Preview
@Composable
fun DefaultPreview() {
WoofTheme(darkTheme = false) {
WoofApp()
}
}
4. Mendapatkan kode awal
- Buka halaman repositori GitHub yang disediakan untuk project.
- Klik tombol Code. Tindakan ini akan membuka dialog.
- Dalam dialog, klik tab HTTPS, lalu klik
di samping URL untuk menyalinnya. Gunakan URL ini di Android Studio.
- Jika Android Studio tidak terbuka, buka lalu klik Get from VCS di jendela Welcome to Android Studio.
- Jika Android Studio sudah terbuka, pilih File > New > Project from Version Control...
- Di menu Version control pada jendela Get from Version Control, pilih Git.
- Di kotak teks URL, masukkan link yang Anda salin dari halaman repositori GitHub.
- Di menu Directory, pilih direktori tempat Anda ingin meng-clone kode sumber dari repositori GitHub.
- Klik Clone.
- Tunggu Android Studio mendownload dan membuka project.
- Di menu navigasi Android Studio, klik
'Run app', lalu pastikan aplikasi telah di-build seperti yang diharapkan.
- Di menu navigasi, klik Git > Branches...
- Pada dialog Git Branches di bagian Remote Branches, pilih nama cabang yang disediakan sebelumnya, lalu klik Checkout.
- Jika Anda perlu beralih cabang, klik Git > Branches, lalu pilih cabang yang ingin Anda alihkan dan klik Smart Checkout.
Mempelajari kode awal
- Buka kode awal di Android Studio.
- Buka com.example.woof > data > Dog.kt. File ini berisi
Dog data class
yang akan digunakan untuk mewakili foto, nama, usia, dan hobi anjing. File ini juga berisi daftar anjing dan informasi yang akan Anda gunakan sebagai data di aplikasi Anda. - Buka res > drawable. File ini berisi semua aset gambar yang Anda butuhkan untuk project ini, termasuk ikon aplikasi, gambar anjing, dan ikon.
- Buka res > values > strings.xml. File ini berisi string yang Anda gunakan dalam aplikasi ini, termasuk nama aplikasi, nama anjing, deskripsinya, dan lainnya.
- Buka MainActivity.kt. File ini berisi kode untuk membuat daftar sederhana yang menampilkan foto anjing, nama anjing, dan usia anjing tersebut.
WoofApp()
berisiLazyColumn
yang menampilkanDogItems
.DogItem()
berisiRow
yang menampilkan foto anjing dan informasi tentangnya.DogIcon()
menampilkan foto anjing.DogInformation()
berisi nama dan usia anjing.
Memastikan emulator/perangkat Anda bertema terang
Dalam codelab ini, Anda akan menggunakan tema terang dan gelap, tetapi sebagian besar codelab ini menggunakan tema terang. Sebelum memulai, pastikan perangkat/emulator Anda memiliki tema terang.
Untuk melihat aplikasi Anda dalam tema terang, di emulator atau perangkat fisik Anda:
- Buka aplikasi Setelan di perangkat.
- Telusuri Tema Gelap dan klik di dalamnya.
- Jika Tema Gelap aktif, nonaktifkan.
Jalankan kode awal untuk melihat titik awal Anda, yaitu daftar yang menampilkan anjing beserta foto, nama, dan usianya. Meskipun sudah berfungsi, tampaknya tidak bagus, jadi kita akan memperbaikinya.
5. Menambahkan warna
Hal pertama yang akan Anda ubah di aplikasi Woof adalah palet warna.
Palet warna adalah kombinasi warna yang digunakan aplikasi Anda. Kombinasi warna yang berbeda membangkitkan suasana hati yang berbeda, yang memengaruhi perasaan orang saat menggunakan aplikasi Anda. Karena kami bekerja sama dengan desainer untuk aplikasi ini, mereka memilih palet warna untuk kami. Namun, situs Desain Material menyediakan panduan sistem warna sehingga Anda dapat mempelajari lebih lanjut palet warna dan cara membuatnya sendiri.
Saat sebelumnya menambahkan warna di aplikasi Android, Anda menggunakan sesuatu seperti Color.RED
atau Color.PINK
. Bagaimana jika Anda ingin menambahkan warna yang lebih spesifik, seperti biru langit atau hijau giok?
Warna, dalam sistem Android, diwakili oleh nilai warna heksadesimal (hex). Kode warna heksadesimal dimulai dengan tanda pagar (#), dan diikuti dengan enam huruf dan/atau angka yang mewakili komponen merah, hijau, dan biru (RGB) dari warna tersebut. Dua huruf/angka pertama merujuk ke warna merah, dua huruf berikutnya berwarna hijau, dan dua huruf terakhir mengacu pada warna biru.
Warna juga dapat menyertakan nilai alfa—huruf dan/atau angka—yang mewakili transparansi warna (#00 adalah opasitas 0% (transparan sepenuhnya), #FF adalah opasitas 100% (solid sepenuhnya). Jika disertakan, nilai alfa adalah dua karakter pertama dari kode warna heksadesimal setelah tanda pagar (#). Jika nilai alfa tidak disertakan, nilai tersebut diasumsikan sebagai #FF, yaitu opasitas 100% (solid sepenuhnya).
Berikut adalah beberapa contoh nilai warna heksadesimal.
Warna | Nama | Warna heksadesimal |
Black | #000000 | |
Green | #72D98C | |
Blue | #4285F4 | |
White | #FFFFFF |
Anda tentu tidak perlu mengingat kode warna heksadesimal untuk warna. Ada alat untuk memilih warna, yang akan memunculkan angka untuk Anda. Untuk codelab ini, kami menyediakan warna.
Di bawah ini adalah palet warna yang kami gunakan dalam aplikasi. Perhatikan bahwa tidak ada nilai alfa. Ini berarti warnanya memiliki opasitas 100%.
Terang:
Warna | Nama | Warna heksadesimal | Slot |
Grey50 | #F8F9FA | primer | |
Green50 | #E6F4EA | platform | |
Green100 | #CEEAD6 | latar belakang | |
Grey700 | #5F6368 | sekunder | |
Grey900 | #202124 | onSurface | |
Grey900 | #202124 | onPrimary |
Anda mungkin bertanya-tanya apa itu slot dan bagaimana slot ditetapkan.
- Warna primer adalah warna yang paling sering ditampilkan di layar dan komponen aplikasi Anda.
- Warna sekunder menyediakan lebih banyak cara untuk menonjolkan dan membedakan aplikasi Anda.
- Warna platform memengaruhi platform komponen, seperti kartu, sheet, dan menu.
- Warna latar belakang muncul di belakang konten yang dapat di-scroll.
- Elemen warna on muncul di atas warna lain pada palet, dan terutama diterapkan pada teks, ikonografi, dan goresan. Pada palet warna, kita memiliki warna onSurface, yang muncul di atas warna platform, dan warna onPrimary, yang muncul di atas warna primer.
Slot ini akan menghasilkan sistem desain yang kohesif, dengan komponen terkait yang diberi warna serupa.
Komponen tertentu dipetakan ke slot warna secara otomatis. Misalnya, composable Surface
otomatis memiliki warna latar belakang yang dipetakan ke slot platform. Ini berarti Anda tidak perlu menetapkan warna platform secara eksplisit ke composable Surface
; tampilannya akan otomatis muncul saat Anda menetapkan tema warna di aplikasi Anda. Ada lebih banyak slot warna selain keenam slot ini, tetapi tidak wajib untuk menetapkan semuanya. Semua warna yang tidak ditentukan di tema aplikasi Anda akan dikembalikan ke warna yang ditentukan di tema warna Material dasar, yang menentukan tema default untuk aplikasi Anda.
Cukup teori tentang warna—saatnya untuk menambahkan palet warna yang indah ini ke aplikasi!
Menambahkan palet warna ke tema
- Buka file Color.kt. File ini digunakan untuk menambahkan warna ke palet warna aplikasi Anda. Sudah ada beberapa warna yang ditambahkan ke peta palet warna default. Tambahkan warna baru yang diperlukan untuk palet warna aplikasi Woof di bawah warna yang sudah disertakan.
//Light Theme
val Grey50 = Color(0xFFF8F9FA)
val Grey900 = Color(0xFF202124)
val Grey700 = Color(0xFF5F6368)
val Green50 = Color(0xFFE6F4EA)
val Green100 = Color(0xFFCEEAD6)
- Buka file Theme.kt, dan ganti
LightColorPalette
dengan kode di bawah ini, dengan menambahkan warna ke slotnya.
private val LightColorPalette = lightColors(
background = Green100,
surface = Green50,
onSurface = Grey900,
primary = Grey50,
onPrimary = Grey900,
secondary = Grey700
)
WoofTheme()
akan memeriksa apakah darkTheme
disetel ke benar (true) atau tidak, dan menetapkan colors
di MaterialTheme
object
ke palet warna terang jika salah, atau palet warna gelap jika itu benar.
@Composable
fun WoofTheme(darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
val colors = if (darkTheme) {
DarkColorPalette
} else {
LightColorPalette
}
MaterialTheme(
colors = colors,
typography = Typography,
shapes = Shapes,
content = content
)
}
Menambahkan warna ke aplikasi
Setelah warna ditambahkan, kini saatnya menggunakannya di berbagai area dalam aplikasi. Anda akan menggunakan:
- Warna
background
untuk latar belakang daftar. - Warna
surface
untuk latar belakang item daftar, agar terlihat berbeda dari warna latar belakang daftar. - Warna
onSurface
untuk teks, agar dapat dibaca bersama warna item daftar.
Dua warna lainnya akan digunakan nanti di codelab.
- Buka MainActivity.kt. Di
WoofApp()
, tambahkan pengubah latar belakang keLazyColumn
untuk membuat latar belakang daftar menjadi hijau. Tetapkan warna latar belakang ke warna yang Anda tetapkan sebagaibackground
di Theme.kt. Anda dapat mengakses warna yang ditetapkan sebagai warnabackground
dari tema aplikasi melaluiMaterialTheme.colors.background
. - Klik Build & Refresh di tab Preview.
import androidx.compose.material.MaterialTheme
import androidx.compose.foundation.background
LazyColumn(modifier =
Modifier.background(MaterialTheme.colors.background))
Bagus sekali! Latar belakang sekarang adalah warna Green100
.
- Di
DogItem()
, tambahkan ekstensibackground()
keRow
dan teruskanMaterialTheme.colors.surface
. Tindakan ini menetapkan warna latar belakangRow
untuk menggunakan warnasurface
yang ditentukan dalam tema aplikasi.
import androidx.compose.ui.unit.dp
Row(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
.background(MaterialTheme.colors.surface)
)
Di tab Preview, Anda dapat melihat bahwa item daftar kini memiliki warna yang berbeda dengan latar belakang aplikasi dan setiap item daftar lebih berbeda.
- Di
DogInformation()
, tambahkancolor
ke teks nama anjing dan composable teks usia anjing. Ini akan mengubah warna font kedua composable teks tersebut. Gunakan warnaonSurface
.
Column {
Text(
text = stringResource(dog.name),
color = MaterialTheme.colors.onSurface,
modifier = Modifier.padding(top = smallPadding)
)
Text(
text = stringResource(R.string.years_old, dog.age.toString()),
color = MaterialTheme.colors.onSurface
)
}
- Build & Refresh aplikasi. Teks yang menampilkan nama dan usia anjing memiliki kontras yang lebih mencolok terhadap latar belakang dan lebih mudah dibaca, namun tidak terlalu jelas dalam tema terang.
Tema terang:
Di bawah ini Anda dapat melihat kontras teks terhadap latar belakang dalam tema gelap, yang akan kita terapkan di bagian berikutnya:
Tema gelap tanpa warna teks | Tema gelap dengan warna teks |
Tema gelap
Di sistem Android, ada opsi untuk mengalihkan perangkat Anda ke tema gelap. Tema gelap menggunakan warna yang lebih gelap, lebih tenang, dan:
- Dapat mengurangi penggunaan daya secara signifikan (bergantung pada teknologi layar perangkat).
- Meningkatkan visibilitas bagi pengguna dengan gangguan penglihatan dan mereka yang sensitif terhadap cahaya terang.
- Memudahkan penggunaan perangkat di lingkungan dengan sedikit cahaya.
Aplikasi Anda dapat ikut serta dalam Force Dark, yang berarti bahwa sistem akan menerapkan tema gelap untuk Anda. Namun, akan menjadi pengalaman yang lebih baik bagi pengguna jika Anda menerapkan tema gelap, sehingga Anda mempertahankan kontrol penuh atas tema aplikasi.
Saat memilih tema gelap sendiri, penting untuk diperhatikan bahwa warna untuk tema gelap harus memenuhi standar kontras aksesibilitas. Tema gelap menggunakan warna platform gelap, dengan aksen warna terbatas.
Berikut adalah warna untuk tema gelap aplikasi ini:
Gelap:
Warna | Nama | Warna heksadesimal | Slot |
White | #FFFFFF | primer | |
Grey100 | #F1F3F4 | onSurface | |
Grey100 | #F1F3F4 | onPrimary | |
Cyan700 | #129EAF | platform | |
Cyan900 | #007B83 | latar belakang | |
Grey900 | #202124 | sekunder |
Menambahkan tema gelap
- Di Color.kt, tambahkan warna untuk tema gelap. Perhatikan bahwa Anda hanya menambahkan empat warna karena
Grey900
sudah ditambahkan untuk tema terang.
//Dark Theme
val White = Color(0xFFFFFFFF)
val Grey100 = Color(0xFFF1F3F4)
val Cyan900 = Color(0xFF007B83)
val Cyan700 = Color(0xFF129EAF)
- Hapus warna yang disediakan secara default karena kita tidak akan membutuhkannya lagi. Berikut adalah nilai yang seharusnya ada dalam file sekarang.
//Light Theme
val Grey50 = Color(0xFFF8F9FA)
val Grey900 = Color(0xFF202124)
val Grey700 = Color(0xFF5F6368)
val Green50 = Color(0xFFE6F4EA)
val Green100 = Color(0xFFCEEAD6)
//Dark Theme
val White = Color(0xFFFFFFFF)
val Grey100 = Color(0xFFF1F3F4)
val Cyan900 = Color(0xFF007B83)
val Cyan700 = Color(0xFF129EAF)
- Di file Theme.kt, ganti
DarkColorPalette
yang ada dengan warna yang ditunjukkan di bawah.
private val DarkColorPalette = darkColors(
background = Cyan900,
surface = Cyan700,
onSurface = White,
primary = Grey900,
onPrimary = White,
secondary = Grey100
)
Melihat tema gelap dalam pratinjau
Untuk melihat efek dari tema gelap, Anda perlu menambahkan Preview()
lain ke MainActivity.kt. Dengan demikian, saat mengubah tata letak UI dalam kode, Anda dapat melihat tampilan pratinjau tema terang dan tema gelap secara bersamaan.
- Di bagian
DefaultPreview()
, buat fungsi baru bernamaDarkThemePreview()
dan anotasikan dengan@Preview
dan@Composable
.
@Preview
@Composable
fun DarkThemePreview() {
}
- Di dalam
DarkThemePreview()
, tambahkanWoofTheme()
. Tanpa menambahkanWoofTheme()
, Anda tidak akan melihat gaya apa pun yang telah ditambahkan dalam aplikasi. Tetapkan parameterdarkTheme
ke true.
@Preview
@Composable
fun DarkThemePreview() {
WoofTheme(darkTheme = true) {
}
}
- Panggil
WoofApp()
di dalamWoofTheme()
.
@Preview
@Composable
fun DarkThemePreview() {
WoofTheme(darkTheme = true) {
WoofApp()
}
}
Sekarang, jika Anda mengklik Build & Refresh di bagian Preview
dan men-scroll ke bawah, Anda akan melihat aplikasi dalam tema gelap, termasuk latar belakang item aplikasi/daftar yang lebih gelap dan teks putih. Anda dapat membandingkan perbedaan antara tema gelap dan terang.
Tema gelap | Tema terang |
Melihat tema gelap di perangkat atau emulator
Untuk melihat aplikasi Anda dalam tema gelap di emulator atau perangkat fisik:
- Buka aplikasi Setelan di perangkat.
- Telusuri tema gelap dan klik.
- Aktifkan/Nonaktifkan Tema gelap.
- Buka kembali aplikasi Woof, dan aplikasi akan muncul dalam tema gelap.
Codelab ini lebih berfokus pada tema terang, jadi sebelum Anda melanjutkan ke aplikasi, nonaktifkan tema gelap.
- Buka aplikasi Setelan di perangkat.
- Pilih Tampilan.
- Nonaktifkan Tema gelap.
Bandingkan tampilan aplikasi di awal bagian versus sekarang. Item dan teks daftar terlihat lebih jelas, dan skema warna lebih menarik secara visual.
Tanpa warna | Dengan warna (tema terang) | Dengan warna (tema gelap) |
6. Menambahkan bentuk
Secara default, semua bentuk di aplikasi Anda berbentuk persegi panjang. Namun, menerapkan bentuk akan sangat memengaruhi tampilan dan nuansa composable. Bentuk mampu menarik perhatian, mengidentifikasi komponen, mengomunikasikan status, dan mengekspresikan merek.
Banyak bentuk ditentukan menggunakan RoundedCornerShape
, yang menggambarkan persegi panjang dengan sudut membulat. Angka yang diteruskan menentukan kebulatan sudut. Jika RoundedCornerShape(percent = 0)
digunakan, persegi panjang tidak memiliki sudut membulat; jika RoundedCornerShape(percent = 50)
digunakan, sudut akan membulat sepenuhnya. Situs material menawarkan alat penyesuaian bentuk jika Anda ingin bereksperimen dengan bentuk yang lebih kompleks.
0 persen | 25 persen | 50 persen |
File Shape.kt digunakan untuk menentukan bentuk komponen di Compose. Ada tiga jenis komponen: kecil, sedang, dan besar. Di bagian ini, Anda akan mengubah komponen Card
, yang ditentukan sebagai ukuran medium
. Komponen dikelompokkan ke dalam kategori bentuk berdasarkan ukurannya.
Karena Image
bukan komponen, Anda akan menambahkan pembentukannya di MainActivity.kt.
Pada bagian ini, Anda akan membentuk gambar anjing menjadi lingkaran, dan mengubah bentuk item daftar.
Membentuk gambar anjing menjadi lingkaran
- Pertama, Anda akan mengubah ikon dengan foto anjing menjadi lingkaran. Buka MainActivity.kt. Di
DogIcon()
, tambahkan atributclip
kemodifier
dariImage
; tindakan ini akan memangkas gambar menjadi sebuah bentuk. TeruskanRoundedCornerShape()
dan teruskan 50 untuk membuat sudut membulat penuh.
import androidx.compose.ui.draw.clip
import androidx.compose.foundation.shape.RoundedCornerShape
@Composable
fun DogIcon(@DrawableRes dogIcon: Int, modifier: Modifier = Modifier) {
Image(
modifier = modifier
.size(64.dp)
.padding(8.dp)
.clip(RoundedCornerShape(50)),
Saat melihat DefaultPreview
, Anda akan melihat ikon anjing tersebut menjadi lingkaran. Namun, beberapa foto terpotong di bagian samping dan tidak muncul sebagai lingkaran sepenuhnya.
- Untuk membuat semua foto menjadi lingkaran, tambahkan atribut
ContentScale
danCrop
; ini akan memangkas gambar agar sesuai. Perlu diketahui bahwacontentScale
adalah atribut dariImage
, dan bukan bagian darimodifier
.
import androidx.compose.ui.layout.ContentScale
@Composable
fun DogIcon(dogIcon: Int, modifier: Modifier = Modifier) {
Image(
modifier = modifier
.size(64.dp)
.padding(8.dp)
.clip(RoundedCornerShape(50)),
contentScale = ContentScale.Crop,
Sekarang, saat Anda menjalankan aplikasi, ikon akan berbentuk lingkaran.
Menambahkan bentuk ke item daftar
Di bagian ini, Anda akan menambahkan bentuk ke item daftar. Item daftar sudah ditampilkan di Row
, tetapi Row
tidak dapat dibentuk. Sebagai gantinya, Anda akan menambahkan Row
ke Card
. Card
adalah platform yang dapat berisi satu composable dan berisi opsi untuk dekorasi. Dekorasi dapat ditambahkan melalui batas, bentuk, ketinggian, dan lainnya. Di bagian ini, Anda akan menggunakan Card
untuk menambahkan bentuk ke item daftar.
- Di
DogItem()
, tambahkanCard
di sekitarRow
.
import androidx.compose.material.Card
@Composable
fun DogItem(dog: Dog, modifier: Modifier = Modifier) {
Card() {
Row(
- Buka file Shape.kt.
Card
adalah komponen media, sehingga Anda akan mengupdate atribut media objekShapes
. Untuk aplikasi ini, Anda ingin membulatkan sudut daftar, tetapi tidak membentuk lingkaran penuh. Untuk mencapainya, teruskan16.dp
ke atributmedium
.
val Shapes = Shapes(
small = RoundedCornerShape(4.dp),
medium = RoundedCornerShape(16.dp),
large = RoundedCornerShape(0.dp)
)
- Karena
Card
secara default sudah menggunakan bentuk media, Anda tidak perlu menyetelnya secara eksplisit ke bentuk media. Muat ulang Pratinjau dan Anda akan melihat sudut membulat! Namun, item daftar tidak memiliki padding di antara keduanya, dan tidak jelas di mana satu item daftar berakhir dan item daftar berikutnya dimulai. Sekarang Anda akan menambahkan padding di antara item daftar untuk membuat definisi di antara setiap item.
Jika kembali ke file Theme.kt di WoofTheme()
dan melihat MaterialTheme()
, Anda akan melihat atribut shapes
disetel ke Shapes
val
yang baru saja Anda update.
MaterialTheme(
colors = colors,
typography = Typography,
shapes = Shapes,
content = content
)
Mengupdate pengubah dan menambahkan padding
- Karena
Card
kini merupakan composable pertama yang muncul diDogItem()
, pengubah yang diteruskan ke composableDogItem
harus diteruskan keCard
, dan bukan keRow
.Row
kini menggunakan instanceModifier
yang baru.
@Composable
fun DogItem(dog: Dog, modifier: Modifier = Modifier) {
Card(
modifier = modifier
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
.background(MaterialTheme.colors.surface)
)
- Tambahkan
padding
keCard modifier
dan teruskan8.dp
untuk menambahkan padding di sekitar setiap item daftar.
Card(
modifier = modifier.padding(8.dp)
)
Saat memuat ulang Preview, Anda sekarang akan melihat item daftar dengan sudut membulat lebih jelas karena padding di antara setiap item.
Warna tidak eksplisit
Card
adalah Surface
, dan dalam file Theme.kt, kita memiliki warna yang secara eksplisit ditetapkan untuk slot surface
. Karena itu, kita dapat menghapus warna dari Row
dan tidak perlu secara eksplisit menetapkannya ke warna surface
.
- Di
DogItem()
, hapus setelan eksplisit warna latar belakang.
Row(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp)
)
Muat ulang Pratinjau dan perhatikan bahwa Row
masih memiliki warna latar belakang yang sama, meskipun kita menghapus penetapan warna eksplisit.
- Karena
Text
untuk nama dan usia anjing berada di atasSurface
, warna defaultnya adalahonSurface
. Hapus setelan warna eksplisit untuk kedua itemText
diDogInformation()
.
Berikut adalah tampilan composable saat ini:
@Composable
fun DogInformation(@StringRes dogName: Int, dogAge: Int, modifier: Modifier = Modifier) {
Column {
Text(
text = stringResource(dogName),
modifier = modifier.padding(top = 8.dp)
)
Text(
text = stringResource(R.string.years_old, dogAge)
)
}
}
Menambahkan ketinggian untuk item daftar
Aplikasi ini terlihat sangat bagus dengan pembentukan item daftar, tetapi mari kita tambahkan sesuatu yang ekstra untuk membuat item daftar lebih kontras terhadap latar belakang. Anda sudah menggunakan atribut Card
shape
untuk membentuk item daftar, kini Anda akan menggunakan atribut Card
elevation
untuk menambahkan elevasi ke kartu. Elevasi pada dasarnya menciptakan kontras antara Card
dan latar belakang dengan menambahkan bayangan untuk membuat aplikasi terlihat lebih realistis dan menarik secara visual.
- Di
DogItem()
, tambahkanlist_item_elevation
sebagai atributelevation
dariCard
.
Card(
modifier = Modifier.padding(8.dp),
elevation = 4.dp
)
- Muat ulang Pratinjau. Elevasi menambahkan bayangan dan kedalaman ke aplikasi Anda, membuatnya terlihat lebih realistis!
Berikut ini tampilan aplikasi secara berdampingan sebelum dan sesudah pembentukan. Perhatikan bahwa aplikasi ini menjadi jauh lebih menarik secara visual dengan pembentukan yang ditambahkan padanya.
Tanpa pembentukan | Dengan pembentukan |
7. Menambahkan tipografi
Jenis huruf Desain Material
Jenis huruf adalah pilihan gaya font yang dapat digunakan di seluruh aplikasi dan memastikan gaya yang fleksibel namun konsisten. Jenis huruf Desain Material mencakup tiga belas gaya font yang didukung oleh sistem jenis. Anda hanya perlu menggunakan pilihan ini jika ingin menyesuaikan aplikasi. Jika Anda tidak tahu apa yang harus ditetapkan untuk setiap kategori jenis huruf, ada skala tipografi default yang dapat Anda gunakan.
Jenis huruf ini berisi kategori teks yang dapat digunakan kembali, masing-masing dengan aplikasi yang dimaksudkan dan artinya. Di aplikasi, kita hanya akan menggunakan kategori judul dan isi.
Judul
Dalam jenis huruf, judul memiliki rentang dari 1 hingga 6. Judul adalah teks terbesar di layar, khusus untuk angka atau teks pendek yang penting.
Isi
Teks isi memiliki rentang 1 sampai 2, dan biasanya digunakan untuk penulisan bentuk panjang, karena berfungsi cukup baik dengan ukuran teks yang lebih kecil.
Font
Platform Android menyediakan beberapa font, tetapi Anda mungkin ingin benar-benar menyesuaikan aplikasi dengan font yang tidak disediakan secara default. Font kustom dapat menambah karakteristik dan digunakan untuk branding.
Di bagian ini, Anda akan menambahkan font khusus bernama Abril Fatface, Montserrat Bold, dan Montserrat Regular. Anda akan menggunakan judul H1 dan H2, serta teks body1 dari sistem Jenis Material, dan menambahkannya ke teks di aplikasi Anda.
Membuat font Direktori Resource Android.
Sebelum menambahkan font ke aplikasi, Anda harus menambahkan direktori font.
- Di tampilan project Android Studio, klik kanan folder res.
- Pilih New > Android Resource Directory.
- Beri nama Direktori font, setel jenis Resource sebagai font, dan klik OK.
- Buka direktori resource font baru yang terletak di res > font.
Mendownload font kustom
Karena Anda menggunakan font yang tidak disediakan oleh platform Android, Anda harus mendownload font kustom.
- Buka https://fonts.google.com/.
- Telusuri Montserrat, lalu klik Download family.
- Buka file zip.
- Buka folder Montserrat yang didownload. Di folder static, temukan Montserrat-Bold.ttf dan Montserrat-Regular.ttf (ttf adalah singkatan dari TrueType Font dan merupakan format untuk file font). Pilih kedua font dan tarik ke direktori resource font dalam project Anda di Android Studio.
- Di folder font, ganti nama Montserrat-Bold.ttf menjadi montserrat_bold.ttf dan ganti nama Montserrat-Regular.ttf menjadi montserrat_regular.ttf.
- Telusuri Abril Fatface dan klik Download family.
- Buka folder Abril_Fatface yang telah didownload. Pilih AbrilFatface-Regular.ttf, lalu tarik ke direktori resource font.
- Di folder font, ganti nama Abril_Fatface.ttf menjadi abril_fatface_regular.ttf.
Seperti inilah tampilan direktori resource font dalam project Anda dengan tiga file font kustom:
Melakukan inisialisasi font
- Di jendela project, buka ui.theme > Type.kt dan hapus konten variabel
Typography
.
// Set of Material typography styles to start with
val Typography = Typography(
)
- Lakukan inisialisasi font yang didownload di bawah pernyataan impor dan di atas
Typography
val
. Pertama, lakukan inisialisasi Abril Fatface dengan menyetelnya sama denganFontFamily
dan meneruskanFont
dengan file fontabril_fatface_regular
.
val AbrilFatface = FontFamily(
Font(R.font.abril_fatface_regular)
)
- Lakukan inisialisasi Montserrat, di bawah Abril Fatface, dengan menyetelnya sama dengan
FontFamily
dan meneruskanFont
dengan file fontmontserrat_regular
. Untukmontserrat_bold
, sertakan jugaFontWeight.Bold
. Meskipun Anda meneruskan file font versi cetak tebal, Compose tidak mengetahui bahwa file tersebut dicetak tebal, jadi Anda perlu menautkan file secara eksplisit keFontWeight.Bold
.
val AbrilFatface = FontFamily(
Font(R.font.abril_fatface_regular)
)
val Montserrat = FontFamily(
Font(R.font.montserrat_regular),
Font(R.font.montserrat_bold, FontWeight.Bold)
)
Selanjutnya, Anda menetapkan berbagai jenis judul ke font yang baru saja Anda tambahkan. Objek Typography
memiliki parameter untuk 13 jenis huruf berbeda yang dibahas di atas. Anda dapat menentukan sebanyak yang Anda butuhkan. Di aplikasi ini, kita akan menetapkan h1
(Judul 1), h2
(Judul 2), dan body1
. Di bagian berikutnya dari aplikasi ini, Anda akan menggunakan h3
(Judul 3), sehingga Anda akan menambahkannya di sini.
Di bawah ini adalah tabel dari bagian Ringkasan aplikasi yang menampilkan font dan ukuran setiap judul yang Anda tambahkan.
Judul | Font | Ketebalan font | Ukuran |
h1 | Normal | 30sp | |
h2 | Tebal | 20sp | |
h3 | Tebal | 14sp | |
body1 | Normal | 14sp |
- Gunakan tabel di atas untuk mengisi
Typography
val
. Untuk atributh1
, tetapkan atribut tersebut sama denganTextStyle
, dan isifontFamily
,fontWeight
, danfontSize
dengan informasi dari tabel di atas. Artinya, semua teks yang ditetapkan keh1
akan memiliki Abril Fatface sebagai font, dengan ketebalan font normal, danfontSize
30.sp
.
Ulangi proses ini untuk h2
, h3
, dan body1
.
val Typography = Typography(
h1 = TextStyle(
fontFamily = AbrilFatface,
fontWeight = FontWeight.Normal,
fontSize = 30.sp
),
h2 = TextStyle(
fontFamily = Montserrat,
fontWeight = FontWeight.Bold,
fontSize = 20.sp
),
h3 = TextStyle(
fontFamily = Montserrat,
fontWeight = FontWeight.Bold,
fontSize = 14.sp
),
body1 = TextStyle(
fontFamily = Montserrat,
fontWeight = FontWeight.Normal,
fontSize = 14.sp
)
)
Jika kembali ke file Theme.kt di WoofTheme()
dan melihat MaterialTheme()
, Anda akan melihat atribut typography
yang disetel ke Typography
val
yang baru saja Anda update.
MaterialTheme(
colors = colors,
typography = Typography,
shapes = Shapes,
content = content
)
Menambahkan tipografi ke teks aplikasi
Sekarang Anda akan menambahkan jenis judul ke setiap instance teks di aplikasi.
- Tambahkan
h2
(Judul 2) sebagai gaya untukdog name
karena merupakan informasi singkat yang penting. Tambahkanbody1
sebagai gaya untukdog age
karena berfungsi cukup baik dengan ukuran teks yang lebih kecil.
@Composable
fun DogInformation(@StringRes dogName: Int, dogAge: Int, modifier: Modifier = Modifier) {
Column {
Text(
text = stringResource(dogName),
style = MaterialTheme.typography.h2,
modifier = modifier.padding(top = 8.dp)
)
Text(
text = stringResource(R.string.years_old, dogAge),
style = MaterialTheme.typography.body1
)
}
}
- Muat ulang aplikasi. Sekarang nama anjing menampilkan font Montserrat tebal dalam
20.sp
, dan usia anjing menampilkan font Montserrat normal dalam14.sp
.
Berikut ini tampilan aplikasi secara berdampingan sebelum dan sesudah menambahkan tipografi. Perhatikan perbedaan font antara nama anjing dan usia anjing.
Tanpa tipografi | Dengan tipografi |
8. Menambahkan panel atas
Scaffold
adalah tata letak yang menyediakan slot untuk berbagai komponen dan elemen layar, seperti Image
, Row
, atau Column
. Scaffold
juga menyediakan slot untuk topBar
, yang akan Anda gunakan di bagian ini.
topBar
dapat digunakan untuk berbagai tujuan, tetapi dalam hal ini, Anda akan menggunakannya untuk branding dan memberikan karakteristik pada aplikasi. Anda akan membuat composable yang terlihat seperti screenshot di bawah, dan memasukkannya ke bagian topBar
dari Scaffold
.
Untuk aplikasi ini, panel atas terdiri dari baris dengan logo dan judul aplikasi. Logo menampilkan tapak kaki bergradasi yang lucu dan judul aplikasi!
Menambahkan gambar dan teks ke panel atas
- Di MainActivity.kt, buat composable bernama
WoofTopAppBar()
yang menerimamodifier
.
@Composable
fun WoofTopAppBar(modifier: Modifier = Modifier) {
}
- Dalam
WoofTopAppBar()
, tambahkanRow()
.
@Composable
fun WoofTopAppBar(modifier: Modifier = Modifier) {
Row() {
}
}
- Tambahkan
Image
keRow
. Gunakanpainter
untuk menetapkanImage
sebagaiic_woof_logo
dari folder drawable, dan tetapkancontentDescription
sebagai null. Dalam situasi ini, logo aplikasi tidak menambahkan informasi semantik apa pun bagi pengguna dengan gangguan penglihatan, sehingga kita tidak perlu menambahkan deskripsi konten.
Image(
painter = painterResource(R.drawable.ic_woof_logo),
contentDescription = null
)
- Selanjutnya, tambahkan Composable
Text
di dalamRow
setelahImage
, dan gunakanstringResource()
untuk menetapkannya ke nilaiapp_name
. Tindakan ini akan menetapkan teks ke nama aplikasi, yang disimpan distrings.xml
.
Text(
text = stringResource(R.string.app_name)
)
- Setelah menambahkan ikon dan nama aplikasi ke
TopAppBar()
, Anda harus menambahkanTopAppBar()
ke tata letak. DiWoofApp()
, tambahkanScaffold
yang mengelilingiLazyColumn
.
import androidx.compose.material.Scaffold
@Composable
fun WoofApp() {
Scaffold(
) {
LazyColumn(modifier =
Modifier.background(MaterialTheme.colors.background)) {
items(dogs) {
DogItem(dog = it)
}
}
}
}
- Dalam
Scaffold
, tambahkan atributtopBar
dan tetapkan keWoofTopAppBar()
.
Scaffold(
topBar = {
WoofTopAppBar()
}
)
Berikut adalah tampilan composable WoofApp()
:
@Composable
fun WoofApp() {
Scaffold(
topBar = {
WoofTopAppBar()
}
) {
LazyColumn(modifier = Modifier.background(MaterialTheme.colors.background)) {
items(dogs) {
DogItem(dog = it)
}
}
}
}
- Muat ulang Pratinjau dan lihat panel aplikasi atas. Panel ini menampilkan ikon dan teks, tetapi sama sekali tidak terlihat seperti produk akhir yang kita cari. Di bagian berikutnya, Anda akan membuat tampilan ini lebih menarik menggunakan warna, tipografi, padding, dan lainnya.
Memperindah panel atas
- Pertama, tambahkan warna latar belakang ke panel atas untuk membedakannya dengan bagian lain aplikasi. Di
WoofTopAppBar()
, tambahkan warna tema aplikasi primer sebagai warna latar belakang dengan menambahkanmodifier
keRow
, dan menetapkan warna latar belakang keprimary
.
Row(
modifier = modifier
.background(color = MaterialTheme.colors.primary)
){ }
- Warna latar belakang hanya muncul di belakang ikon dan teks, tetapi Anda ingin warna tersebut menutupi seluruh lebar aplikasi. Untuk melakukannya, tetapkan
modifier
padaRow
kefillMaxWidth()
.
Row(
modifier = modifier
.fillMaxWidth()
.background(color = MaterialTheme.colors.primary)
){ }
- Selanjutnya, perbarui teks agar mengikuti gaya
h1
(Judul 1) yang Anda tentukan sebelumnya. Karena latar belakang disetel ke warnaprimary
, teks akan otomatis disetel ke warnaonPrimary
.
Text(
text = stringResource(R.string.app_name),
style = MaterialTheme.typography.h1
)
- Ini terlihat jauh lebih baik, tetapi gambarnya sedikit terlalu kecil dan dapat ditambahkan padding di sekelilingnya. Tambahkan pengubah ke
Image
, dan setel ukuran gambar ke64.dp
serta padding di sekitar gambar sebagai8.dp
.
Image(
modifier = Modifier
.size(64.dp)
.padding(8.dp),
painter = painterResource(R.drawable.ic_woof_logo),
contentDescription = null
)
- Hampir selesai! Sekarang, tetapkan perataan vertikal sebagai
Alignment.CenterVertically
, yang secara vertikal memusatkan semua item dalam baris.
import androidx.compose.ui.Alignment
Row(
modifier = modifier
.fillMaxWidth()
.background(color = MaterialTheme.colors.primary),
verticalAlignment = Alignment.CenterVertically
){ }
Jalankan aplikasi dan lihat betapa indahnya TopAppBar
memadukan aplikasi.
Tanpa panel aplikasi atas | Dengan panel aplikasi atas |
Sekarang, jalankan aplikasi Anda dalam tema gelap. Karena panel menggunakan warna primary
dan teks menggunakan warna onSurface
, Anda tidak perlu mengupdate apa pun untuk tema gelap.
Selamat, Anda berhasil sampai ke akhir codelab!
9. [Opsional] Mengubah status bar
Untuk meningkatkan pengalaman pengguna, Anda dapat mengupdate warna status bar, yang berisi informasi seperti waktu, koneksi internet, status baterai, dan banyak lagi.
- Buka app > res > values > colors.xml.
- Hapus konten tag
<resources>
.
<resources>
</resources>
- Tambahkan
grey_50
dan setel ke#FFF8F9FA
untuk status bar tema terang, lalu tambahkangrey_900
dan tetapkan ke#FF202124
untuk status bar tema gelap.
<resources>
<color name="grey_50">#FFF8F9FA</color>
<color name="grey_900">#FF202124</color>
</resources>
- Buka app > res > values > themes.xml dan ganti warna dalam
android:statusBarColor
kegrey_50
.
<resources>
<style name="Theme.Woof" parent="android:Theme.Material.Light.NoActionBar">
<item name="android:statusBarColor">@color/grey_50</item>
</style>
</resources>
- Jalankan aplikasi di perangkat atau emulator.
Status bar kini cocok dengan panel aplikasi atas, yang membuat skema warna terlihat lebih terpadu, namun sekarang sulit untuk melihat ikonnya.
- Dalam file themes.xml, tambahkan
windowLightStatusBar
, setel ke true di bawahstatusBarColor
.
<resources>
<style name="Theme.Woof" parent="android:Theme.Material.Light.NoActionBar">
<item name="android:statusBarColor">@color/grey_50</item>
<item name="android:windowLightStatusBar">true</item>
</style>
</resources>
- Anda akan mendapatkan pesan error. Arahkan kursor ke pesan dan tekan Override Resources in values-v23.
- Tindakan ini akan membuat file themes.xml baru yang bernama v23/themes.xml—file ini digunakan untuk API level 23 dan yang lebih tinggi.
- Jalankan aplikasi di emulator Anda. Perhatikan bahwa Anda dapat melihat ikon sekarang!
Menambahkan status bar di tema gelap
Sekarang Anda akan menyesuaikan status bar di tema gelap.
- Dalam folder res, tambahkan Android Resources Directory baru bernama values-night.
- Beralih ke tampilan file Project Source Files.
- Buka app > src > main > res > values-night.
- Dalam values-night, tambahkan Values Resource File bernama
themes.xml
. - Tambahkan tag gaya dengan nama
Theme.Woof
dan induk sebagaiandroid:style/Theme.Material.NoActionBar
.
<resources>
<style name="Theme.Woof" parent="android:style/Theme.Material.NoActionBar">
</style>
</resources>
- Tambahkan warna status bar sebagai
grey_900
. Anda tidak perlu menambahkanwindowsStatusLightBar
karena ikon defaultnya adalah putih.
<resources>
<style name="Theme.Woof" parent="android:style/Theme.Material.NoActionBar">
<item name="android:statusBarColor">@color/grey_900</item>
</style>
</resources>
- Jalankan aplikasi dalam tema gelap untuk melihat update status bar.
10. Mendapatkan kode solusi
Untuk mendownload kode codelab yang sudah selesai, Anda dapat menggunakan perintah git berikut:
$ git clone https://github.com/google-developer-training/basic-android-kotlin-compose-training-woof.git $ cd basic-android-kotlin-compose-training-woof $ git checkout material
Atau, Anda dapat mendownload repositori sebagai file ZIP, lalu mengekstraknya, dan membukanya di Android Studio.
Jika Anda ingin melihat kode solusi, lihat di GitHub.
11. Kesimpulan
Anda baru saja membuat aplikasi Material pertama Anda! Anda menambahkan palet warna kustom untuk tema terang dan gelap, membuat bentuk untuk berbagai komponen, mendownload font dan menambahkannya ke aplikasi, lalu membuat panel atas yang menarik untuk menyatukan semuanya. Tingkatkan keterampilan yang Anda pelajari dalam codelab ini dan ubah warna, bentuk, serta tipografi agar aplikasi menjadi kreasi Anda sendiri sepenuhnya!
Ringkasan
- Penerapan Tema Material memungkinkan Anda menggunakan Desain Material di aplikasi, dengan panduan tentang penyesuaian warna, tipografi, dan bentuk.
- File Theme.kt adalah tempat tema ditetapkan, melalui composable bernama [your app name]+Theme()—
WoofTheme()
dalam kasus aplikasi ini. Dalam fungsi ini, objekMaterialTheme
object
menetapkancolor
,typography
,shapes
, dancontent
aplikasi. - Anda mencantumkan warna yang digunakan dalam aplikasi di Colors.kt. Kemudian di Theme.kt, Anda menetapkan warna dalam
LightColorPalette
danDarkColorPalette
ke slot tertentu. Tidak semua slot harus ditetapkan. - Aplikasi Anda dapat ikut serta dalam Force Dark, yang berarti bahwa sistem akan menerapkan tema gelap untuk Anda. Namun, akan menjadi pengalaman yang lebih baik bagi pengguna jika Anda menerapkan tema gelap sehingga Anda memiliki kontrol penuh atas tema aplikasi.
- Shapes.kt adalah tempat Anda menentukan bentuk aplikasi. Ada tiga ukuran bentuk (kecil, sedang, besar), dan Anda dapat menentukan bagaimana sudut dibulatkan.
- Bentuk mampu menarik perhatian, mengidentifikasi komponen, mengomunikasikan status, dan mengekspresikan merek.
- Types.kt adalah tempat Anda melakukan inisialisasi font dan menetapkan
fontFamily
,fontWeight
, danfontSize
untuk jenis huruf Desain Material. - Jenis huruf Desain Material mencakup berbagai gaya kontras yang mendukung kebutuhan aplikasi Anda dan kontennya. Jenis huruf adalah kombinasi dari 13 gaya yang didukung oleh sistem jenis.