Menciptakan pengalaman pengguna yang lebih baik

Seperti yang telah Anda pelajari dalam codelab sebelumnya, Material adalah sistem desain yang dibuat oleh Google dengan panduan, komponen, dan alat yang mendukung praktik terbaik desain antarmuka pengguna. Dalam codelab ini, Anda akan mengupdate aplikasi tip calculator (dari codelab sebelumnya) untuk memiliki pengalaman pengguna yang lebih canggih, seperti yang terlihat pada screenshot final di bawah ini. Anda juga akan menguji aplikasi dalam beberapa skenario tambahan untuk memastikan pengalaman pengguna berjalan selancar mungkin.

Prasyarat

• Pemahaman tentang widget UI umum seperti TextView, ImageView, Button, EditText, RadioButton, RadioGroup, dan Switch
• Pemahaman tentang ConstraintLayout dan memosisikan tampilan turunan dengan menetapkan batasan
• Merasa nyaman dengan memodifikasi tata letak XML
• Pahami perbedaan antara gambar bitmap dan vektor drawable
• Dapat menetapkan atribut tema dalam sebuah tema
• Dapat mengaktifkan Tema gelap di perangkat
• Sebelumnya telah memodifikasi file build.gradle aplikasi untuk dependensi project

Yang akan Anda pelajari

• Cara menggunakan Komponen Desain Material di aplikasi Anda
• Cara menggunakan ikon Material di aplikasi Anda dengan mengimpornya dari Image Asset Studio
• Cara membuat dan menerapkan gaya baru
• Cara menjauhkan atribut tema lainnya dari warna

Yang akan Anda buat

• Aplikasi tip calculator yang canggih yang mengikuti praktik terbaik UI yang direkomendasikan

Yang Anda perlukan

• Komputer yang dilengkapi Android Studio.
• Kode untuk aplikasi Tip Time agar menyelesaikan codelab sebelumnya

Melalui codelab sebelumnya, Anda membuat aplikasi Tip Time yang merupakan aplikasi tip calculator dengan opsi untuk menyesuaikan sentuhan. UI aplikasi Anda saat ini terlihat seperti screenshot di bawah. Fungsionalitas berfungsi, tetapi lebih mirip sebuah prototipe. Kolom tersebut tidak cukup digabung secara visual. Sudah pasti ada ruang untuk peningkatan dalam hal penataan gaya dan jarak yang lebih konsisten, serta penggunaan Komponen Desain Material.

Komponen Material adalah widget UI umum yang mempermudah penerapan gaya Material di aplikasi Anda. Dokumentasi memberikan informasi tentang cara menggunakan dan menyesuaikan Komponen Desain Material. Ada panduan Desain Material umum untuk setiap komponen, dan panduan khusus platform Android untuk komponen yang tersedia di Android. Diagram berlabel memberi Anda informasi yang cukup untuk membuat ulang komponen jika kebetulan tidak ada di platform yang Anda pilih.

Dengan menggunakan Komponen Material, aplikasi Anda akan beroperasi dengan lebih konsisten bersama aplikasi lain di perangkat pengguna. Dengan begitu, pola UI yang dipelajari dalam satu aplikasi dapat dibawa ke aplikasi berikutnya. Sehingga pengguna akan bisa mempelajari cara menggunakan aplikasi Anda dengan lebih cepat. Sebaiknya direkomendasikan untuk menggunakan Komponen Material jika memungkinkan (bukan widget non-Material). Komponen ini juga lebih fleksibel dan dapat disesuaikan, seperti yang akan Anda pelajari dalam tugas berikutnya.

Library Komponen Desain Material (MDC) harus disertakan sebagai dependensi dalam project Anda. Jika Anda menggunakan Android Studio 4.1 atau yang lebih baru, baris ini seharusnya sudah ada di project Anda secara default. Di file build.gradle aplikasi Anda, pastikan dependensi ini disertakan dengan library versi terbaru. Untuk detail selengkapnya, lihat halaman Memulai di situs Material.

app/build.gradle

dependencies {
    ...
    implementation 'com.google.android.material:material:<version>'
}

Kolom Teks

Di aplikasi tip calculator, di bagian atas tata letak, saat ini Anda memiliki kolom EditText untuk biaya layanan. Kolom EditText ini berfungsi, namun tidak mengikuti panduan Desain Material terbaru tentang bagaimana kolom teks seharusnya terlihat dan berperilaku.

Untuk setiap komponen baru yang ingin Anda gunakan, mulailah dengan mempelajarinya di situs Material. Dari panduan di Kolom Teks, ada dua jenis kolom teks:

Kolom teks terisi

Kolom teks yang diuraikan

Untuk membuat kolom teks seperti yang ditunjukkan di atas, gunakan TextInputLayout dengan TextInputEditText tertutup dari library MDC. Kolom teks Material dapat disesuaikan dengan mudah untuk:

• Menampilkan teks input atau label yang selalu terlihat
• Menampilkan ikon di kolom teks
• Menampilkan pesan error atau bantuan

Pada tugas pertama codelab ini, Anda akan mengganti biaya layanan EditText dengan kolom teks Material (yang terdiri dari TextInputLayout dan TextInputEditText).

1. Dengan aplikasi Tip Time yang terbuka di Android Studio, buka file tata letak activity_main.xml. File ini harus berisi ConstraintLayout dengan tata letak tip calculator.
2. Untuk melihat contoh tampilan XML untuk kolom teks Material, kembali ke panduan Android untuk kolom Teks. Anda akan melihat cuplikan seperti ini:

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textField"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="@string/label">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
    />

</com.google.android.material.textfield.TextInputLayout>

3. Setelah melihat contoh ini, masukkan kolom teks Material sebagai turunan pertama ConstraintLayout (sebelum kolom EditText). Anda akan menghapus kolom EditText di langkah berikutnya.

Anda bisa mengetikkan ini ke dalam Android Studio dan menggunakan pelengkapan otomatis untuk membuatnya lebih mudah. Atau Anda dapat menyalin contoh XML dari halaman dokumentasi dan menempelkannya ke tata letak seperti ini. Perhatikan bagaimana TextInputLayout memiliki tampilan turunan, yaitu TextInputEditText. Ingat bahwa elipsis (...) digunakan untuk menyingkat cuplikan, sehingga Anda dapat berfokus pada baris XML yang benar-benar telah berubah.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    ...>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/textField"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/label">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
        />

    </com.google.android.material.textfield.TextInputLayout>

    <EditText
        android:id="@+id/cost_of_service" ... />

    ...

Anda diharapkan melihat error pada elemen TextInputLayout. Anda belum membatasi tampilan ini dengan benar di induk ConstraintLayout. Selain itu, resource string juga tidak dikenali. Anda akan memperbaiki error ini dalam langkah-langkah mendatang.

4. Tambahkan pembatas vertikal dan horizontal ke dalam kolom teks untuk memosisikannya dengan benar dalam ConstraintLayout induk. Karena Anda belum menghapus EditText, potong dan tempel atribut berikut dari EditText dan tempatkan di TextInputLayout: batasan, ID resource cost_of_service, lebar tata letak 160dp, tinggi tata letak wrap_content, dan teks petunjuk @string/cost_of_service.

...

<com.google.android.material.textfield.TextInputLayout
   android:id="@+id/cost_of_service"
   android:layout_width="160dp"
   android:layout_height="wrap_content"
   android:hint="@string/cost_of_service"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent">

   <com.google.android.material.textfield.TextInputEditText
       android:layout_width="match_parent"
       android:layout_height="wrap_content"/>

</com.google.android.material.textfield.TextInputLayout>

...

Anda mungkin melihat error bahwa ID cost_of_service sama dengan ID resource EditText, tetapi untuk saat ini Anda dapat mengabaikan error ini. (EditText akan dihapus dalam beberapa langkah).

5. Selanjutnya, pastikan elemen TextInputEditText memiliki semua atribut yang sesuai. Memotong dan menempelkan jenis input dari EditText ke TextInputEditText. Mengubah ID resource elemen TextInputEditText ke cost_of_service_edit_text.

<com.google.android.material.textfield.TextInputLayout ... >

   <com.google.android.material.textfield.TextInputEditText
       android:id="@+id/cost_of_service_edit_text"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:inputType="numberDecimal" />

</com.google.android.material.textfield.TextInputLayout>

Lebar match_parent dan tinggi wrap_content boleh apa adanya. Saat menetapkan lebar match_parent, TextInputEditText akan memiliki lebar yang sama dengan induknya TextInputLayout yang berupa 160dp.

6. Setelah Anda menyalin semua informasi yang relevan dari EditText, lanjutkan dan hapus EditText dari tata letak.
7. Dalam tampilan Design tata letak, Anda akan melihat pratinjau ini. Kolom biaya layanan kini terlihat seperti kolom teks Material.

8. Anda belum dapat menjalankan aplikasi karena ada error di file MainActivity.kt dalam metode calculateTip(). Ingat kembali dari codelab sebelumnya yang mengaktifkan view binding untuk project Anda, Android membuat properti dalam objek binding berdasarkan nama ID resource. Kolom yang kita ambil saat biaya layanan diubah di tata letak XML, jadi kode Kotlin perlu diperbarui sebagaimana mestinya.

Anda kini akan mengambil input pengguna dari elemen TextInputEditText dengan ID resource cost_of_service_edit_text. Di MainActivity, gunakan binding.costOfServiceEditText untuk mengakses string teks yang tersimpan di dalamnya. Metode calculateTip() lainnya dapat tetap sama.

private fun calculateTip() {
    // Get the decimal value from the cost of service text field
    val stringInTextField = binding.costOfServiceEditText.text.toString()
    val cost = stringInTextField.toDoubleOrNull()

    ...
}

9. Bagus sekali! Sekarang jalankan aplikasi dan uji apakah aplikasi masih berfungsi. Perhatikan bagaimana label "Biaya Layanan" sekarang muncul di atas input saat Anda mengetik. Tips tersebut tetap akan dihitung seperti yang diharapkan.

Tombol

Dalam panduan Desain Material, ada juga panduan tentang tombol. Tombol adalah widget yang memungkinkan Anda mengaktifkan atau menonaktifkan setelan.

1. Lihat panduan Android untuk tombol Material. Anda akan mempelajari widget SwitchMaterial (dari library MDC), yang menyediakan gaya Material untuk tombol. Jika terus men-scroll panduan, Anda akan melihat beberapa contoh XML.
2. Untuk menggunakan SwitchMaterial, Anda harus menentukan SwitchMaterial secara eksplisit dalam tata letak dan menggunakan nama jalur yang sepenuhnya memenuhi syarat.

Di tata letak activity_main.xml, ubah tag XML dari Switch menjadi com.google.android.material.switchmaterial.SwitchMaterial.

...

<com.google.android.material.switchmaterial.SwitchMaterial
    android:id="@+id/round_up_switch"
    android:layout_width="0dp"
    android:layout_height="wrap_content" ... />

...

3. Jalankan aplikasi untuk memverifikasi bahwa aplikasi masih dikompilasi. Tidak ada perubahan yang terlihat dalam aplikasi. Namun, keuntungan menggunakan SwitchMaterial dari library MDC (bukan Switch dari platform Android), adalah saat penerapan library untuk SwitchMaterial diperbarui (misalnya, pedoman Desain Material berubah), Anda akan mendapatkan widget yang diupdate secara gratis tanpa perlu melakukan perubahan apa pun. Ini akan membantu aplikasi Anda di masa mendatang.

Pada tahap ini, Anda telah melihat dua contoh bagaimana UI dapat memanfaatkan penggunaan Komponen Desain Material siap pakai dan bagaimana membuat aplikasi Anda semakin sejalan dengan panduan Material. Perlu diingat bahwa Anda dapat selalu menjelajahi Komponen Desain Material lain yang disediakan di Android melalui situs ini.

Ikon adalah simbol yang dapat membantu pengguna memahami antarmuka pengguna dengan menyampaikan fungsi yang diinginkan secara visual. Aplikasi ini sering kali mengambil inspirasi dari objek di dunia nyata yang dialami secara langsung oleh pengguna. Desain ikon sering kali mengurangi tingkat detail hingga jumlah minimum yang diperlukan agar mudah dikenali oleh pengguna. Misalnya, pensil dalam dunia nyata digunakan untuk menulis sehingga ikon penghubungnya biasanya menunjukkan pembuatan, penambahan, atau pengeditan item.

Terkadang ikon ditautkan ke objek dunia nyata yang sudah usang seperti halnya ikon disket. Ikon ini adalah indikasi penyimpanan file atau basis data di mana-mana; Namun, meskipun disket dipopulerkan pada kisaran tahun 70-an, disket tersebut tidak lagi digunakan setelah tahun 2000. Namun, penggunaannya yang terus-menerus saat ini menunjukkan bagaimana visualisasi yang kuat dapat melampaui umur bentuk fisiknya.

Mewakili ikon di aplikasi Anda

Untuk ikon di aplikasi Anda, sebagai ganti menyediakan versi gambar bitmap yang berbeda untuk kepadatan layar berbeda, praktik yang disarankan adalah menggunakan vektor drawable. Vektor drawable ditampilkan sebagai file XML yang menyimpan petunjuk tentang cara membuat gambar, bukan menyimpan piksel aktual yang membentuk gambar itu. Skala vektor drawable dapat ditingkatkan ke atas atau ke bawah tanpa kehilangan kualitas visual atau peningkatan ukuran file.

Ikon yang Disediakan

Desain Material menyediakan sejumlah ikon yang diatur dalam kategori umum untuk sebagian besar kebutuhan Anda. Lihat daftar ikon.

Ikon ini juga dapat digambar menggunakan salah satu dari lima tema (Terisi, Tergarisbatasi, Dibulatkan, Dua Warna, dan Sharp) dan dapat diberi warna.

Menambahkan Ikon

Dalam tugas ini, Anda akan menambahkan tiga ikon vektor drawable ke aplikasi:

1. Ikon di samping kolom teks biaya layanan
2. Ikon di samping pertanyaan layanan
3. Ikon di samping permintaan tips pembulatan ke atas

Di bawah ini adalah screenshot dari versi final aplikasi. Setelah menambahkan ikon, Anda akan menyesuaikan tata letak untuk mengakomodasi penempatan ikon tersebut. Perhatikan bagaimana bidang dan tombol penghitungan bergeser ke kanan, dengan penambahan ikon.

Menambahkan aset vektor drawable

Anda dapat membuat ikon ini sebagai vektor drawable langsung dari Asset Studio di Android Studio.

1. Buka tab Resource Manager yang ada di sebelah kiri jendela aplikasi.
2. Klik ikon + dan pilih Aset Vektor.

3. Untuk Jenis Aset, pastikan tombol pilihan berlabel Gambar Klip dipilih.

4. Klik tombol di samping Gambar Klip: untuk memilih gambar klip yang berbeda. Pada dialog yang muncul, ketik "panggilan dilakukan" di jendela yang muncul. Anda akan menggunakan ikon panah ini untuk opsi pembulatan ke atas. Pilih dan klik OK.

5. Ganti nama ikon menjadi ic_round_up. (Sebaiknya gunakan awalan ic_ saat menamai file ikon.) Anda dapat membiarkan **Ukuran** sebesar 24 dp x 24 dp dan **Warna** sebagai 000000 hitam.
6. Klik Berikutnya.
7. Terima lokasi direktori default, lalu klik Finish.

8. Ulangi langkah 2 - 7 untuk dua ikon lainnya:

• Ikon pertanyaan layanan: Telusuri ikon "layanan ruangan", simpan sebagai ic_service.
• Ikon biaya layanan: Telusuri ikon "toko", simpan sebagai ic_store.

9. Setelah selesai, Resource Manager akan terlihat seperti screenshot di bawah. Anda juga akan memiliki tiga vektor drawable (ic_round_up, ic_service, dan ic_store) yang tercantum di folder res/drawable Anda.

Mendukung versi Android yang lebih lama

Anda baru saja menambahkan vektor drawable ke aplikasi Anda, tetapi penting untuk diperhatikan bahwa dukungan untuk vektor drawable pada platform Android tidak ditambahkan sampai Android 5.0 (API level 21).

Berdasarkan cara Anda menyiapkan project, versi SDK minimum untuk aplikasi Tip Time adalah API 19. Ini berarti aplikasi dapat berjalan pada perangkat Android yang menjalankan platform Android versi 19 atau yang lebih tinggi.

Agar aplikasi Anda berfungsi pada versi Android yang lebih lama (dikenal sebagai kompatibilitas mundur), tambahkan elemen vectorDrawables ke file build.gradle aplikasi Anda. Hal ini memungkinkan Anda untuk menggunakan vektor drawable pada versi platform kurang dari API 21, dibandingkan melakukan konversi ke PNG saat project dibuat. Lihat detail lebih lanjut di sini.

app/build.gradle

android {
  defaultConfig {
    ...
    vectorDrawables.useSupportLibrary = true
   }
   ...
}

Setelah project dikonfigurasi dengan benar, kini Anda bisa memindahkan ikon ke tata letak.

Menyisipkan ikon dan elemen posisi

Anda akan menggunakan ImageViews untuk menampilkan ikon di aplikasi. Inilah tampilan akhir UI Anda.

1. Buka tata letak activity_main.xml.
2. Pertama-tama, posisikan ikon toko di samping kolom teks biaya layanan. Masukkan ImageView baru sebagai turunan pertama ConstraintLayout, sebelum TextInputLayout.

<androidx.constraintlayout.widget.ConstraintLayout
   ...>

   <ImageView
       android:layout_width=""
       android:layout_height=""

   <com.google.android.material.textfield.TextInputLayout
       android:id="@+id/cost_of_service"
       ...

3. Siapkan atribut yang sesuai di ImageView untuk menyimpan ikon ic_store. Setel ID ke icon_cost_of_service. Setel atribut app:srcCompat ke resource drawable @drawable/ic_store, dan Anda akan melihat pratinjau ikon di samping baris XML tersebut. Setel juga android:importantForAccessibility="no" karena gambar ini hanya digunakan untuk tujuan dekorasi.

<ImageView
    android:id="@+id/icon_cost_of_service"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:importantForAccessibility="no"
    app:srcCompat="@drawable/ic_store" />

Diperkirakan akan terjadi error pada ImageView karena tampilan tersebut belum dibatasi. Anda akan memperbaikinya nanti.

4. Posisikan icon_cost_of_service dalam dua langkah. Pertama tambahkan batasan ke ImageView (langkah ini), lalu update batasan pada TextInputLayout di sampingnya (langkah 5). Diagram ini menunjukkan cara menyiapkan batasan.

Pada ImageView, Anda ingin tepi awal dibatasi ke tepi awal tampilan induk (app:layout_constraintStart_toStartOf="parent").

Ikon muncul di tengah secara vertikal dibandingkan kolom teks di sampingnya, jadi batasi bagian atas ImageView (layout_constraintTop_toTopOf) ini ke bagian atas kolom teks. Batasi bagian bawah ImageView ini (layout_constraintBottom_toBottomOf) ke bagian bawah kolom teks. Untuk merujuk pada kolom teks, gunakan ID resource @id/cost_of_service. Perilaku defaultnya adalah saat dua batasan diterapkan ke widget dalam dimensi yang sama (seperti batas atas dan bawah), batasan akan diterapkan dengan sama. Hasilnya adalah ikon ditempatkan secara vertikal di tengah, dalam kaitannya dengan kolom biaya layanan.

<ImageView
    android:id="@+id/icon_cost_of_service"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:importantForAccessibility="no"
    app:srcCompat="@drawable/ic_store"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@id/cost_of_service"
    app:layout_constraintBottom_toBottomOf="@id/cost_of_service" />

Ikon dan kolom teks masih tumpang-tindih dalam tampilan Desain. Hal itu akan diperbaiki pada langkah berikutnya.

5. Sebelum penambahan ikon, kolom teks diposisikan di awal induk. Sekarang gambar perlu bergeser ke kanan. Perbarui batasan pada kolom teks cost_of_service sehubungan dengan icon_cost_of_service.

Tepi awal TextInputLayout harus dibatasi ke tepi akhir ImageView (@id/icon_cost_of_service). Untuk menambahkan jarak antara dua tampilan, tambahkan margin awal sebesar 16dp pada TextInputLayout.

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/cost_of_service"
    ...
    android:layout_marginStart="16dp"
    app:layout_constraintStart_toEndOf="@id/icon_cost_of_service">

    <com.google.android.material.textfield.TextInputEditText ... />

</com.google.android.material.textfield.TextInputLayout>

Setelah semua perubahan ini, ikon harus diposisikan dengan benar di samping kolom teks.

6. Selanjutnya, masukkan ikon lonceng layanan di samping "Bagaimana hasil layanannya?" TextView. Meskipun Anda dapat mendeklarasikan ImageView di mana saja dalam ConstraintLayout, tata letak XML akan lebih mudah dibaca jika Anda menyisipkan ImageView baru dalam tata letak XML setelah TextInputLayout, tetapi sebelum service_question TextView.

Untuk ImageView baru, tetapkan ID resource sebesar @+id/icon_service_question. Tetapkan batasan yang sesuai pada ImageView dan pertanyaan layanan TextView.

Tambahkan juga 16dp margin atas ke service_question TextView sehingga ada lebih banyak ruang vertikal antara pertanyaan layanan dan kolom teks biaya layanan di atasnya.

...

   <ImageView
        android:id="@+id/icon_service_question"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:importantForAccessibility="no"
        app:srcCompat="@drawable/ic_service"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/service_question"
        app:layout_constraintBottom_toBottomOf="@id/service_question" />

    <TextView
        android:id="@+id/service_question"
        ...
        android:layout_marginTop="16dp"
        app:layout_constraintStart_toStartOf="@id/cost_of_service"
        app:layout_constraintTop_toBottomOf="@id/cost_of_service"/>

...

7. Pada titik ini, tampilan Desain akan terlihat seperti ini. Kolom biaya layanan dan pertanyaan layanan (dan ikonnya masing-masing) tampak bagus, namun tombol pilihan kini tampak tidak pada tempatnya. Mereka tidak sejajar secara vertikal dengan konten di atasnya.

8. Tingkatkan posisi tombol pilihan dengan menggesernya ke kanan, di bawah pertanyaan layanan. Itu berarti memperbarui batasan RadioGroup. Membatasi tepi awal RadioGroup ke tepi awal service_question TextView. Semua atribut lain di RadioGroup dapat tetap sama.

...

<RadioGroup
    android:id="@+id/tip_options"
    ...
    app:layout_constraintStart_toStartOf="@id/service_question">

...

9. Lalu lanjutkan dengan menambahkan ikon ic_round_up ke tata letak di samping tombol "Tips pembulatan ke atas?". Coba lakukan ini sendiri dan jika Anda mengalami kesulitan, Anda dapat melihat XML di bawah. Anda dapat menetapkan ImageView ID resource icon_round_up yang baru.
10. Pada XML tata letak, sisipkan ImageView baru setelah RadioGroup tetapi sebelum widget SwitchMaterial.
11. Tetapkan ImageView ID resource icon_round_up dan tetapkan srcCompat ke ikon @drawable/ic_round_up yang drawable. Membatasi awal ImageView hingga awal induk, dan juga secara vertikal memusatkan ikon secara relatif terhadap SwitchMaterial.
12. Perbarui SwitchMaterial agar muncul di samping ikon dan memiliki margin awal 16dp. Ini adalah hasil XML yang seharusnya terlihat untuk icon_round_up dan round_up_switch.

...

   <ImageView
        android:id="@+id/icon_round_up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:importantForAccessibility="no"
        app:srcCompat="@drawable/ic_round_up"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/round_up_switch"
        app:layout_constraintBottom_toBottomOf="@id/round_up_switch" />

    <com.google.android.material.switchmaterial.SwitchMaterial
        android:id="@+id/round_up_switch"
        ...
        android:layout_marginStart="16dp"
        app:layout_constraintStart_toEndOf="@id/icon_round_up" />

...

13. Tampilan Desain akan terlihat seperti ini. Ketiga ikon tersebut diposisikan dengan benar.

14. Jika membandingkannya dengan screenshot aplikasi final, Anda akan melihat tombol hitung juga digeser supaya sejajar secara vertikal dengan kolom biaya layanan, pertanyaan layanan, opsi tombol pilihan, dan pertanyaan tips pembulatan ke atas. Dapatkan tampilan ini dengan membatasi awal tombol penghitungan menjadi awal round_up_switch. Juga tambahkan 8dp margin vertikal antara tombol hitung dan tombol di atasnya.

...

<Button
   android:id="@+id/calculate_button"
   ...
   android:layout_marginTop="8dp"
   app:layout_constraintStart_toStartOf="@id/round_up_switch" />

...

15. Terakhir, posisikan tip_result dengan menambahkan 8dp margin atas ke TextView.

...

<TextView
   android:id="@+id/tip_result"
   ...
   android:layout_marginTop="8dp" />

...

16. Itu adalah langkah yang panjang! Selamat, Anda berhasil menyelesaikannya langkah demi langkah. Memang diperlukan banyak perhatian terhadap detail agar elemen disejajarkan dengan benar dalam tata letak, namun membuat hasil akhirnya terlihat jauh lebih baik! Jalankan aplikasi dan akan terlihat seperti screenshot di bawah. Dengan menyelaraskan dan meningkatkan jarak antar-elemen secara vertikal, elemen-elemen tersebut tidak akan terlalu padat.

Tunggu, Anda belum selesai! Anda mungkin mendapati bahwa ukuran dan warna font dari pertanyaan layanan dan jumlah tip terlihat berbeda dari teks dalam tombol pilihan dan tombol akses. Mari kita buat konsisten di tugas berikutnya dengan menggunakan gaya dan tema.

Gaya adalah kumpulan nilai atribut tampilan untuk satu jenis widget. Misalnya, gaya TextView dapat menentukan warna font, ukuran font, dan warna latar belakang. Dengan mengekstrak atribut ini ke dalam gaya, Anda dapat dengan mudah menerapkan gaya ke beberapa tampilan dalam tata letak dan menyimpannya di satu tempat.

Dalam tugas ini, pertama-tama Anda akan membuat gaya untuk tampilan teks, tombol pilihan, dan widget tombol akses.

Menciptakan Gaya

1. Buat file baru bernama styles.xml di direktori res > values jika belum ada. Buat dengan mengeklik kanan direktori nilai dan memilih New > Values Resource File. Sebut sebagai styles.xml. File baru akan berisi konten berikut.

<?xml version="1.0" encoding="utf-8"?>
<resources>
</resources>

2. Buat gaya TextView baru sehingga teks terlihat konsisten di seluruh aplikasi. Tentukan gaya satu kali pada styles.xml, lalu Anda dapat menerapkannya ke semua TextViews di tata letak. Meskipun Anda dapat menentukan gaya dari awal, Anda dapat memperluas dari gaya TextView yang ada dari library MDC.

Saat menata gaya komponen, umumnya Anda harus memperluas gaya induk dari jenis widget yang Anda gunakan. Hal ini penting karena dua alasan. Pertama, memastikan bahwa semua nilai default yang penting ditetapkan pada komponen Anda, dan kedua, gaya Anda akan terus mewarisi perubahan apa pun pada gaya induk tersebut di masa mendatang.

Anda bisa memberi nama gaya dengan apa pun yang Anda inginkan, tetapi ada konvensi yang disarankan. Jika Anda mewarisi dari gaya Material induk, beri nama gaya Anda secara paralel dengan mengganti MaterialComponents dengan nama aplikasi (TipTime). Tindakan ini akan memindahkan perubahan Anda ke ruang nama sendiri yang menghilangkan kemungkinan konflik di masa mendatang saat Komponen Material memperkenalkan gaya baru. Contoh:

Nama gaya Anda: Widget.TipTime.TextView Mewarisi dari gaya induk: Widget.MaterialComponents.TextView

Tambahkan ini ke file styles.xml Anda di antara tag pembuka dan penutup resources.

<style name="Widget.TipTime.TextView" parent="Widget.MaterialComponents.TextView">
</style>

3. Siapkan gaya TextView Anda sehingga mengganti atribut berikut: android:minHeight,android:gravity, dan android:textAppearance.

android:minHeight menetapkan tinggi minimum 48 dp pada TextView. Tinggi terkecil untuk setiap baris harus 48 dp sesuai dengan panduan Desain Material.

Anda dapat memusatkan teks di TextView secara vertikal dengan menyetel atribut android:gravity. (Lihat screenshot di bawah.) Gravitasi mengontrol bagaimana konten dalam tampilan akan diposisikan sendiri. Karena konten teks yang sebenarnya tidak mencapai 48dp penuh, nilai center_vertical akan menempatkan teks dalam TextView secara vertikal (tetapi tidak mengubah posisi horizontal). Nilai gravitasi lain yang mungkin meliputi center, center_horizontal, top, dan bottom. Jangan ragu untuk mencoba nilai gravitasi lainnya untuk melihat efeknya pada teks.

Setel nilai atribut tampilan teks ke ?attr/textAppearanceBody1. TextAppearance adalah kumpulan gaya siap pakai di sekitar ukuran teks, font, dan properti teks lainnya. Untuk mengetahui kemungkinan tampilan teks lain yang disediakan oleh Material, lihat daftar skala jenis ini.

<style name="Widget.TipTime.TextView" parent="Widget.MaterialComponents.TextView">
    <item name="android:minHeight">48dp</item>
    <item name="android:gravity">center_vertical</item>
    <item name="android:textAppearance">?attr/textAppearanceBody1</item>
</style>

4. Terapkan gaya Widget.TipTime.TextView ke service_question TextView dengan menambahkan atribut gaya pada setiap TextView di activity_main.xml.

<TextView
    android:id="@+id/service_question"
    style="@style/Widget.TipTime.TextView"
    ... />

Sebelum gaya, TextView terlihat seperti ini dengan ukuran font kecil dan warna font abu-abu:

Setelah menambahkan gaya, TextView akan terlihat seperti ini. Sekarang TextView terlihat lebih konsisten dengan tata letak lainnya.

5. Terapkan gaya Widget.TipTime.TextView yang sama ke tip_result TextView.

<TextView
    android:id="@+id/tip_result"
    style="@style/Widget.TipTime.TextView"
    ... />

6. Gaya teks yang sama harus diterapkan ke label teks di tombol akses. Namun, Anda tidak dapat menyetel gaya TextView ke widget SwitchMaterial. Gaya TextView hanya dapat diterapkan pada TextViews. Oleh karena itu, buat gaya baru untuk tombol akses. Atributnya sama dalam hal minHeight, gravity, dan textAppearance. Yang berbeda di sini adalah nama gaya dan induk karena Anda sekarang mewarisinya dari gaya Switch dari library MDC. Nama Anda untuk gaya juga harus mencerminkan nama gaya induk.

Nama gaya Anda: Widget.TipTime.CompoundButton.Switch. Mewarisi dari gaya induk: Widget.MaterialComponents.CompoundButton.Switch

<style name="Widget.TipTime.CompoundButton.Switch" parent="Widget.MaterialComponents.CompoundButton.Switch">
   <item name="android:minHeight">48dp</item>
   <item name="android:gravity">center_vertical</item>
   <item name="android:textAppearance">?attr/textAppearanceBody1</item>
</style>

Anda juga bisa menetapkan atribut tambahan khusus untuk beralih dengan gaya ini, namun tidak diperlukan dalam aplikasi.

7. Teks tombol pilihan adalah tempat terakhir yang Anda inginkan untuk memastikan teks muncul secara konsisten. Anda tidak dapat menerapkan gaya TextView atau gaya Switch ke dalam widget RadioButton. Sebagai gantinya, Anda harus membuat gaya baru untuk tombol pilihan. Anda dapat memperluas dari gaya RadioButton library MDC.

Saat Anda membuat gaya ini, tambahkan juga padding di antara teks tombol pilihan dan visual lingkaran. paddingStart adalah atribut baru yang belum Anda gunakan. Padding adalah jumlah ruang antara isi tampilan dan batas tampilan. Atribut paddingStart hanya menyetel padding di awal komponen. Lihat perbedaan antara 0 dp dan 8 dp paddingStart pada tombol pilihan.

<style name="Widget.TipTime.CompoundButton.RadioButton"
parent="Widget.MaterialComponents.CompoundButton.RadioButton">
   <item name="android:paddingStart">8dp</item>
   <item name="android:textAppearance">?attr/textAppearanceBody1</item>
</style>

8. (Opsional) Buat file dimens.xml untuk meningkatkan pengelolaan nilai yang sering digunakan. Anda dapat membuat file dengan cara yang sama seperti yang Anda lakukan untuk file styles.xml di atas. Pilih direktori nilai, klik kanan dan pilih New > Values Resource File.

Dalam aplikasi kecil ini, Anda telah mengulangi pengaturan tinggi minimum dua kali. Hal itu sudah pasti dapat dikelola untuk saat ini, tetapi akan segera lepas kendali jika kami memiliki 4, 6, 10 atau lebih komponen yang berbagi nilai tersebut. Ingatlah jika mengubah semua ini satu per satu akan membosankan dan rentan error. Anda dapat membuat file resource lain yang bermanfaat dalam res > values yang disebut dimens.xml yang menyimpan dimensi umum yang dapat Anda beri nama. Dengan membuat standar nilai umum sebagai dimensi bernama, kami mempermudah pengelolaan aplikasi. TipTime berukuran kecil sehingga kami tidak akan menggunakannya di luar langkah opsional ini. Namun, dengan aplikasi yang lebih kompleks di lingkungan produksi tempat Anda dapat bekerja sama dengan tim desain, dimens.xml akan lebih mempermudah Anda untuk lebih sering mengubah nilai ini.

dimens.xml

<resources>
   <dimen name="min_text_height">48dp</dimen>
</resources>

Anda akan memperbarui file styles.xml untuk menggunakan @dimen/min_text_height, bukan 48dp secara langsung.

...
<style name="Widget.TipTime.TextView" parent="Widget.MaterialComponents.TextView">
    <item name="android:minHeight">@dimen/min_text_height</item>
    <item name="android:gravity">center_vertical</item>
    <item name="android:textAppearance">?attr/textAppearanceBody1</item>
</style>
...

Menambahkan gaya ini ke tema Anda

Anda mungkin menyadari bahwa Anda belum menerapkan gaya RadioButton dan Switch baru ke masing-masing widget. Alasannya adalah karena Anda akan menggunakan atribut tema untuk menetapkan radioButtonStyle dan switchStyle dalam tema aplikasi. Mari kita bahas kembali apa yang dimaksud dengan tema.

Tema adalah koleksi resource yang bernama (disebut atribut tema) yang dapat direferensikan nanti dalam gaya, tata letak, dll. Anda dapat menentukan tema untuk seluruh aplikasi, aktivitas, atau hierarki tampilan—bukan hanya individu View. Sebelumnya Anda memodifikasi tema aplikasi di themes.xml dengan menyetel atribut tema seperti colorPrimary dan colorSecondary, yang digunakan di seluruh aplikasi dan komponennya.

radioButtonStyle dan switchStyle adalah atribut tema lainnya yang dapat Anda setel. Resource gaya yang Anda berikan untuk atribut tema ini akan diterapkan ke setiap tombol pilihan dan setiap tombol dalam hierarki tampilan tempat tema diterapkan.

Ada juga atribut tema untuk textInputStyle tempat resource gaya yang ditentukan akan diterapkan ke semua kolom input teks dalam aplikasi. Untuk membuat TextInputLayout muncul seperti kolom teks yang diuraikan (seperti yang ditampilkan dalam pedoman Desain Material), ada gaya OutlinedBox yang ditentukan di library MDC sebagai Widget.MaterialComponents.TextInputLayout.OutlinedBox. Ini adalah gaya yang akan Anda gunakan.

1. Ubah file themes.xml agar tema merujuk ke gaya yang diinginkan. Menyetel atribut tema dilakukan dengan cara yang sama seperti Anda mendeklarasikan atribut tema colorPrimary dan colorSecondary dalam codelab sebelumnya. Namun, kali ini, atribut tema yang relevan adalah textInputStyle, radioButtonStyle, dan switchStyle. Anda akan menggunakan gaya yang telah Anda buat sebelumnya untuk kolom teks RadioButton dan Switch bersama gaya untuk kolom teks OutlinedBox Material.

Salin teks berikut ke res/values/themes.xml ke tag gaya untuk tema aplikasi Anda.

<item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
<item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
<item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>

2. Berikut ini tampilan file res/values/themes.xml Anda. Anda dapat menambahkan komentar dalam XML jika diinginkan (ditunjukkan dengan <!-- dan -->).

<resources xmlns:tools="http://schemas.android.com/tools">

    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        ...
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Text input fields -->
        <item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
        <!-- Radio buttons -->
        <item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
        <!-- Switches -->
        <item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>
    </style>

</resources>

3. Pastikan Anda melakukan perubahan yang sama pada tema gelap di themes.xml (malam). File res/values-night/themes.xml Anda seharusnya terlihat seperti ini:

<resources xmlns:tools="http://schemas.android.com/tools">

    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        ...
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Text input fields -->
        <item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
        <!-- For radio buttons -->
        <item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
        <!-- For switches -->
        <item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>
    </style>

</resources>

4. Jalankan aplikasi dan lihat perubahannya. Gaya OutlinedBox terlihat jauh lebih baik untuk kolom teks, dan semua teks kini terlihat konsisten!

Saat Anda hampir menyelesaikan aplikasi, Anda harus menguji aplikasi Anda tidak hanya dengan alur kerja yang diharapkan, tetapi juga dalam skenario pengguna lain. Anda mungkin menemukan bahwa beberapa perubahan kecil pada kode dapat berpengaruh besar dalam meningkatkan pengalaman pengguna.

Memutar perangkat

1. Memutar perangkat ke mode lanskap Anda mungkin perlu mengaktifkan setelan Putar otomatis terlebih dahulu. (Ini terletak di bawah Setelan Cepat perangkat atau di bawah opsi Settings > Display > Advanced > Auto-rotate screen.)

Pada emulator, Anda dapat menggunakan opsi emulator (terletak di sisi kanan atas yang berdekatan dengan perangkat) untuk memutar layar ke kanan atau ke kiri.

2. Anda akan melihat beberapa komponen UI termasuk tombol Hitung akan terpotong. Ini jelas menghambat Anda menggunakan aplikasi!

3. Untuk mengatasi bug ini, tambahkan ScrollView di sekitar ConstraintLayout. XML Anda akan terlihat seperti ini.

<ScrollView
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_height="match_parent"
   android:layout_width="match_parent">

   <androidx.constraintlayout.widget.ConstraintLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:padding="16dp"
       tools:context=".MainActivity">

       ...
   </ConstraintLayout>

</ScrollView>

4. Jalankan dan uji aplikasi lagi. Saat merotasi perangkat ke mode lanskap, Anda dapat scroll UI untuk mengakses tombol kalkulasi dan melihat hasil tips. Perbaikan ini tidak hanya berguna untuk mode lanskap, tetapi juga untuk perangkat Android lain yang mungkin memiliki dimensi berbeda. Kini, terlepas dari ukuran layar perangkat, pengguna dapat men-scroll tata letak.

Menyembunyikan keyboard pada tombol Enter

Anda mungkin telah memperhatikan bahwa setelah Anda memasukkan biaya layanan, keyboard akan tetap aktif. Sedikit lebih mudah menyembunyikan keyboard secara manual setiap kali untuk mengakses tombol penghitungan dengan lebih baik. Sebagai gantinya, buat agar keyboard otomatis tersembunyi dengan sendirinya saat tombol Enter ditekan.

Untuk kolom teks, Anda bisa menentukan pemroses kunci untuk merespons peristiwa saat tombol tertentu diketuk. Setiap opsi entri yang ada di keyboard memiliki kode kunci yang terkait, termasuk kunci Enter. Perhatikan bahwa keyboard di layar juga dikenal sebagai keyboard virtual, bukan keyboard fisik.

Dalam tugas ini, siapkan pemroses kunci pada kolom teks yang akan diproses saat kunci Enter ditekan. Saat peristiwa tersebut terdeteksi, sembunyikan keyboard.

1. Salin dan tempelkan metode bantuan ini ke class MainActivity Anda. Anda dapat memasukkannya tepat sebelum kurung kurawal tutup dari class MainActivity. handleKeyEvent() adalah fungsi bantuan pribadi yang menyembunyikan keyboard di layar jika parameter input keyCode sama dengan KeyEvent.KEYCODE_ENTER. InputMethodManager mengontrol saat keyboard virtual ditampilkan, disembunyikan, dan memungkinkan pengguna memilih keyboard virtual mana yang akan ditampilkan. Metode ini menampilkan nilai benar jika peristiwa kunci ditangani, dan menampilkan nilai salah jika tidak.

MainActivity.kt

private fun handleKeyEvent(view: View, keyCode: Int): Boolean {
   if (keyCode == KeyEvent.KEYCODE_ENTER) {
       // Hide the keyboard
       val inputMethodManager =
           getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
       inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)
       return true
   }
   return false
}

2. Sekarang lampirkan pemroses kunci di widget TextInputEditText. Ingatlah bahwa Anda dapat mengakses widget TextInputEditText melalui objek binding sebagai binding.costOfServiceEditText.

Panggil metode setOnKeyListener() pada costOfServiceEditText dan teruskan OnKeyListener. Ini mirip dengan cara Anda menetapkan pemroses klik pada tombol hitung di aplikasi dengan binding.calculateButton.setOnClickListener { calculateTip() }.

Kode untuk menyetel pemroses kunci pada tampilan sedikit lebih kompleks, tetapi ide umumnya adalah OnKeyListener memiliki metode onKey() yang dipicu saat penekanan kunci terjadi. Metode onKey() menggunakan 3 argumen input: tampilan, kode untuk kunci yang ditekan, dan peristiwa kunci (yang tidak akan Anda gunakan, sehingga Anda dapat menyebutnya "_"). Saat metode onKey() dipanggil, Anda harus memanggil metode handleKeyEvent() dan meneruskan argumen tampilan dan kode kunci. Sintaks untuk menulis ini adalah: view, keyCode, _ -> handleKeyEvent(view, keyCode). Ini sebenarnya disebut ekspresi lambda, tetapi Anda akan mempelajari lebih lanjut tentang lambda di unit berikutnya.

Tambahkan kode untuk menyiapkan pemroses kunci pada kolom teks dalam metode onCreate() aktivitas. Hal ini karena Anda ingin pemroses kunci Anda dilampirkan segera setelah tata letak dibuat dan sebelum pengguna mulai berinteraksi dengan aktivitas.

MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {
   ...

   setContentView(binding.root)

   binding.calculateButton.setOnClickListener { calculateTip() }

   binding.costOfServiceEditText.setOnKeyListener { view, keyCode, _ -> handleKeyEvent(view, keyCode)
   }
}

3. Uji apakah perubahan baru Anda berhasil. Jalankan aplikasi dan masukkan biaya layanan. Tekan tombol Enter pada keyboard dan keyboard virtual akan disembunyikan.

Menguji aplikasi Anda dengan Talkback diaktifkan

Seperti yang telah Anda pelajari selama kursus ini, Anda ingin membuat aplikasi yang bisa diakses oleh sebanyak mungkin pengguna. Beberapa pengguna mungkin menggunakan Talkback untuk mengakses dan menavigasi aplikasi Anda. TalkBack adalah pembaca layar Google yang disertakan di perangkat Android. TalkBack memberikan masukan lisan sehingga Anda dapat menggunakan perangkat tanpa melihat layar.

Jika Talkback aktif, pastikan pengguna dapat menyelesaikan kasus penggunaan penghitungan tips dalam aplikasi Anda.

1. Aktifkan Talkback di perangkat Anda dengan mengikuti petunjuk ini.
2. Kembali ke aplikasi Tip Time.
3. Jelajahi aplikasi Anda dengan Talkback menggunakan petunjuk ini. Geser ke kanan untuk menavigasi elemen layar secara berurutan, dan geser ke kiri untuk beralih ke arah yang berlawanan. Ketuk dua kali di mana saja untuk memilih. Verifikasi bahwa Anda dapat menjangkau semua elemen aplikasi dengan gestur geser.
4. Pastikan pengguna Talkback dapat menavigasi ke setiap item di layar, memasukkan biaya layanan, mengubah opsi tips, menghitung tips, dan mendengar tips yang diumumkan. Ingat bahwa tidak ada masukan lisan yang diberikan untuk ikon karena Anda menandainya sebagai importantForAccessibility="no" .

Untuk informasi selengkapnya tentang cara membuat aplikasi lebih mudah diakses, lihat prinsip ini.

(Opsional) Menyesuaikan tint vektor drawable

Dalam tugas opsional ini, Anda akan memberi tint ikon berdasarkan warna utama tema, sehingga ikon muncul secara berbeda dalam tema terang vs. gelap (seperti yang terlihat di bawah). Perubahan ini merupakan tambahan yang bagus untuk UI Anda agar ikon tampak lebih kohesif dengan tema aplikasi.

Seperti yang telah disebutkan sebelumnya, salah satu keuntungan VectorDrawables dibandingkan gambar bitmap adalah kemampuan untuk menskalakan dan mewarnainya. Di bawah, terdapat XML yang mewakili ikon lonceng. Ada dua atribut warna khusus yang perlu diperhatikan: android:tint dan android:fillColor.

ic_service.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="24dp"
   android:height="24dp"
   android:viewportWidth="24"
   android:viewportHeight="24"
   android:tint="?attr/colorControlNormal">
 <path
     android:fillColor="@android:color/white"
     android:pathData="M2,17h20v2L2,19zM13.84,7.79c0.1,-0.24 0.16,-0.51 0.16,-0.79 0,-1.1 -0.9,-2 -2,-2s-2,0.9 -2,2c0,0.28 0.06,0.55 0.16,0.79C6.25,8.6 3.27,11.93 3,16h18c-0.27,-4.07 -3.25,-7.4 -7.16,-8.21z"/>
</vector>

Jika ada tint, fungsi ini akan menggantikanfillColor perintah untuk drawable. Dalam hal ini, warna putih diganti dengan atribut tema colorControlNormal. colorControlNormal adalah warna "normal" (status tidak dipilih/tidak diaktifkan) widget. Saat ini warnanya abu-abu.

Salah satu penyempurnaan visual yang dapat kita lakukan pada aplikasi adalah untuk memberi warna pada drawable berdasarkan warna utama tema aplikasi. Untuk tema terang, ikon akan muncul sebagai @color/green, sedangkan di tema gelap, ikon akan muncul sebagai @color/green_light, yaitu ?attr/colorPrimary. Pewarnaan drawable berdasarkan warna utama tema aplikasi dapat membuat elemen dalam tata letak tampak lebih terpadu dan kohesif. Cara ini juga menghindarkan kita dari keharusan untuk menduplikasi kumpulan ikon untuk tema terang dan tema gelap. Hanya ada 1 kumpulan vektor drawable, dan tint akan berubah berdasarkan atribut tema colorPrimary.

1. Ubah nilai atribut android:tint dalam ic_service.xml

android:tint="?attr/colorPrimary"

Di Android Studio, ikon tersebut memiliki tint yang tepat.

Nilai yang ditunjukkan oleh atribut tema colorPrimary akan berbeda, tergantung pada tema terang vs. gelap.

2. Ulangi hal yang sama untuk mengubah tint pada vektor drawable lainnya.

ic_store.xml

<vector ...
   android:tint="?attr/colorPrimary">
   ...
</vector>

ic_round_up.xml

<vector ...
   android:tint="?attr/colorPrimary">
   ...
</vector>

3. Jalankan aplikasi. Pastikan ikon muncul secara berbeda dalam tema terang vs. gelap.
4. Sebagai langkah pembersihan akhir, jangan lupa untuk memformat ulang semua file kode XML dan Kotlin di aplikasi Anda.

Selamat, Anda akhirnya telah menyelesaikan aplikasi tip calculator! Anda harus sangat bangga dengan apa yang telah Anda buat. Semoga ini menjadi batu loncatan bagi Anda untuk membuat aplikasi yang lebih indah dan fungsional!

Kode solusi untuk codelab ini ada di repositori GitHub yang tercantum di bawah.

Untuk mendapatkan kode codelab ini dan membukanya di Android Studio, lakukan hal berikut.

Mendapatkan kode

1. Klik URL yang diberikan. Tindakan ini akan membuka halaman GitHub project di browser.
2. Di halaman GitHub project, klik tombol Code yang akan menampilkan dialog.

3. Di dialog, klik tombol Download ZIP untuk menyimpan project di komputer. Tunggu download selesai.
4. Temukan file di komputer Anda (mungkin di folder Downloads).
5. Klik dua kali pada file ZIP untuk mengekstraknya. Tindakan ini akan membuat folder baru yang berisi file project.

Membuka project di Android Studio

1. Mulai Android Studio.
2. Di jendela Welcome to Android Studio, klik Open an existing Android Studio project.

Catatan: Jika Android Studio sudah terbuka, pilih opsi menu File > New > Import Project.

3. Di dialog Import Project, buka lokasi folder project yang telah diekstrak (kemungkinan ada di folder Downloads).
4. Klik dua kali pada folder project tersebut.
5. Tunggu Android Studio membuka project.
6. Klik tombol Run untuk membuat dan menjalankan aplikasi. Pastikan aplikasi berfungsi seperti yang diharapkan.
7. Cari file project di jendela alat Project untuk melihat cara aplikasi diterapkan.

• Gunakan Komponen Desain Material jika memungkinkan untuk mematuhi pedoman Desain Material dan memungkinkan penyesuaian lainnya.
• Tambahkan ikon untuk memberikan petunjuk visual kepada pengguna tentang bagaimana bagian aplikasi akan berfungsi.
• Gunakan ConstraintLayout untuk memosisikan elemen di tata letak.
• Uji aplikasi Anda untuk perihal bidang (misalnya memutar aplikasi dalam mode lanskap) dan lakukan penyempurnaan jika memungkinkan.
• Beri komentar pada kode Anda untuk membantu orang lain yang membaca kode tersebut memahami pendekatan Anda.
• Format ulang kode dan bersihkan kode agar seringkas mungkin.

• Kolom teks
• Kontrol pilihan: tombol akses
• Ikon Material
• Tema Tipografi
• Gravitasi

• Sebagai kelanjutan dari codelab sebelumnya, update aplikasi pemroses pengonversi satuan untuk lebih mengikuti panduan Material dengan menggunakan praktik terbaik yang Anda pelajari di sini (seperti menggunakan Komponen Desain Material).