Tema Material dengan Jetpack Compose

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:

Palet warna

Di bawah ini adalah palet warna untuk tema terang dan gelap yang dipilih desainer.

Terang:

Gelap:

Tipografi

Di bawah ini adalah font untuk aplikasi, seperti yang dipilih oleh desainer.

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

1. Buka halaman repositori GitHub yang disediakan untuk project.
2. Klik tombol Code. Tindakan ini akan membuka dialog.

3. Dalam dialog, klik tab HTTPS, lalu klik di samping URL untuk menyalinnya. Gunakan URL ini di Android Studio.

4. Jika Android Studio tidak terbuka, buka lalu klik Get from VCS di jendela Welcome to Android Studio.

5. Jika Android Studio sudah terbuka, pilih File > New > Project from Version Control...

6. Di menu Version control pada jendela Get from Version Control, pilih Git.

7. Di kotak teks URL, masukkan link yang Anda salin dari halaman repositori GitHub.
8. Di menu Directory, pilih direktori tempat Anda ingin meng-clone kode sumber dari repositori GitHub.

9. Klik Clone.
10. Tunggu Android Studio mendownload dan membuka project.
11. Di menu navigasi Android Studio, klik 'Run app', lalu pastikan aplikasi telah di-build seperti yang diharapkan.
12. Di menu navigasi, klik Git > Branches...

13. Pada dialog Git Branches di bagian Remote Branches, pilih nama cabang yang disediakan sebelumnya, lalu klik Checkout.

14. Jika Anda perlu beralih cabang, klik Git > Branches, lalu pilih cabang yang ingin Anda alihkan dan klik Smart Checkout.

Mempelajari kode awal

1. Buka kode awal di Android Studio.
2. 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.
3. Buka res > drawable. File ini berisi semua aset gambar yang Anda butuhkan untuk project ini, termasuk ikon aplikasi, gambar anjing, dan ikon.
4. Buka res > values > strings.xml. File ini berisi string yang Anda gunakan dalam aplikasi ini, termasuk nama aplikasi, nama anjing, deskripsinya, dan lainnya.
5. Buka MainActivity.kt. File ini berisi kode untuk membuat daftar sederhana yang menampilkan foto anjing, nama anjing, dan usia anjing tersebut.
6. WoofApp() berisi LazyColumn yang menampilkan DogItems.
7. DogItem() berisi Row yang menampilkan foto anjing dan informasi tentangnya.
8. DogIcon() menampilkan foto anjing.
9. 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:

1. Buka aplikasi Setelan di perangkat.
2. Telusuri Tema Gelap dan klik di dalamnya.
3. 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.

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:

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

1. 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)

2. 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.

1. Buka MainActivity.kt. Di WoofApp(), tambahkan pengubah latar belakang ke LazyColumn untuk membuat latar belakang daftar menjadi hijau. Tetapkan warna latar belakang ke warna yang Anda tetapkan sebagai background di Theme.kt. Anda dapat mengakses warna yang ditetapkan sebagai warna background dari tema aplikasi melalui MaterialTheme.colors.background.
2. 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.

3. Di DogItem(), tambahkan ekstensi background() ke Row dan teruskan MaterialTheme.colors.surface. Tindakan ini menetapkan warna latar belakang Row untuk menggunakan warna surface 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.

3. Di DogInformation(), tambahkan color ke teks nama anjing dan composable teks usia anjing. Ini akan mengubah warna font kedua composable teks tersebut. Gunakan warna onSurface.

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
   )
}

4. 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

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:

Menambahkan tema gelap

1. 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)

2. 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)

3. 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.

1. Di bagian DefaultPreview(), buat fungsi baru bernama DarkThemePreview() dan anotasikan dengan @Preview dan @Composable.

@Preview
@Composable
fun DarkThemePreview() {

}

2. Di dalam DarkThemePreview(), tambahkan WoofTheme(). Tanpa menambahkan WoofTheme(), Anda tidak akan melihat gaya apa pun yang telah ditambahkan dalam aplikasi. Tetapkan parameter darkTheme ke true.

@Preview
@Composable
fun DarkThemePreview() {
   WoofTheme(darkTheme = true) {

   }
}

3. Panggil WoofApp() di dalam WoofTheme().

@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.

Melihat tema gelap di perangkat atau emulator

Untuk melihat aplikasi Anda dalam tema gelap di emulator atau perangkat fisik:

1. Buka aplikasi Setelan di perangkat.
2. Telusuri tema gelap dan klik.
3. Aktifkan/Nonaktifkan Tema gelap.
4. 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.

1. Buka aplikasi Setelan di perangkat.
2. Pilih Tampilan.
3. 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.

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.

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

1. Pertama, Anda akan mengubah ikon dengan foto anjing menjadi lingkaran. Buka MainActivity.kt. Di DogIcon(), tambahkan atribut clip ke modifier dari Image; tindakan ini akan memangkas gambar menjadi sebuah bentuk. Teruskan RoundedCornerShape() 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.

2. Untuk membuat semua foto menjadi lingkaran, tambahkan atribut ContentScale dan Crop; ini akan memangkas gambar agar sesuai. Perlu diketahui bahwa contentScale adalah atribut dari Image, dan bukan bagian dari modifier.

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.

1. Di DogItem(), tambahkan Card di sekitar Row.

import androidx.compose.material.Card

@Composable
fun DogItem(dog: Dog, modifier: Modifier = Modifier) {
   Card() {
       Row(

2. Buka file Shape.kt. Card adalah komponen media, sehingga Anda akan mengupdate atribut media objek Shapes. Untuk aplikasi ini, Anda ingin membulatkan sudut daftar, tetapi tidak membentuk lingkaran penuh. Untuk mencapainya, teruskan 16.dp ke atribut medium.

val Shapes = Shapes(
   small = RoundedCornerShape(4.dp),
   medium = RoundedCornerShape(16.dp),
   large = RoundedCornerShape(0.dp)
)

3. 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

1. Karena Card kini merupakan composable pertama yang muncul di DogItem(), pengubah yang diteruskan ke composable DogItem harus diteruskan ke Card, dan bukan ke Row. Row kini menggunakan instance Modifier yang baru.

@Composable
fun DogItem(dog: Dog, modifier: Modifier = Modifier) {
   Card(
       modifier = modifier
   ) {
       Row(
           modifier = Modifier
               .fillMaxWidth()
               .padding(8.dp)
               .background(MaterialTheme.colors.surface)
       )

2. Tambahkan padding ke Card modifier dan teruskan 8.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.

1. 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.

2. Karena Text untuk nama dan usia anjing berada di atas Surface, warna defaultnya adalah onSurface. Hapus setelan warna eksplisit untuk kedua item Text di DogInformation().

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.

1. Di DogItem(), tambahkan list_item_elevation sebagai atribut elevation dari Card.

Card(
   modifier = Modifier.padding(8.dp),
   elevation = 4.dp
)

2. 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.

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.

1. Di tampilan project Android Studio, klik kanan folder res.
2. Pilih New > Android Resource Directory.

3. Beri nama Direktori font, setel jenis Resource sebagai font, dan klik OK.

4. 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.

1. Buka https://fonts.google.com/.
2. Telusuri Montserrat, lalu klik Download family.
3. Buka file zip.
4. 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.

5. Di folder font, ganti nama Montserrat-Bold.ttf menjadi montserrat_bold.ttf dan ganti nama Montserrat-Regular.ttf menjadi montserrat_regular.ttf.
6. Telusuri Abril Fatface dan klik Download family.
7. Buka folder Abril_Fatface yang telah didownload. Pilih AbrilFatface-Regular.ttf, lalu tarik ke direktori resource font.
8. 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

1. Di jendela project, buka ui.theme > Type.kt dan hapus konten variabel Typography.

// Set of Material typography styles to start with
val Typography = Typography(

)

2. Lakukan inisialisasi font yang didownload di bawah pernyataan impor dan di atas Typography val. Pertama, lakukan inisialisasi Abril Fatface dengan menyetelnya sama dengan FontFamily dan meneruskan Font dengan file font abril_fatface_regular.

val AbrilFatface = FontFamily(
   Font(R.font.abril_fatface_regular)
)

3. Lakukan inisialisasi Montserrat, di bawah Abril Fatface, dengan menyetelnya sama dengan FontFamily dan meneruskan Font dengan file font montserrat_regular. Untuk montserrat_bold, sertakan juga FontWeight.Bold. Meskipun Anda meneruskan file font versi cetak tebal, Compose tidak mengetahui bahwa file tersebut dicetak tebal, jadi Anda perlu menautkan file secara eksplisit ke FontWeight.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.

4. Gunakan tabel di atas untuk mengisi Typography val. Untuk atribut h1, tetapkan atribut tersebut sama dengan TextStyle, dan isi fontFamily, fontWeight, dan fontSize dengan informasi dari tabel di atas. Artinya, semua teks yang ditetapkan ke h1 akan memiliki Abril Fatface sebagai font, dengan ketebalan font normal, dan fontSize 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.

1. Tambahkan h2 (Judul 2) sebagai gaya untuk dog name karena merupakan informasi singkat yang penting. Tambahkan body1 sebagai gaya untuk dog 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
       )
   }
}

2. Muat ulang aplikasi. Sekarang nama anjing menampilkan font Montserrat tebal dalam 20.sp, dan usia anjing menampilkan font Montserrat normal dalam 14.sp.

Berikut ini tampilan aplikasi secara berdampingan sebelum dan sesudah menambahkan tipografi. Perhatikan perbedaan font antara nama anjing dan usia anjing.

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

1. Di MainActivity.kt, buat composable bernama WoofTopAppBar() yang menerima modifier.

@Composable
fun WoofTopAppBar(modifier: Modifier = Modifier) {

}

2. Dalam WoofTopAppBar(), tambahkan Row().

@Composable
fun WoofTopAppBar(modifier: Modifier = Modifier) {
   Row() {

   }
}

3. Tambahkan Image ke Row. Gunakan painter untuk menetapkan Image sebagai ic_woof_logo dari folder drawable, dan tetapkan contentDescription 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
)

4. Selanjutnya, tambahkan Composable Text di dalam Row setelah Image, dan gunakan stringResource() untuk menetapkannya ke nilai app_name. Tindakan ini akan menetapkan teks ke nama aplikasi, yang disimpan di strings.xml.

Text(
   text = stringResource(R.string.app_name)
)

5. Setelah menambahkan ikon dan nama aplikasi ke TopAppBar(), Anda harus menambahkan TopAppBar() ke tata letak. Di WoofApp(), tambahkan Scaffold yang mengelilingi LazyColumn.

import androidx.compose.material.Scaffold

@Composable
fun WoofApp() {
   Scaffold(

   ) {
       LazyColumn(modifier =
        Modifier.background(MaterialTheme.colors.background)) {
           items(dogs) {
               DogItem(dog = it)
           }
       }
   }
}

6. Dalam Scaffold, tambahkan atribut topBar dan tetapkan ke WoofTopAppBar().

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)
           }
       }
   }
}

7. 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

1. 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 menambahkan modifier ke Row, dan menetapkan warna latar belakang ke primary.

Row(
   modifier = modifier
       .background(color = MaterialTheme.colors.primary)
){ }

2. Warna latar belakang hanya muncul di belakang ikon dan teks, tetapi Anda ingin warna tersebut menutupi seluruh lebar aplikasi. Untuk melakukannya, tetapkan modifier pada Row ke fillMaxWidth().

Row(
   modifier = modifier
       .fillMaxWidth()
       .background(color = MaterialTheme.colors.primary)
){ }

3. Selanjutnya, perbarui teks agar mengikuti gaya h1 (Judul 1) yang Anda tentukan sebelumnya. Karena latar belakang disetel ke warna primary, teks akan otomatis disetel ke warna onPrimary.

Text(
   text = stringResource(R.string.app_name),
   style = MaterialTheme.typography.h1
)

4. Ini terlihat jauh lebih baik, tetapi gambarnya sedikit terlalu kecil dan dapat ditambahkan padding di sekelilingnya. Tambahkan pengubah ke Image, dan setel ukuran gambar ke 64.dp serta padding di sekitar gambar sebagai 8.dp.

Image(
   modifier = Modifier
       .size(64.dp)
       .padding(8.dp),
   painter = painterResource(R.drawable.ic_woof_logo),
   contentDescription = null
)

5. 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.

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.

1. Buka app > res > values > colors.xml.
2. Hapus konten tag <resources>.

<resources>

</resources>

3. Tambahkan grey_50 dan setel ke #FFF8F9FA untuk status bar tema terang, lalu tambahkan grey_900 dan tetapkan ke #FF202124 untuk status bar tema gelap.

<resources>
   <color name="grey_50">#FFF8F9FA</color>
   <color name="grey_900">#FF202124</color>
</resources>

4. Buka app > res > values > themes.xml dan ganti warna dalam android:statusBarColor ke grey_50.

<resources>
   <style name="Theme.Woof" parent="android:Theme.Material.Light.NoActionBar">
       <item name="android:statusBarColor">@color/grey_50</item>
   </style>
</resources>

5. 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.

6. Dalam file themes.xml, tambahkan windowLightStatusBar, setel ke true di bawah statusBarColor.

<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>

7. Anda akan mendapatkan pesan error. Arahkan kursor ke pesan dan tekan Override Resources in values-v23.

8. Tindakan ini akan membuat file themes.xml baru yang bernama v23/themes.xml—file ini digunakan untuk API level 23 dan yang lebih tinggi.
9. 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.

1. Dalam folder res, tambahkan Android Resources Directory baru bernama values-night.

2. Beralih ke tampilan file Project Source Files.

3. Buka app > src > main > res > values-night.
4. Dalam values-night, tambahkan Values Resource File bernama themes.xml.
5. Tambahkan tag gaya dengan nama Theme.Woof dan induk sebagai android:style/Theme.Material.NoActionBar.

<resources>
   <style name="Theme.Woof" parent="android:style/Theme.Material.NoActionBar">

   </style>
</resources>

6. Tambahkan warna status bar sebagai grey_900. Anda tidak perlu menambahkan windowsStatusLightBar 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>

7. 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.

file_downloadDownload zip

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, objek MaterialTheme object menetapkan color, typography, shapes, dan content aplikasi.
• Anda mencantumkan warna yang digunakan dalam aplikasi di Colors.kt. Kemudian di Theme.kt, Anda menetapkan warna dalam LightColorPalette dan DarkColorPalette 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, dan fontSize 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.

12. Pelajari lebih lanjut

• Desain Material
• Tema Material
• Jenis huruf Desain Material
• Sistem Warna Desain Material
• Bentuk Desain Material
• Parameter pengubah
• Force Dark
• Standar Kontras Aksesibilitas
• Klip
• ContentScale
• Pangkas
• Kartu
• Scaffold