Dasar-Dasar Android Kotlin 10.3: Desain untuk semua orang

Codelab ini adalah bagian dari kursus Dasar-Dasar Android Kotlin. Anda akan mendapatkan manfaat maksimal dari kursus ini jika menyelesaikan codelab secara berurutan. Semua codelab kursus tercantum di halaman landing codelab Dasar-Dasar Android Kotlin.

Codelab ini adalah bagian dari rangkaian yang mengajarkan dasar-dasar desain aplikasi Android dan memandu Anda dalam membangun aplikasi yang menemukan pertemuan Google Developer Group (GDG). Aplikasi ini menampilkan informasi tentang pertemuan mendatang dengan cara yang menarik dan mudah diakses.

Sebaiknya Anda mempelajari tiga codelab dalam seri ini secara berurutan, karena Anda perlu menyelesaikan setiap tugas langkah demi langkah:

• 10.1 Gaya dan tema
• 10.2 Desain Material, dimensi, dan warna
• 10.3 Desain untuk semua orang

Pengantar

Membuat aplikasi yang dapat digunakan oleh sebagian besar pengguna adalah hal yang masuk akal, baik Anda mengembangkan aplikasi untuk kesenangan, atau untuk tujuan bisnis. Ada beberapa dimensi untuk mencapai hal tersebut.

• Mendukung Bahasa RTL. Bahasa Eropa dan banyak bahasa lainnya dibaca dari kiri ke kanan, dan aplikasi yang berasal dari lokalitas tersebut biasanya didesain agar cocok untuk bahasa tersebut. Banyak bahasa lain dengan jumlah penutur yang besar dibaca dari kanan ke kiri, seperti bahasa Arab. Buat aplikasi Anda berfungsi dengan bahasa kanan-ke-kiri (RTL) untuk meningkatkan audiens potensial Anda.
• Pindai aksesibilitas. Menebak bagaimana orang lain dapat merasakan pengalaman menggunakan aplikasi Anda adalah opsi yang memiliki kekurangan. Aplikasi Accessibility Scanner menghilangkan tebakan dalam proses dan menganalisis aplikasi Anda, mengidentifikasi area yang dapat ditingkatkan aksesibilitasnya.
• Desain untuk TalkBack dengan deskripsi konten. Gangguan penglihatan lebih umum daripada yang mungkin Anda kira, dan banyak pengguna, bukan hanya pengguna tunanetra, menggunakan pembaca layar. Deskripsi konten adalah frasa yang dibacakan oleh pembaca layar saat pengguna berinteraksi dengan elemen layar.
• Mendukung mode malam. Bagi banyak pengguna yang menderita gangguan penglihatan, mengubah warna layar akan meningkatkan kontras dan membantu mereka menggunakan aplikasi Anda secara visual. Android mempermudah dukungan mode malam, dan Anda harus selalu mendukung mode malam untuk memberi pengguna alternatif sederhana pada warna layar default.

Dalam codelab ini, Anda akan mempelajari setiap opsi ini dan menambahkan dukungan untuknya ke aplikasi GDG Finder.

Anda juga akan mempelajari cara menggunakan chip dengan aplikasi Android. Anda dapat menggunakan chip untuk membuat aplikasi lebih menarik, sekaligus tetap menjaga aksesibilitasnya.

Yang harus sudah Anda ketahui

Anda harus memahami:

• Cara membuat aplikasi yang memiliki aktivitas dan fragmen, serta berpindah antar-fragmen dengan meneruskan data.
• Menggunakan tampilan dan grup tampilan untuk menata antarmuka pengguna, khususnya RecyclerView.
• Cara menggunakan Komponen Arsitektur, termasuk ViewModel, dengan arsitektur yang direkomendasikan untuk membuat aplikasi yang terstruktur dengan baik dan efisien.
• Pengikatan data, coroutine, dan cara menangani klik mouse.
• Cara terhubung ke internet dan meng-cache data secara lokal menggunakan database Room.
• Cara menyetel properti tampilan, dan cara mengekstrak resource ke dalam dan menggunakan resource dari file resource XML.
• Cara menggunakan gaya dan tema untuk menyesuaikan tampilan aplikasi Anda.
• Cara menggunakan komponen Material, resource dimensi, dan pewarnaan kustom.

Yang akan Anda pelajari

• Cara membuat aplikasi Anda dapat digunakan oleh sebagian besar pengguna.
• Cara membuat aplikasi Anda berfungsi untuk bahasa kanan-ke-kiri (RTL).
• Cara mengevaluasi aksesibilitas aplikasi Anda.
• Cara menggunakan deskripsi konten untuk membuat aplikasi Anda berfungsi lebih baik dengan pembaca layar.
• Cara menggunakan chip.
• Cara membuat aplikasi Anda berfungsi dengan mode gelap.

Yang akan Anda lakukan

• Mengevaluasi dan memperluas aplikasi tertentu untuk meningkatkan aksesibilitas dengan membuatnya berfungsi untuk bahasa RTL.
• Pindai aplikasi Anda untuk menentukan area yang aksesibilitasnya dapat ditingkatkan.
• Gunakan deskripsi konten untuk gambar.
• Pelajari cara menggunakan drawable.
• Menambahkan kemampuan untuk menggunakan mode malam ke aplikasi Anda.

Aplikasi awal pencari GDG dibangun berdasarkan semua yang telah Anda pelajari sejauh ini dalam kursus ini.

Aplikasi menggunakan ConstraintLayout untuk menata tiga layar. Dua layar hanyalah file tata letak yang akan Anda gunakan untuk menjelajahi warna dan teks di Android.

Layar ketiga adalah pencari GDG. GDG, atau Google Developer Group, adalah komunitas developer yang berfokus pada teknologi Google, termasuk Android. GDG di seluruh dunia menyelenggarakan pertemuan, konferensi, study jam, dan acara lainnya.

Saat mengembangkan aplikasi ini, Anda akan mengerjakan daftar GDG yang sebenarnya. Layar pencari menggunakan lokasi perangkat untuk mengurutkan GDG berdasarkan jarak.

Jika beruntung dan ada GDG di wilayah Anda, Anda dapat membuka situsnya dan mendaftar ke acara mereka. Acara GDG adalah cara yang tepat untuk bertemu dengan developer Android lain dan mempelajari praktik terbaik industri yang tidak termasuk dalam kursus ini.

Screenshot di bawah menunjukkan perubahan aplikasi Anda dari awal hingga akhir codelab ini.

Perbedaan utama antara bahasa kiri-ke-kanan (LTR) dan kanan-ke-kiri (RTL) adalah arah konten yang ditampilkan. Saat arah UI diubah dari LTR ke RTL (atau sebaliknya), hal ini sering disebut pencerminan. Pencerminan memengaruhi sebagian besar layar, termasuk teks, ikon kolom teks, tata letak, dan ikon dengan petunjuk (seperti panah). Item lain tidak dicerminkan, seperti angka (jam, nomor telepon), ikon yang tidak memiliki arah (mode pesawat, WiFi), kontrol pemutaran, dan sebagian besar diagram dan grafik.

Bahasa yang menggunakan arah teks RTL digunakan oleh lebih dari satu miliar orang di seluruh dunia. Developer Android berada di seluruh dunia, sehingga aplikasi GDG Finder perlu mendukung bahasa RTL.

Langkah 1: Tambahkan dukungan RTL

Pada langkah ini, Anda akan membuat aplikasi GDG Finder berfungsi dengan bahasa RTL.

1. Download dan jalankan aplikasi GDGFinderMaterial, yang merupakan aplikasi awal untuk codelab ini atau lanjutkan dari kode akhir codelab sebelumnya.
2. Buka Manifes Android.
3. Di bagian <application>, tambahkan kode berikut untuk menentukan bahwa aplikasi mendukung RTL.

<application
        ...
        android:supportsRtl="true">

4. Buka activity_main.xml di tab Design.
5. Dari menu dropdown Lokal untuk Pratinjau, pilih Pratinjau Kanan ke Kiri. (Jika Anda tidak menemukan menu ini, luaskan panel atau tutup panel Atribut untuk menampilkannya.)

Tips: Anda tidak perlu mengganti bahasa di perangkat untuk memeriksa tampilan visual aplikasi dalam RTL.

6. Di Pratinjau, perhatikan bahwa header "GDG Finder" telah berpindah ke kanan, dan bagian layar lainnya sebagian besar tetap sama. Secara keseluruhan, layar ini dapat diterima. Namun, perataan di tampilan teks sekarang salah, karena diratakan ke kiri, bukan ke kanan.

7. Agar ini berfungsi di perangkat Anda, di Setelan perangkat atau emulator Anda, di Opsi Developer, pilih Paksa tata letak RTL. (Jika Anda perlu mengaktifkan Opsi Developer, temukan Nomor Versi dan klik hingga Anda mendapatkan notifikasi singkat yang menunjukkan bahwa Anda adalah developer. Hal ini bervariasi menurut perangkat dan versi sistem Android.)

8. Jalankan aplikasi dan verifikasi di perangkat bahwa layar utama muncul sama seperti di Pratinjau. Perhatikan bahwa FAB kini dialihkan ke kiri, dan menu Tiga garis ke kanan.
9. Di aplikasi, buka panel navigasi dan buka layar Penelusuran. Seperti yang ditunjukkan di bawah, ikon masih berada di sebelah kiri, dan tidak ada teks yang terlihat. Ternyata teks berada di luar layar, di sebelah kiri ikon. Hal ini karena kode menggunakan referensi layar kiri/kanan dalam properti tampilan dan batasan tata letak.

Langkah 2: Gunakan start dan end, bukan left dan right

"Kiri" dan "kanan" di layar (saat Anda menghadap layar) tidak berubah, meskipun arah teks berubah. Misalnya, layout_constraintLeft_toLeftOf selalu membatasi sisi kiri elemen ke sisi kiri layar. Dalam kasus aplikasi Anda, teks berada di luar layar dalam bahasa RTL, seperti yang ditunjukkan pada screenshot di atas.

Untuk memperbaikinya, gunakan terminologi Start dan End, bukan "kiri" dan "kanan". Terminologi ini menetapkan awal teks dan akhir teks dengan tepat untuk arah teks dalam bahasa saat ini, sehingga margin dan tata letak berada di area layar yang benar.

1. Open list_item.xml.
2. Ganti semua referensi ke Left dan Right dengan referensi ke Start dan End.

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintStart_toEndOf="@+id/gdg_image"
app:layout_constraintEnd_toEndOf="parent"

3. Ganti layout_marginLeft ImageView dengan layout_marginStart. Hal ini akan memindahkan margin ke tempat yang benar untuk memindahkan ikon dari tepi layar.

<ImageView
android:layout_marginStart="
?

4. Buka fragment_gdg_list.xml. Periksa daftar GDG di panel Preview. Perhatikan bahwa ikon masih mengarah ke arah yang salah karena dicerminkan (Jika ikon tidak dicerminkan, pastikan Anda masih melihat pratinjau kanan ke kiri). Menurut panduan Desain Material, ikon tidak boleh dicerminkan.
5. Buka res/drawable/ic_gdg.xml.
6. Di baris pertama kode XML, temukan dan hapus android:autoMirrored="true" untuk menonaktifkan pencerminan.
7. Periksa Pratinjau atau jalankan aplikasi lagi dan buka layar Search GDG. Tata letak seharusnya sudah diperbaiki sekarang.

Tips: Android Studio memberikan tips yang ditandai dengan warna kuning untuk mendorong penggunaan atribut awal dan akhir.

Gunakan penelusuran dan penggantian dengan pencocokan huruf besar/kecil untuk menemukan semua kemunculan Left dan Right dalam tata letak XML Anda.

Langkah 3: Biarkan Android Studio melakukan pekerjaan untuk Anda

Dalam latihan sebelumnya, Anda telah mengambil langkah pertama untuk mendukung bahasa RTL. Untungnya, Android Studio dapat memindai aplikasi Anda dan menyiapkan banyak hal mendasar untuk Anda.

1. Di list_item.xml, di TextView, ubah layout_marginStart kembali ke layout_marginLeft, sehingga pemindai memiliki sesuatu untuk ditemukan.

<TextView
android:layout_marginLeft="@dimen/spacing_normal"

2. Di Android Studio, pilih Refactor > Add RTL support where possible dan centang kotak untuk memperbarui manifes, serta file tata letak untuk menggunakan properti awal dan akhir.

3. Di panel Refactoring Preview, temukan folder app, lalu perluas hingga terbuka ke semua detail.
4. Di folder aplikasi, perhatikan bahwa layout_marginLeft yang baru saja Anda ubah tercantum sebagai kode yang perlu difaktorkan ulang.

5. Perhatikan bahwa pratinjau juga mencantumkan file sistem dan library. Klik kanan layout dan layout-watch-v20 serta folder lain yang bukan bagian dari app, lalu pilih Exclude dari menu konteks.

6. Lanjutkan dan lakukan refaktor sekarang. (Jika Anda mendapatkan pop-up tentang file sistem, pastikan Anda telah mengecualikan semua folder yang bukan bagian dari kode aplikasi Anda.)

7. Perhatikan bahwa layout_marginLeft telah diubah kembali menjadi layout_marginStart.

Catatan: Beberapa komponen View memerlukan penyesuaian lebih lanjut agar berperilaku dengan benar dengan RTL. Untuk memiliki kontrol yang lebih presisi atas UI, ada 4 API berbeda yang dapat Anda gunakan:

• android:layoutDirection untuk menyetel arah tata letak komponen.
• android:textDirection untuk menetapkan arah teks komponen.
• android:textAlignment untuk menyetel perataan teks komponen.
• getLayoutDirectionFromLocale() adalah metode untuk mendapatkan lokalitas yang menentukan arah secara terprogram.

Langkah 3: Jelajahi folder untuk lokalitas

Sejauh ini, Anda hanya mengubah arah bahasa default yang digunakan untuk aplikasi. Untuk aplikasi produksi, Anda akan mengirim file strings.xml ke penerjemah untuk diterjemahkan ke bahasa baru. Untuk codelab ini, aplikasi menyediakan file strings.xml dalam bahasa Spanyol (kami menggunakan Google Terjemahan untuk membuat terjemahan, jadi terjemahannya tidak sempurna).

1. Di Android Studio, alihkan tampilan project ke Project Files.
2. Luaskan folder res, dan perhatikan folder untuk res/values dan res/values-es. "es" dalam nama folder adalah kode bahasa untuk Spanyol. Folder values-"kode bahasa" berisi nilai untuk setiap bahasa yang didukung. Folder values tanpa ekstensi berisi resource default yang berlaku.

3. Di values-es, buka strings.xml dan perhatikan bahwa semua string dalam bahasa Spanyol.
4. Di Android Studio, buka activity_main.xml di tab Desain.
5. Di dropdown Locale untuk Pratinjau, pilih Spanyol. Teks Anda sekarang akan ditampilkan dalam bahasa Spanyol.

6. [Opsional] Jika Anda fasih dalam bahasa RTL, buat folder values dan strings.xml dalam bahasa tersebut dan uji tampilannya di perangkat Anda.
7. [Opsional] Ubah setelan bahasa di perangkat Anda dan jalankan aplikasi. Pastikan Anda tidak mengubah bahasa perangkat ke bahasa yang tidak Anda pahami, karena akan sedikit sulit untuk mengurungkannya.

Pada tugas sebelumnya, Anda mengubah aplikasi secara manual, lalu menggunakan Android Studio untuk memeriksa peningkatan RTL tambahan yang perlu dilakukan.

Aplikasi Accessibility Scanner adalah sekutu terbaik Anda dalam membuat aplikasi yang mudah diakses. Alat ini memindai aplikasi Anda di perangkat target dan menyarankan peningkatan, seperti memperbesar target sentuh, meningkatkan kontras, dan memberikan deskripsi untuk gambar agar aplikasi Anda lebih mudah diakses. Accessibility Scanner dibuat oleh Google dan Anda dapat menginstalnya dari Play Store.

Langkah 1: Instal dan jalankan Accessibility Scanner

1. Buka Play Store dan login jika perlu. Anda dapat melakukannya di perangkat fisik atau emulator. Codelab ini menggunakan emulator.
   

Catatan: Jika Anda tidak memiliki Play Store di emulator, Anda mungkin perlu membuat emulator baru. Pastikan Anda memilih opsi yang mengaktifkan ikon "Play Store" saat membuat emulator.

Penting: Untuk menggunakan Play Store dari emulator, Anda harus login dengan akun. Anda dapat menggunakan akun reguler, atau membuat akun khusus untuk pengujian dengan emulator. Setiap akun yang Anda buat adalah akun asli, dan Anda terhubung ke Layanan Play yang asli, bukan versi yang diemulasi.

Penting: Anda dapat Melewati penyiapan opsi penagihan.

2. Di Play Store, telusuri Accessibility Scanner oleh Google LLC. Pastikan Anda mendapatkan aplikasi yang benar, yang dikeluarkan oleh Google, karena pemindaian apa pun memerlukan banyak izin.

3. Instal pemindai di emulator.
4. Setelah diinstal, klik Open.
5. Klik Mulai.
6. Klik Oke untuk memulai penyiapan Accessibility Scanner di Setelan.

7. Klik Accessibility Scanner untuk membuka setelan Aksesibilitas perangkat.

8. Klik Gunakan layanan untuk mengaktifkannya.

9. Ikuti petunjuk di layar dan berikan semua izin.
10. Kemudian, klik Oke, paham, dan kembali ke layar utama. Anda mungkin melihat tombol biru dengan tanda centang di suatu tempat di layar. Mengklik tombol ini akan memicu pengujian untuk aplikasi di latar depan. Anda dapat mengubah posisi tombol dengan menariknya. Tombol ini tetap berada di atas aplikasi apa pun, sehingga Anda dapat memicu pengujian kapan saja.

Untuk menonaktifkan pemindai, buka Setelan dan nonaktifkan Accessibility Scanner.

11. Buka atau jalankan aplikasi Anda.
12. Klik tombol biru dan setujui peringatan keamanan dan izin tambahan.

Saat Anda mengklik ikon Accessibility Scanner untuk pertama kalinya, aplikasi akan meminta izin untuk mendapatkan semua yang ditampilkan di layar Anda. Izin ini tampak sangat menakutkan, dan memang demikian.

Anda hampir tidak boleh memberikan izin seperti ini, karena izin tersebut memungkinkan aplikasi membaca email Anda atau bahkan mengambil info rekening bank Anda. Namun, agar Accessibility Scanner dapat berfungsi, aplikasi ini perlu memeriksa aplikasi Anda seperti yang dilakukan pengguna. Itulah sebabnya aplikasi ini memerlukan izin ini.

Penting: Sebelum Anda mengaktifkan izin ini, periksa kembali untuk memastikan bahwa aplikasi yang Anda instal adalah Accessibility Scanner oleh Google LLC.

13. Klik tombol biru dan tunggu hingga analisis selesai. Anda akan melihat sesuatu seperti screenshot di bawah, dengan judul dan FAB yang dikotaki merah. Hal ini menunjukkan dua saran untuk peningkatan aksesibilitas di layar ini.

14. Klik kotak di sekitar GDG Finder. Tindakan ini akan membuka panel dengan informasi tambahan, seperti yang ditunjukkan di bawah, yang menunjukkan masalah pada kontras gambar.
15. Perluas informasi Kontras Gambar, dan alat akan menyarankan perbaikan.
16. Klik panah di sebelah kanan untuk mendapatkan informasi item berikutnya.

17. Di aplikasi Anda, buka layar Apply for GDG dan pindai dengan aplikasi Accessibility Scanner. Tindakan ini akan memberikan beberapa saran, seperti yang ditunjukkan di bawah di sebelah kiri. Tepatnya 12. Memang, beberapa di antaranya adalah duplikat untuk item serupa.
18. Klik ikon "tumpukan" di toolbar bawah untuk mendapatkan daftar semua saran, seperti yang ditunjukkan di bawah pada screenshot kanan. Anda akan mengatasi semua masalah ini dalam codelab ini.

Android Accessibility Suite, kumpulan aplikasi dari Google, mencakup alat untuk membantu membuat aplikasi lebih mudah diakses. Aplikasi ini mencakup alat seperti TalkBack. TalkBack adalah pembaca layar yang menawarkan respons audio, haptik, dan lisan, yang memungkinkan pengguna membuka dan menggunakan konten di perangkat mereka tanpa menggunakan mata.

Ternyata TalkBack tidak hanya digunakan oleh penyandang tunanetra, tetapi juga oleh banyak orang yang memiliki gangguan penglihatan dalam bentuk tertentu. Atau bahkan orang yang hanya ingin mengistirahatkan mata mereka.

Jadi, Aksesibilitas adalah untuk semua orang! Dalam tugas ini, Anda akan mencoba TalkBack dan mengupdate aplikasi agar berfungsi dengan baik.

Langkah 1: Instal dan jalankan Accessibility Suite

TalkBack sudah terinstal di banyak perangkat fisik, tetapi di emulator, Anda perlu menginstalnya.

1. Buka Play Store.
2. Temukan Accessibility Suite. Pastikan aplikasi tersebut adalah aplikasi yang benar dari Google.
3. Jika belum diinstal, instal Aksesibilitas Suite.
4. Untuk mengaktifkan TalkBack di perangkat, buka Setelan > Aksesibilitas, lalu aktifkan TalkBack dengan memilih Gunakan Layanan. Sama seperti pemeriksa aksesibilitas, TalkBack memerlukan izin untuk membaca konten di layar. Setelah Anda menyetujui permintaan izin, TalkBack akan menyambut Anda dengan daftar tutorial untuk mengajari Anda cara menggunakan TalkBack secara efektif.
5. Berhenti sejenak di sini dan ikuti tutorialnya, jika tidak ada alasan lain selain untuk mempelajari cara menonaktifkan kembali TalkBack setelah Anda selesai.
6. Untuk keluar dari tutorial, klik tombol kembali untuk memilihnya, lalu ketuk dua kali di mana saja pada layar.

Tips: Jika Anda tidak dapat mendengar apa pun...aktifkan volume.

Tips: Untuk mengklik item, ketuk dua kali item tersebut; untuk men-scroll atau menarik, ketuk dua kali lalu tarik.

7. Jelajahi menggunakan aplikasi GDG Finder dengan TalkBack. Perhatikan tempat saat TalkBack tidak memberikan informasi yang berguna tentang layar atau kontrol. Anda akan memperbaikinya di latihan berikutnya.

Langkah 2: Tambahkan deskripsi konten

Deskripsi konten adalah label deskriptif yang menjelaskan arti penayangan. Sebagian besar tampilan Anda harus memiliki deskripsi konten.

1. Dengan aplikasi GDG Finder yang berjalan dan TalkBack diaktifkan, buka layar Apply to run GDG.
2. Ketuk gambar utama ... dan tidak ada yang terjadi.
3. Buka add_gdg_fragment.xml.
4. Di ImageView, tambahkan atribut deskripsi konten seperti yang ditunjukkan di bawah. String stage_image_description disediakan untuk Anda di strings.xml.

android:contentDescription="@string/stage_image_description"

5. Jalankan aplikasi Anda.
6. Buka Apply to run GDG, lalu klik gambar. Anda akan mendengar deskripsi singkat gambar tersebut.
7. [Opsional] Tambahkan deskripsi konten untuk gambar lain di aplikasi ini. Di aplikasi produksi, semua gambar harus memiliki deskripsi konten.

Langkah 3: Tambahkan petunjuk ke kolom teks yang dapat diedit

Untuk elemen yang dapat diedit, seperti EditText, Anda dapat menggunakan android:hint dalam XML untuk membantu pengguna mengetahui apa yang harus diketik. Petunjuk selalu ditampilkan di UI karena merupakan teks default di kolom input.

1. Masih di add_gdg_fragment.xml.
2. Tambahkan deskripsi dan petunjuk konten, menggunakan kode di bawah sebagai panduan.

Tambahkan ke textViewIntro:

android:contentDescription="@string/add_gdg"

Tambahkan ke teks edit masing-masing:

android:hint="@string/your_name_label"

android:hint="@string/email_label"

android:hint="@string/city_label"

android:hint="@string/country_label"

android:hint="@string/region_label"

3. Tambahkan deskripsi konten ke labelTextWhy.

android:contentDescription="@string/motivation" 

4. Tambahkan petunjuk ke EditTextWhy. Setelah Anda memberi label pada kotak edit, tambahkan deskripsi konten ke label dan juga petunjuk ke kotak.

android:hint="@string/enter_motivation"

5. Tambahkan deskripsi konten untuk tombol kirim. Semua tombol harus memiliki deskripsi tentang apa yang terjadi jika tombol tersebut ditekan.

android:contentDescription="@string/submit_button_description"

6. Jalankan aplikasi Anda dengan TalkBack diaktifkan, dan isi formulir untuk mengajukan permohonan menjalankan GDG.

Langkah 4: Buat grup konten

Untuk kontrol UI yang harus diperlakukan TalkBack sebagai grup, Anda dapat menggunakan pengelompokan konten. Konten terkait yang dikelompokkan bersama, diumumkan bersama. Pengguna teknologi pendukung tidak perlu menggeser, memindai, atau menunggu sesering mungkin untuk menemukan semua informasi di layar. Hal ini tidak memengaruhi tampilan kontrol di layar.

Untuk mengelompokkan komponen UI, bungkus komponen tersebut ke dalam ViewGroup, seperti LinearLayout. Di aplikasi GDG Finder, elemen labelTextWhy dan editTextWhy adalah kandidat yang sangat baik untuk dikelompokkan karena secara semantik saling terkait.

1. Buka add_gdg_fragment.xml.
2. Bungkus LinearLayout di sekitar LabelTextWhy dan EditTextWhy untuk membuat grup konten. Salin dan tempel kode di bawah. LinearLayout ini sudah berisi beberapa gaya yang Anda butuhkan. (Pastikan button berada di LUAR LinearLayout.)

<LinearLayout android:id="@+id/contentGroup" android:layout_width="match_parent"
            android:layout_height="wrap_content" android:focusable="true"
            app:layout_constraintTop_toBottomOf="@id/EditTextRegion"
            android:orientation="vertical" app:layout_constraintStart_toStartOf="@+id/EditTextRegion"
            app:layout_constraintEnd_toEndOf="@+id/EditTextRegion"
            android:layout_marginTop="16dp" app:layout_constraintBottom_toTopOf="@+id/button"
            android:layout_marginBottom="8dp">

     <!-- label and edit text here –>

<LinearLayout/>

3. Pilih Code > Reformat code untuk mengindentasi semua kode dengan benar.
4. Hapus semua margin tata letak dari labelTextWhy dan editTextWhy.
5. Di labelTextWhy, ubah batasan layout_constraintTop_toTopOf menjadi contentGroup.

app:layout_constraintTop_toTopOf="@+id/contentGroup" />

6. Di editTextWhy, ubah batasan layout_constraintBottom_toBottomOf menjadi contentGroup.

app:layout_constraintBottom_toBottomOf="@+id/contentGroup"

7. Batasi EditTextRegion dan Button ke contentGroup untuk menghilangkan error.

app:layout_constraintBottom_toTopOf="@+id/contentGroup"

8. Tambahkan margin ke LinearLayout. Anda dapat mengekstrak margin ini sebagai dimensi.

android:layout_marginStart="32dp"
android:layout_marginEnd="32dp"

Jika Anda memerlukan bantuan, periksa kode Anda dengan add_gdg_fragment.xml dalam kode solusi.

9. Jalankan aplikasi Anda dan jelajahi layar Apply to run GDG dengan TalkBack.

Langkah 5: Tambahkan area aktif

Saat ini, label pada tombol kirim adalah OK. Akan lebih baik jika tombol memiliki satu label dan deskripsi sebelum formulir dikirimkan, dan berubah secara dinamis menjadi label dan deskripsi konten yang berbeda setelah pengguna mengklik dan formulir telah dikirimkan. Anda dapat melakukannya menggunakan area aktif.

Live region menunjukkan kepada layanan aksesibilitas apakah pengguna harus diberi tahu saat tampilan berubah. Misalnya, memberi tahu pengguna tentang sandi yang salah atau error jaringan adalah cara yang bagus untuk membuat aplikasi Anda lebih mudah diakses. Dalam contoh ini, agar tetap sederhana, Anda memberi tahu pengguna saat tombol kirim mengubah statusnya.

1. Buka add_gdg_fragment.xml.
2. Ubah penetapan teks tombol menjadi Submit menggunakan resource string submit yang diberikan.

android:text="@string/submit"

3. Tambahkan area aktif ke tombol dengan menyetel atribut android:accessibilityLiveRegion. Saat Anda mengetik, Anda memiliki beberapa opsi untuk nilainya. Bergantung pada pentingnya perubahan, Anda dapat memilih apakah akan mengganggu pengguna atau tidak. Dengan nilai "assertive", layanan aksesibilitas akan menghentikan ucapan yang sedang berlangsung untuk segera mengumumkan perubahan pada tampilan ini. Jika Anda menyetel nilai ke "none", tidak ada perubahan yang diumumkan. Jika disetel ke "sopan", layanan aksesibilitas akan mengumumkan perubahan, tetapi menunggu gilirannya. Tetapkan nilai ke "sopan".

android:accessibilityLiveRegion="polite"

4. Di paket add, buka AddGdgFragment.kt.
5. Di dalam showSnackBarEvent Observer, setelah Anda selesai menampilkan SnackBar, tetapkan deskripsi konten dan teks baru untuk tombol.

binding.button.contentDescription=getString(R.string.submitted)
binding.button.text=getString(R.string.done)

6. Jalankan aplikasi Anda, lalu klik tombol. Sayangnya, tombol dan font terlalu kecil.

Langkah 6: Perbaiki gaya tombol

1. Di add_gdg_fragment.xml, ubah width dan height tombol menjadi wrap_content, sehingga label lengkap terlihat dan ukuran tombolnya sesuai.

android:layout_width="wrap_content"
android:layout_height="wrap_content"

2. Hapus atribut backgroundTint, textColor, dan textSize dari tombol agar aplikasi menggunakan gaya tema yang lebih baik.
3. Hapus atribut textColor dari textViewIntro. Warna tema harus memberikan kontras yang baik.
4. Jalankan aplikasi. Perhatikan tombol Submit yang jauh lebih mudah digunakan. Klik Kirim dan perhatikan perubahannya menjadi Selesai.

Chip adalah elemen ringkas yang merepresentasikan atribut, teks, entitas, atau tindakan. Komponen ini memungkinkan pengguna memasukkan informasi, memilih opsi, memfilter konten, atau memicu tindakan.

Widget Chip adalah wrapper tampilan tipis di sekitar ChipDrawable, yang berisi semua logika tata letak dan gambar. Logika tambahan ini ada untuk mendukung navigasi sentuh, mouse, keyboard, dan aksesibilitas. Chip utama dan ikon tutup dianggap sebagai sub-tampilan logis yang terpisah, dan berisi perilaku serta status navigasi sendiri.

Chip menggunakan drawable. Drawable Android memungkinkan Anda menggambar gambar, bentuk, dan animasi di layar, dan dapat memiliki ukuran tetap atau berukuran dinamis. Anda dapat menggunakan gambar sebagai drawable, seperti gambar di aplikasi GDG. Anda juga dapat menggunakan gambar vektor untuk menggambar apa pun yang dapat Anda bayangkan. Ada juga drawable yang dapat diubah ukurannya yang disebut drawable 9-patch, yang tidak dibahas dalam codelab ini. Logo GDG, di drawable/ic_gdg.xml, adalah drawable lain.

Drawable bukan tampilan, jadi Anda tidak dapat menempatkan drawable langsung di dalam ConstraintLayout, Anda harus menempatkannya di dalam ImageView. Anda juga dapat menggunakan drawable untuk menyediakan latar belakang untuk tampilan teks atau tombol, dan latar belakang digambar di belakang teks.

Langkah 1: Tambahkan chip ke daftar GDG

Chip yang dicentang di bawah menggunakan tiga drawable. Latar belakang dan tanda centang masing-masing adalah drawable. Menyentuh chip akan membuat efek riak, yang dilakukan dengan RippleDrawable khusus yang menampilkan efek riak sebagai respons terhadap perubahan status.

Dalam tugas ini, Anda akan menambahkan chip ke daftar GDG, dan mengubah statusnya saat dipilih. Dalam latihan ini, Anda menambahkan deretan tombol yang disebut chip ke bagian atas layar Penelusuran. Setiap tombol memfilter daftar GDG sehingga pengguna hanya menerima hasil dari wilayah yang dipilih. Saat tombol dipilih, tombol akan mengubah latar belakangnya dan menampilkan tanda centang.

1. Buka fragment_gdg_list.xml.
2. Buat com.google.android.material.chip.ChipGroup di dalam HorizontalScrollView.Setel properti singleLine-nya ke true, sehingga semua chip disusun dalam satu baris yang dapat di-scroll secara horizontal. Tetapkan properti singleSelection ke true sehingga hanya satu chip dalam grup yang dapat dipilih dalam satu waktu. Berikut kodenya.

<com.google.android.material.chip.ChipGroup
    android:id="@+id/region_list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:singleSelection="true"
    android:padding="@dimen/spacing_normal"/>

3. Di folder layout, buat file resource tata letak baru bernama region.xml, untuk menentukan tata letak satu Chip.
4. Di region.xml, ganti semua kode dengan tata letak untuk satu Chip seperti yang diberikan di bawah. Perhatikan bahwa Chip ini adalah komponen Material. Perhatikan juga bahwa Anda mendapatkan tanda centang dengan menyetel properti app:checkedIconVisible. Anda akan mendapatkan error untuk warna selected_highlight yang tidak ada.

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

<com.google.android.material.chip.Chip
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/Widget.MaterialComponents.Chip.Choice"
        app:chipBackgroundColor="@color/selected_highlight"
        app:checkedIconVisible="true"
        tools:checked="true"/>

5. Untuk membuat warna selected_highlight yang tidak ada, letakkan kursor pada selected_highlight, buka menu niat, lalu create color resource for selected highlight. Opsi default sudah benar, jadi cukup klik OK. File dibuat di folder res/color.
6. Buka res/color/selected_highlight.xml. Dalam daftar status warna ini, yang dienkode sebagai <selector>, Anda dapat memberikan warna yang berbeda untuk status yang berbeda. Setiap status dan warna terkait dienkode sebagai <item>. Lihat Tema Warna untuk mengetahui informasi selengkapnya tentang warna ini.

7. Di dalam <selector>, tambahkan item dengan warna default colorOnSurface ke daftar status. Dalam daftar negara bagian, penting untuk selalu mencakup semua negara bagian. Salah satu cara untuk melakukannya adalah dengan memiliki warna default.

<item android:alpha="0.18" android:color="?attr/colorOnSurface"/>

8. Di atas warna default, tambahkan item dengan warna colorPrimaryVariant, dan batasi penggunaannya saat status yang dipilih adalah true. Daftar status diproses dari atas ke bawah, seperti pernyataan case. Jika tidak ada status yang cocok, status default akan diterapkan.

<item android:color="?attr/colorPrimaryVariant"
         android:state_selected="true" />

Langkah 2: Tampilkan deretan chip

Aplikasi GDG membuat daftar chip yang menampilkan wilayah yang memiliki GDG. Saat chip dipilih, aplikasi akan memfilter hasil untuk hanya menampilkan hasil GDG untuk wilayah tersebut.

Catatan: Cara daftar ini dibuat, dan cara hasil difilter, bukan bagian dari codelab ini. Jika Anda ingin mengetahui cara daftar GDG diperoleh, dan cara pemfilteran diterapkan, periksa file dalam paket search dan network. Secara khusus, periksa GdgListViewModel.

1. Di paket search, buka GdgListFragment.kt.
2. Di onCreateView(), tepat di atas pernyataan return, tambahkan observer di viewModel.regionList dan ganti onChanged(). Saat daftar wilayah yang disediakan oleh model tampilan berubah, chip perlu dibuat ulang. Tambahkan pernyataan untuk segera menampilkan jika data yang diberikan adalah null.

viewModel.regionList.observe(viewLifecycleOwner, object: Observer<List<String>> {
        override fun onChanged(data: List<String>?) {
             data ?: return
        }
})

3. Di dalam onChanged(), di bawah pengujian null, tetapkan binding.regionList ke variabel baru bernama chipGroup untuk meng-cache regionList.

val chipGroup = binding.regionList

4. Di bawah, buat layoutInflator baru untuk memompa chip dari chipGroup.context.

val inflator = LayoutInflater.from(chipGroup.context)

5. Bersihkan dan bangun ulang project Anda untuk menghilangkan error databinding.

Di bawah inflator, Anda kini dapat membuat chip sebenarnya, satu untuk setiap region di regionList.

6. Buat variabel, children, untuk menyimpan semua chip. Tetapkan fungsi pemetaan pada data yang diteruskan untuk membuat dan menampilkan setiap chip.

val children = data.map {} 

7. Di dalam lambda peta, untuk setiap regionName, buat dan kembangkan chip. Kode yang sudah selesai ada di bawah.

val children = data.map {
   val children = data.map { regionName ->
       val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
       chip.text = regionName
       chip.tag = regionName
       // TODO: Click listener goes here.
       chip
   }
}

8. Di dalam lambda, tepat sebelum menampilkan chip, tambahkan pemroses klik. Saat chip diklik, tetapkan statusnya ke checked. Panggil onFilterChanged() di viewModel, yang memicu urutan peristiwa yang mengambil hasil untuk filter ini.

chip.setOnCheckedChangeListener { button, isChecked ->
   viewModel.onFilterChanged(button.tag as String, isChecked)
}

9. Di akhir lambda, hapus semua tampilan saat ini dari chipGroup, lalu tambahkan semua chip dari children ke chipGroup. (Anda tidak dapat memperbarui chip, jadi Anda harus menghapus dan membuat ulang konten chipGroup.)

chipGroup.removeAllViews()

for (chip in children) {
   chipGroup.addView(chip)
}

Observer yang sudah selesai akan terlihat seperti berikut:

   override fun onChanged(data: List<String>?) {
       data ?: return

       val chipGroup = binding.regionList
       val inflator = LayoutInflater.from(chipGroup.context)

       val children = data.map { regionName ->
           val chip = inflator.inflate(R.layout.region, chipGroup, false) as Chip
           chip.text = regionName
           chip.tag = regionName
           chip.setOnCheckedChangeListener { button, isChecked ->
               viewModel.onFilterChanged(button.tag as String, isChecked)
           }
           chip
       }
       chipGroup.removeAllViews()

       for (chip in children) {
           chipGroup.addView(chip)
       }
   }
})

12. Jalankan aplikasi Anda dan telusuri GDGS untuk membuka layar Penelusuran guna menggunakan chip baru Anda. Saat Anda mengklik setiap chip, aplikasi akan menampilkan grup filter di bawahnya.

Penting. Jika memulai peta tidak membantu Anda mendapatkan daftar, untuk membuatnya berfungsi di emulator, tutup semua emulator yang sedang berjalan. Jalankan aplikasi, mulai emulator baru, dan mulai aplikasi peta di emulator tersebut, lalu jalankan aplikasi.

Mode malam memungkinkan aplikasi Anda mengubah warnanya ke tema gelap, misalnya, saat setelan perangkat telah disetel untuk mengaktifkan mode malam. Dalam mode malam, aplikasi mengubah latar belakang terang defaultnya menjadi gelap, dan mengubah semua elemen layar lainnya dengan tepat.

Langkah 1: Aktifkan mode malam

Untuk menyediakan tema gelap bagi aplikasi Anda, ubah tema aplikasi dari tema Light ke tema yang disebut DayNight. Tema DayNight muncul dalam warna terang atau gelap, bergantung pada mode.

1. Di styles.xml,, ubah tema induk AppTheme dari Light menjadi DayNight.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">

2. Dalam metode onCreate() MainActivity, panggil AppCompatDelegate.setDefaultNightMode() untuk mengaktifkan tema gelap secara terprogram.

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

3. Jalankan aplikasi dan pastikan aplikasi telah beralih ke tema gelap.

Langkah 2: Buat palet warna tema gelap Anda sendiri

Untuk menyesuaikan tema gelap, buat folder dengan kualifikasi -night untuk tema gelap yang akan digunakan. Misalnya, Anda dapat memiliki warna tertentu dalam mode malam dengan membuat folder bernama values-night.

1. Buka alat pemilih warna material.io dan buat palet warna tema malam. Misalnya, Anda dapat mendasarkannya pada warna biru tua.
2. Buat dan download file colors.xml.
3. Beralih ke tampilan Project Files untuk mencantumkan semua folder di project Anda.
4. Temukan folder res dan luaskan.
5. Buat folder resource res/values-night.
6. Tambahkan file colors.xml baru ke folder resource res/values-night.
7. Jalankan aplikasi Anda, tetap dengan mode malam diaktifkan, dan aplikasi akan menggunakan warna baru yang Anda tentukan untuk res/values-night. Perhatikan bahwa chip menggunakan warna sekunder baru.

Project Android Studio: GDGFinderFinal.

Mendukung Bahasa RTL

• Di Manifes Android, tetapkan android:supportsRtl="true".
• Anda dapat melihat pratinjau RTL di emulator, dan Anda dapat menggunakan bahasa Anda sendiri untuk memeriksa tata letak layar. Di perangkat atau emulator, buka Setelan, lalu di Opsi Developer, pilih Paksa tata letak RTL.
• Ganti referensi ke Left dan Right dengan referensi ke Start dan End.
• Nonaktifkan pencerminan untuk drawable dengan menghapus android:autoMirrored="true".
• Pilih Refactor > Add RTL support where possible agar Android Studio melakukan pekerjaan untuk Anda.
• Gunakan folder values-"kode bahasa" untuk menyimpan resource khusus bahasa.

Memindai aksesibilitas

• Di Play Store, dapatkan Accessibility Scanner oleh Google LLC dan jalankan untuk memindai elemen layar yang perlu ditingkatkan.

Mendesain untuk TalkBack dengan deskripsi konten

• Instal Android Accessibility Suite, dari Google, yang mencakup TalkBack.
• Tambahkan deskripsi konten ke semua elemen UI. Contoh:
  android:contentDescription="@string/stage_image_description"
• Untuk elemen yang dapat diedit seperti EditText, gunakan atribut android:hint dalam XML untuk memberikan petunjuk kepada pengguna tentang apa yang harus diketik.
• Buat grup konten dengan menggabungkan elemen terkait ke dalam grup tampilan.
• Buat wilayah live untuk memberikan masukan tambahan kepada pengguna dengan android:accessibilityLiveRegion.

Menggunakan Chip untuk menerapkan filter

• Chip adalah elemen ringkas yang merepresentasikan atribut, teks, entitas, atau tindakan.
• Untuk membuat grup chip, gunakan com.google.android.material.chip.ChipGroup.
• Tentukan tata letak untuk satu com.google.android.material.chip.Chip.
• Jika Anda ingin chip berubah warna, berikan daftar status warna sebagai <selector> dengan warna yang memiliki status:
  <item android:color="?attr/colorPrimaryVariant"
android:state_selected="true" />
• Ikat chip ke data aktif dengan menambahkan pengamat ke data di model tampilan.
• Untuk menampilkan chip, buat inflator untuk grup chip:
  LayoutInflater.from(chipGroup.context)
• Buat chip, tambahkan pemroses klik yang memicu tindakan yang diinginkan, dan tambahkan chip ke grup chip.

Mendukung mode gelap

• Gunakan DayNight AppTheme untuk mendukung mode gelap.
• Anda dapat menyetel mode gelap secara terprogram:
  AppCompatDelegate.setDefaultNightMode()
• Buat folder resource res/values-night untuk menyediakan warna dan nilai kustom untuk mode gelap.

Dokumentasi developer Android:

• LayoutDirection (RTL)
• Bidireksionalitas
• Memulai Accessibility Scanner
• TalkBack
• Gestur TalkBack
• Dokumen ringkasan drawable
• Deskripsi konten
• Pengelompokan konten
• Live region
• Drawable NinePatch
• Alat Draw 9-patch
• Chip
• ChipGroup
• Tema gelap
• Tema warna
• Alat warna
• Menganimasikan grafis drawable

Referensi lainnya:

• Mengembangkan Aplikasi Android dengan Kotlin (kursus Udacity)
• Kotlin Bootcamp for Programmers (kursus Udacity)
• Codelab Bootcamp Kotlin untuk Pemrogram

Bagian ini mencantumkan kemungkinan tugas pekerjaan rumah untuk siswa yang mengerjakan codelab ini sebagai bagian dari kursus yang dipimpin oleh instruktur. Instruktur menentukan hal berikut:

• Memberikan pekerjaan rumah jika diperlukan.
• Memberi tahu siswa cara mengirimkan tugas pekerjaan rumah.
• Memberi nilai tugas pekerjaan rumah.

Instruktur bisa menggunakan saran ini sesuai kebutuhan, dan bebas menugaskan pekerjaan rumah lain yang dirasa cocok.

Jika Anda menyelesaikan codelab ini sendiri, gunakan tugas pekerjaan rumah ini untuk menguji pengetahuan Anda.

Pertanyaan 1

Manakah dari berikut ini yang wajib untuk mendukung bahasa RTL?

▢ Mengganti Left dan Right di properti dengan Start dan End

▢ Beralih ke bahasa RTL

▢ Pastikan semua ikon menggunakan android:autoMirrored="true"

▢ Memberikan deskripsi konten

Pertanyaan 2

Manakah dari alat aksesibilitas berikut yang tersedia sebagai fitur bawaan di sebagian besar perangkat Android?

▢ TalkBack

▢ Accessibility Scanner

▢ Di Android Studio, Refactor > Add RTL support where possible

▢ Lint

Pertanyaan 3

Manakah dari pernyataan berikut yang tidak benar tentang chip?

▢ Anda menampilkan chip sebagai bagian dari ChipGroup.

▢ Anda dapat memberikan daftar status warna untuk ChipGroup.

▢ Chip adalah elemen ringkas yang merepresentasikan input, atribut, atau tindakan.

▢ Anda harus selalu mengaktifkan DarkTheme jika aplikasi Anda menggunakan chip.

Pertanyaan 4

Tema mana yang memberi Anda gaya untuk mode gelap dan terang?

▢ DayNight

▢ DarkTheme

▢ DarkAndLightTheme

▢ Light

Pertanyaan 5

Apa yang dimaksud dengan live region?

▢ Node yang berisi informasi penting bagi pengguna

▢ Wilayah layar yang berubah bentuk sesuai dengan panduan Material

▢ Tampilan yang memungkinkan video streaming

▢ Drawable animasi