LESSON 4 – 4.1 Menggunakan Keyboard, Kontrol Masukan, Peringatan dan Picker

Tugas 1: Bereksperimen dengan atribut keyboard entri teks

1.1 Membuat layout utama dan metode showText

Buat project baru bernama Keyboard Sample

 

Ekstrak sumber daya string untuk nilai atribut android:text untuk membuat dan memasukkannya di strings.xml: Letakkan kursor pada Show, tekan Alt-Enter (Option-Enter di Mac), dan pilih Extract string resource. Lalu ubah name sumber daya untuk nilai string ke show.

Ekstrak sumber daya string untuk nilai atribut android:text untuk membuat dan memasukkannya di strings.xml: Letakkan kursor pada Hint , tekan Alt-Enter (Option-Enter di Mac), dan pilih Extract string resource. Lalu ubah name sumber daya untuk nilai string ke “Enter a Message”.

 

Buka MainActivity.java => masukkan metode showText  yang mengambil informasi yang dimasukkan ke dalam elemen EditText dan menampilkannya di dalam pesan toast

Buka strings.xml => ubah nilai app_name dengan menambahkan spasi antara Keyboard dan Samples

 

Hasil Akhir

1.2 Setel keyboard untuk menjadikan huruf besar di awal kalimat

Tambahkan android:inputType ke elemen EditText menggunakan nilai textCapSentences untuk menyetel keyboard menjadi huruf besar di awal kalimat, sehingga pengguna bisa otomatis memulai kalimat dengan huruf besar:

Hasil Akhir :

1.3 Setel keyboard untuk menyembunyikan sandi saat memasukkannya

Ubah hint dan input type seperti di gambar untuk menhyembunyikan password saat diinput

Hasil Akhir:

Tugas 2. Mengubah tipe keyboard

2.1 Menggunakan keyboard email

Pada elemen EditText di file layout activity_main.xml, ubah atribut android:inputType menjadi yang berikut: android:input.Ubah atribut android:hint menjadi “Enter an email address”.

Ekstrak sumber daya string untuk nilai android:hint ke enter_email.

Hasil Akhir :

 

2.2 Menggunakan keypad ponsel

Pada elemen EditText di file layout activity_main.xml, ubah atribut android:inputType menjadi android:inputType=”phone”

Ubah atribut android:hint menjadi “Enter a phone number”.

Hasil Akhir :

Tugas 3: Menambahkan kontrol masukan spinner untuk memilih label telepon

Salin folder proyek KeyboardSamples, ubah namanya menjadi PhoneNumberSpinner, dan optimalkan kode untuk mengisikan nama baru di seluruh proyek aplikasi.

Setelah mengoptimalkan kode, ubah nilai ” di file strings.xml (di dalam app > res > values) menjadi Phone Number Spinner (berikut spasinya) sebagai nama aplikasi.

Pada activity_main.xml ubah code menjadi seperti di gambar untuk menambahkan spinner

Hasil Akhir :

 

 

3.2 Tambahkan kode untuk mengaktifkan spinner dan listener-nya

Buka strings.xml untuk mendefinisikan nilai yang bisa dipilih (Home, Work, Mobile, dan Other) untuk spinner sebagai larik string labels_array.

Buat instance objek spinner di metode onCreate() menggunakan elemen Spinner di layout (label_spinner), dan tetapkan listener-nya (spinner.setOnItemSelectedListener) di metode onCreate(). Tambahkan kode ke metode onCreate():

Lanjutkan mengedit metode onCreate(), tambahkan pernyataan yang membuat ArrayAdapter dengan larik string (labels_array) menggunakan layout spinner sederhana yang disediakan oleh Android untuk setiap item (layout.simple_spinner_item):

Tetapkan layout untuk pilihan spinner menjadi simple_spinner_dropdown_item, lalu terapkan adaptor ke spinner:

3.3 Tambahkan kode untuk merespons pilihan pengguna

Deklarasikan string mSpinnerLabel di awal definisi kelas MainActivity

Tambahkan kode ke metode callback onItemSelected() kosong, seperti yang ditampilkan di bawah ini, untuk mengambil item yang dipilih pengguna menggunakan getItemAtPosition, dan tetapkan ke mSpinnerLabel. Anda juga bisa menambahkan sebuah panggilan ke metode showText() yang sudah Anda tambahkan ke versi aplikasi sebelumnya . Tambahkan kode ke metode callback onNothingSelected() yang kosong, seperti yang ditampilkan di bawah ini, untuk menampilkan pesan logcat jika tidak satu pun yang dipilih:

Klik TAG, klik bola lampu merah, dan pilih Create constant field ‘TAG’ dari menu munculan. Android Studio menambahkan yang berikut di bawah deklarasi kelas MainActivity:

Ubah pernyataan String showString di metode showText untuk menampilkan string yang dimasukkan dan item spinner yang dipilih (mSpinnerLabel):

 

Hasil Akhir :

Tugas 4: Menggunakan dialog untuk peringatan yang memerlukan keputusan

4.1 Buat proyek baru dengan layout untuk menampilkan dialog peringatan

Buat proyek baru bernama Alert Sample berdasarkan template Empty Activity.

Modifikasi file activity_main.xml sesuai dengan buku

Ekstrak string android:text di atas ke dalam alert_button sumber daya untuk membuatnya lebih mudah diterjemahkan.

Ekstrak string android:text di atas ke dalam alert_button sumber daya untuk membuatnya lebih mudah diterjemahkan.

Ekstrak string android:text di atas ke dalam alert_button sumber daya untuk membuatnya lebih mudah diterjemahkan.

 

4.2 Menambahkan dialog peringatan ke aktivitas utama

Tambahkan metode onClickShowAlert() ke MainActivity.java seperti berikut:

Setel judul dan pesan untuk dialog peringatan dalam onClickShowAlert() setel kode di langkah sebelumnya:

Ekstrak judul dan pesan ke dalam sumber daya string. Baris kode sebelumnya sekarang seharusnya menjadi:

Tambahkan tombol OK pada peringatan dengan setPositiveButton() dan menggunakan onClickListener():

Ekstrak sumber daya string untuk “OK” dan untuk “Pressed OK”. Pernyataan sekarang seharusnya menjadi:

Tambahkan tombol Cancel pada peringatan dengan setNegativeButton() dan onClickListener(), tampilkan pesan toast jika tombol diklik, lalu batalkan dialog:

Ekstrak sumber daya string untuk “Cancel” dan “Pressed Cancel”. Pernyataan sekarang seharusnya menjadi:

Tambahkan show() yang membuat lalu menampilkan dialog peringatan, ke akhir onClickShowAlert():

Hasil Akhir :

 

5.1 Membuat layout aktivitas utama

Membuat project baru

Menggunakan layout Relative untuk 2 button didalam layout Linear yang terdapat textview

 

5.2 Buat fragmen baru untuk picker tanggal

Menambahkan fragmen untuk picker tanggal. Fragmen mirip seperti aktivitas mini di dalam aktivitas utama, dengan daur hidupnya sendiri.

Buat fragmen baru dalam MainActivity. File->New->Fragmen->Fragment (Blank).

Edit definisi kelas DatePickerFragment untuk memperluas DialogFragment dan dan implementasikan DatePickerDialog.OnDateSetListener untuk membuat picker tanggal standar dengan sebuah listener => import class DatePickerDialog & DialogFragment => implement methods => Centang insert Override => Ok

• ganti onCreateView() dengan onCreateDialog() yang mengembalikan Dialog, dan anotasikan onCreateDialog() dengan @NonNull untuk menunjukkan bahwa nilai pengembalian Dialog tidak boleh null—upaya apa pun untuk mengacu pada nilai pengembalian Dialog harus dicentang null.
• Tambahkan kode berikut ke onCreateDialog() untuk membuat instance year, month, dan day dari Calendar, dan mengembalikan dialog dan nilai ini ke aktivitas utama. Saat Anda memasukkan Calendar, tetapkan import menjadi java.util.Calendar.

5.3 Buat fragmen baru untuk picker waktu

Buat fragmen baru dengan nama TimePickerFragment dan hilangkan centang di ketiga checkbox

ikuti prosedur yang sama dengan DatePickerFragment, mengimplementasikan metode kosong onTimeSet(), mengganti onCreateView() dengan onCreateDialog(), dan menghapus konstruktor publik untuk TimePickerFragment. TimePickerFragment melakukan tugas yang sama dengan DatePickerFragment, tetapi dengan nilai waktu

5.4 Modifikasi aktivitas utama

Buat resource string pada strings.xml

Tambahkan metode showDatePickerDialog() dan showTimePickerDialog(), dengan merujuk ke kode di bawah ini. Ini membuat instance FragmentManager untuk mengelola fragmen secara otomatis, dan untuk menampilkan picker

Hasil Akhir :

5.5 Gunakan tanggal dan waktu yang dipilih

• Tambahkan method processDatePickerResult() seperti di gambar
• Integer month yang dikembalikan oleh picker tanggal mulai menghitung dari 0 untuk Januari, sehingga Anda perlu menambahkan 1 untuk mulai menampilkan bulan mulai dari 1

Buka DatePickerFragment dan tambahkan kode seperti di gambar ke dalam metode onDateSet() untuk menjalankan metode processDatePickerResult() di MainActivity dan meneruskan year, month, dan day ke metode

Buka MainActivity dan tambahkan tanda tangan metode processTimePickerResult() yang mengambil hourOfDay dan minute sebagai argumen

Buka TimePickerFragment dan code seperti di gambar ke metode onTimeSet() untuk memanggil metode processTimePickerResult() di MainActivity dan meneruskan hourOfDay dan minute ke metode

Hasil Akhir :

 

Tugas 6: Menggunakan tampilan gambar sebagai tombol

6.1 Mulai proyek baru

Buat project baru bernama Droid Cafe dengan template Basic Activity => buka content_main.xml => ekstrak string Hello World! Menjadi intro_text

ubah value intro_text menjadi Droid Desserts untuk menggunakan lebih banyak teks deskriptif

• Ubah TextView di layout agar menggunakan ukuran teks yang lebih besar 24sp dan padding 10dp, dan tambahkan atribut android:id dengan id textintro.
• Ekstrak sumber daya dimensi untuk atribut android:padding ke nama sumber daya padding_regular, dan atribut android:textSize ke sumber daya text_heading. Anda akan menggunakan nama sumber daya ini di langkah-langkah selanjutnya.
• Tambahkan TextView lagi di bawah textintro TextView beserta atributnya
• Ekstrak resource string untuk atribut android:text ke nama sumber daya choose_a_dessert

6.2 Tambahkan gambar

Gambar bernama circle.jpg, froyo_circle.jpg, dan icecream_circle.jpg disediakan dengan aplikasi starter di file 4_1_P_starter_images.zip yang bisa Anda unzip di komputer. Untuk menyalin gambar ke proyek Anda, ikuti langkah-langkah ini:

• Tutup proyek Anda.
• Salin file gambar ke dalam folder drawable proyek Anda. Temukan folder drawable di proyek dengan menggunakan jalur ini: project_name > app > src > main > res > drawable
• Buka kembali proyek Anda

Buka file content_main.xml lagi dan tambahkan 3 buah ImageView dan 3 buah TextView seperti di gambar

6.3Tambahkan metode onClick untuk tampilan gambar

Anda bisa menambahkan atribut android:onClick ke View apa pun untuk membuatnya bisa diklik sebagai tombol. Di langkah ini, Anda akan menambahkan android:onClick ke gambar di layout content_main.xml. Anda juga perlu menambahkan metode untuk atribut android:onClick yang akan dipanggil. Metode ini, untuk tugas ini, menampilkan pesan toast yang menampilkan gambar mana yang diketuk.

Menambahkan resource pada strings.xml

• Tambahkan metode displayToast() berikut untuk menampilkan pesan toast
• Tambahkan metode showFoodOrder() berikut di akhir MainActivity* (sebelum tanda kurung penutup). Untuk tugas ini, gunakan metode displayToast() untuk menampilkan pesan toast

 

Hasil Akhir:

 

Tugas 7: Menggunakan tombol radio

7.1 Tambahkan aktivitas lain

Klik kanan folder com.example.android.droidcafe di kolom kiri dan pilih New > Activity > Empty Activity. Edit Nama Aktivitas agar menjadi OrderActivity dan Nama Layout menjadi activity_order. Jangan ubah opsi lain, dan klik Finish.

Menambahkan intent pada showFoodOrder untuk membuka aktivitas OrderActivity

Saat di klik gambar maka akan muncul aktivitas baru yang kosong

7.2 Tambahkan layout untuk tombol radio

Karena pilihan tombol radio bersifat eksklusif secara mutual, Anda akan mengelompokkan tombol-tombol ini di dalam RadioGroup. Dengan mengelompokkan tombol radio, sistem Android memastikan hanya satu tombol radio yang bisa dipilih dalam satu waktu.

7.3 Tambahkan handler klik tombol radio

• Atribut android:onClick untuk setiap elemen tombol radio menetapkan metode onRadioButtonClicked() untuk menangani kejadian klik. Dengan demikian, Anda perlu menambahkan metode onRadioButtonClicked() baru di kelas OrderActivity.
• Di metode onRadioButtonClicked(), Anda akan menggunakan blok switch case untuk memeriksa apakah tombol radio telah diklik. Di akhir blok switch case, Anda akan menambahkan pernyataan default yang menampilkan pesan log jika tidak satu pun tombol radio yang dicentang.

Menambahkan resource pada strings.xml

• Tambahkan pernyataan berikut untuk mendefinisikan TAG_ACTIVITY untuk pesan log
• Tambahkan metode displayToast
• Tambahkan metode onRadioButtonClicked() berikut, yang memeriksa untuk melihat apakah tombol radio telah dicentang, dan menggunakan blok switch case untuk menentukan item tombol radio mana yang dipilih, untuk menyetel message yang sesuai untuk item tersebut untuk digunakan bersama displayToast()

 

Hasil Akhir :

4.2: Menggunakan Menu Opsi

Tugas 1: Menambahkan item ke menu opsi opsi

1.1 Periksa kode bilah aplikasi

Pada file content_main.xml, perilaku layout untukRelativeLayout disetel ke @string/appbar_scrolling_view_behavior, yang mengontrol perilaku pengguliran layar terkait bilah aplikasi di bagian atas. Klik kanan (Control-klik) sumber daya string ini dan pilih Go To > Declaration untuk melihat nilai sumber daya string sebenarnya, yang didefinisikan dalam sebuah file yang bernama “values.xml”

• Buka activity_main.xml untuk melihat layout utama, yang menggunakan layout CoordinatorLayout dengan layout AppBarLayout yang disematkan
• AppBarLayout adalah LinearLayout yang menggunakan kelas Toolbar di pustaka dukungan, sebagai ganti ActionBar, untuk mengimplementasikan bilah aplikasi. Bilah aplikasi adalah bagian di atas layar yang bisa menampilkan judul aktivitas, navigasi, dan item interaktif lainnya. ActionBar asli berperilaku berbeda bergantung pada versi Android yang berjalan pada perangkat. Oleh karena itu, jika Anda menambahkan menu opsi, Anda harus menggunakan Toolbar pustaka dukungan v7 appcompat sebagai bilah aplikasi.
• Layout activity_main.xml juga menggunakan pernyataan include layout untuk menyertakan keseluruhan layout yang didefinisikan di content_main.xml. Pemisahan definisi layout ini memudahkan perubahan konten layout yang terpisah dari definisi bilah alat layout dan layout koordinator.

• Buka activity_main.xml untuk melihat layout utama, yang menggunakan layout CoordinatorLayout dengan layout AppBarLayout yang disematkan
• AppBarLayout adalah LinearLayout yang menggunakan kelas Toolbar di pustaka dukungan, sebagai ganti ActionBar, untuk mengimplementasikan bilah aplikasi. Bilah aplikasi adalah bagian di atas layar yang bisa menampilkan judul aktivitas, navigasi, dan item interaktif lainnya. ActionBar asli berperilaku berbeda bergantung pada versi Android yang berjalan pada perangkat. Oleh karena itu, jika Anda menambahkan menu opsi, Anda harus menggunakan Toolbar pustaka dukungan v7 appcompat sebagai bilah aplikasi.
• Layout activity_main.xml juga menggunakan pernyataan include layout untuk menyertakan keseluruhan layout yang didefinisikan di content_main.xml. Pemisahan definisi layout ini memudahkan perubahan konten layout yang terpisah dari definisi bilah alat layout dan layout koordinator.

1.2 Menambahkan lebih banyak item menu ke menu opsi

Menambahkan item menu berikut ke menu opsi aplikasi Droid Cafe:

• Order: Masuk ke layar Order Activity untuk melihat pesanan makanan.
• Status: Memeriksa status pesanan makanan.
• Favorites: Menampilkan makanan favorit.
• Contact: Menghubungi restoran. Karena Anda tidak memerlukan item Settings yang ada, anda akan mengubah Settings ke Contact.
• Lihat menu_main.xml (luaskan res > menu di tampilan Project). Ini mendefinisikan item menu dengan <item> </item> di dalam <menu> </menu> block
• Tambahkan seluruh menu seperti di gambar
• Atribut android:orderInCategory menetapkan urutan kemunculan item menu di menu, dengan angka terkecil muncul lebih tinggi dalam menu. Item Contact disetel ke 100, yang merupakan nomor besar untuk menetapkan bahwa ini akan ditampilkan di bagian bawah, bukan di bagian atas

Anda akan menampilkan pesan toast dengan pesan tindakan bergantung pada item menu apa yang dipilih pengguna. Tambahkan nama dan nilai string berikut di strings.xml untuk pesan ini

Buka MainActivity dan ubah pernyataan if di metode onOptionsItemSelected() dengan mengganti id action_settings dengan id action_order

Tugas 2. Menambahkan ikon untuk item menu

• Order dan Status harus selalu ditampilkan di bilah aplikasi.
• Favorites harus ditampilkan di bilah aplikasi jika pas ukurannya, jika tidak, harus tampil di menu luapan.
• Contact harus tidak muncul di bilah aplikasi, dan hanya muncul di menu luapan.

2.1 Menambahkan ikon untuk item menu

• Expand folder res => drawable => Klik kanan => New => Image Asset => Action Bar and Tab Items => beri nama ‘ic_order_white’ untuk action order => Klik clip art => pilih gambar yang sesuai dengan action => pilih theme ‘HOLO_DARK’ untuk menjadikan ikon berwarna putih => Next => Finish
• Ulang langkah-langkah di atas untuk ikon Status dan Favorites, dan beri nama masing-masing ic_status_white dan ic_favorites_white.

 

2.2 Tampilkan item menu sebagai ikon di bilah aplikasi

Untuk menampilkan item menu sebagai ikon di bilah aplikasi, gunakan atribut app:showAsAction di menu_main.xml. Nilai berikut untuk atribut akan menetapkan apakah tindakan akan muncul atau tidak di bilah aplikasi sebagai ikon:

• “always”: Selalu muncul di bilah aplikasi. (Jika tidak cukup ruang, ikon bisa menutupi ikon menu lainnya.)
• “ifRoom”: Muncul di bilah aplikasi jika ada ruang.
• “never”: Tidak pernah muncul di bilah aplikasi; teksnya muncul di menu luapan.

Buka menu_main.xml = >Tambahkan atribut lokasi ikon dan edit nilai app:showAsAction. dua item pertama (Order dan Status) selalu muncul, dan item Favorites hanya muncul jika terdapat ruang untuknya.

 

Hasil Akhir :

 

Tugas 3. Menangani item menu yang dipilih

3.1 Buat metode untuk menampilkan pilihan menu

Method displayToast() sudah ditambahkan

3.2 Gunakan handler kejadian onOptionsItemSelected

Ganti pernyataan if pada method onOptionsItemSelected() menjadi switch case dengan 4 case

Hasil Akhir :

4.3: Menggunakan Bilah Aplikasi dan Tab untuk Navigasi

Tugas 1. Menambahkan tombol Naik untuk navigasi ancestral

 

Tugas 2. Menambahkan navigasi tab dengan tampilan gesek

2.1 Buat layout untuk navigasi tab

Buat proyek baru menggunakan template Empty Activity. Beri nama aplikasi Tab Experiment.

Edit file **build.gradle (Module: app) dan tambahkan baris berikut (jika belum ditambahkan) ke bagian dependencies

Untuk menggunakan bilah alat dan bukan bilah tindakan dan judul aplikasi, tambah pernyataan berikut ke file res > values >> styles.xml untuk menyembunyikan bilah tindakan dan judul:+

Di layout main_activity.xml, buang TextView yang disediakan oleh template, dan tambahkan Toolbar, TabLayout, dan ViewPager di dalam layout root. Layout seharusnya tampak seperti kode berikut.

Selagi Anda mengetikkan atribut app:popupTheme untuk Toolbar, seperti yang ditampilkan di bawah ini, app akan berwarna merah jika Anda tidak menambahkan pernyataan berikut ini ke RelativeLayout:

2.2 Buat layout dan kelas untuk setiap fragmen

Tambahkan fragmen yang mewakili setiap layar bertab: TabFragment1, TabFragment2, dan TabFragment3. Untuk menambahkan setiap fragmen:

Klik com.example.android.tabexperiment di tampilan proyek.

Pilih File > New > Fragment > Fragment (Blank).

Beri nama fragmen TabFragment1.

Periksa opsi “Create layout XML?” dan ubah Nama Layout Fragmen untuk file XML ke tab_fragment1.

Hapus centang opsi “Include fragment factory methods?” dan “include interface callbacks?”. Anda tidak memerlukan metode ini.

Klik Finish.

Ulangi langkah-langkah di atas, menggunakan TabFragment2 dan TabFragment3 untuk Langkah C dan tab_fragment2 dan tab_fragment3 untuk Langkah D.

Edit setiap file XML layout fragmen (tab_fragment1, tab_fragment2, dan tab_fragment3):

Ubah Root Tag ke RelativeLayout.

Tambahkan TextView dengan teks, seperti “These are the top stories”.

Atur penampilan teks dengan android:textAppearance=”?android:attr/textAppearanceLarge”.

Ulangi langkah-langkah dia atas untuk setiap file XML layout, dengan memasukkan teks yang berbeda untuk TextView di langkah B.

2.3 Tambahkan PagerAdapter

Pola pengelola layout adaptor memungkinkan Anda memberikan layar konten yang berbeda di dalam akan dipilih–gunakan adaptor untuk mengisi layar konten untuk menampilkan akan dipilih dan pengelola layout yang mengubah layar konten bergantung pada tab mana yang di TextView.

Tambahkan kelas PagerAdapter baru pada aplikasi yang meluaskan FragmentStatePagerAdapter dan mendefinisikan jumlah tab ( mNumOfTabs):

Ubah metode getItem() yang baru ditambahkan ke yang berikut ini, yang menggunakan blok switch case untuk mengembalikan fragmen yang akan ditampilkan berdasarkan tab mana yang diklik

2.4 Mekarkan Toolbar dan TabLayout

Mekarkan Toolbar di metode onCreate() di MainActivity.java:

Buka strings.xml dan buat sumber daya string berikut:

Di akhir metode onCreate(), buat instance layout tab dari elemen tab_layout di layout dan setel teks untuk setiap tab menggunakan addTab():

2.5 Gunakan PagerAdapter untuk mengelola tampilan layar

Berikut ini kode yang Anda tambahkan ke metode onCreate() di tugas sebelumnya, tambahkan kode berikut ini untuk menggunakan PagerAdapter untuk mengelola tampilan layar (laman) di fragmen:

Hasil Akhir :

4.4 Membuat RecyclerView

Tugas 1. Membuat dan mengonfigurasi proyek baru

Di Android Studio, di proyek Anda, pastikan Anda berada dalam panel Project (1) dan di tampilan Android (2).

Di hierarki file, temukan folder Gradle Scripts (3).

Luaskan Gradle Scripts, jika perlu, dan buka file build.gradle (Module: app) (4).

Di akhir file build.gradle (Module: app), temukan bagian dependensi.

Tambahkan kedua dependensi ini sebagai dua baris di dalam bagian dependensi

Jika diminta, sinkronkan aplikasi Anda sekarang.

Jalankan aplikasi Anda. Anda seharusnya melihat aplikasi “RecyclerView” yang sama, menampilkan “Hello World”. Jika Anda mendapatkan kesalahan gradle, sinkronkan proyek Anda. Anda tidak perlu memasang plugin tambahan.

Tugas 2. Membuat kumpulan data

1. Buka file MainActivity.java.
2. Tambahkan variabel anggota privat untuk daftar tertaut mWordList.
3. Tambahakn variabel mCount penghitung integer untuk melacak angka kata.
4. Tambahkan kode yang mengisikan mWordList dengan kata. Gabungkan string “Word” dengan nilai mCount, lalu tingkatkan hitungan angka.
5. Karena Anda belum bisa menampilkan kata untuk pengujian, tambahkan pernyataan log yang memverifikasi bahwa kata ditambahkan ke daftar tertaut dengan benar.
6. Jalankan aplikasi Anda untuk memastikan tidak ada kesalahan.

Tugas 3: Membuat RecyclerView

Untuk menampilkan data dalam RecyclerView, Anda memerlukan bagian berikut:

• Anda akan menggunakan mWordList.
• Daftar gulir yang berisi item daftar.
• Layout untuk satu item data.Semua item daftar tampak sama.
• Pengelola layout.Pengelola layout menangani pengelolaan (layout) komponen antarmuka pengguna di sebuah tampilan. Anda telah menggunakan LinearLayout di praktik sebelumnya tempat sistem Android menangani layout untuk Anda. RecyclerView RecyclerView memerlukan pengelola layout eksplisit untuk mengelola susunan item daftar yang terdapat di dalamnya. Layout ini bisa vertikal, horizontal, atau berupa petak. Anda akan menggunakan pengelola layout linear vertikan yang disediakan oleh Android.
• Adaptor menghubungkan data Anda dengan RecyclerView. Ini menyiapkan data dalam holder tampilan. Anda akan membuat adaptor yang disisipkan ke dan memperbarui kata yang dihasilkan di tampilan Anda.
• Holder tampilan.Di dalam adaptor, Anda akan membuat kelas ViewHolder yang berisi informasi tampilan untuk menampilkan satu item dari layout item.

3.1 Buat layout utama di activity_main.xml

1. Buka build.gradle (Module: app) dan verifikasi apakah dependensi tampilan recycler tersedia.

compile ‘com.android.support:recyclerview-v7:24.1.1’

2. Buka activity_main.xml.
3. Pilih semua kode di activity_main.xml dan ganti dengan kode ini:

<?xml version=”1.0″ encoding=”utf-8″?>

<android.support.design.widget.CoordinatorLayout

xmlns:android=”http://schemas.android.com/apk/res/android”

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:orientation=”vertical”>

</android.support.design.widget.CoordinatorLayout>

4. Periksa kode dan catat hal-hal berikut ini:
   • Properti yang ditetapkan untuk grup tampilan ini sama seperti untuk LinearLayout karena beberapa properti dasar, seperti layout_width dan layout_height diperlukan untuk semua tampilan dan grup tampilan.
   • Karena CoordinatorLayout berada di pustaka dukungan, Anda harus menetapkan jalur lengkap ke pustaka dukungan. Anda harus melakukan tindakan yang sama untuk RecyclerView.
5. Tambahkan kode RecyclerView di dalam CoordinatorLayout:
   • Anda perlu menetapkan jalur lengkap, karena RecyclerView adalah bagian dari pustaka dukungan.

<android.support.v7.widget.RecyclerView>

</android.support.v7.widget.RecyclerView>

6. Berikan properti berikut pada RecyclerView Anda:

Atribut	Nilai
android:id	“@+id/recyclerview”
android:layout_width	match_parent
android:layout_height	match_parent

7. Jalankan aplikasi Anda dan pastikan tidak ada kesalahan yang ditampilkan di logcat. Anda hanya akan melihat layar kosong karena Anda belum menempatkan item apa pun ke dalam RecyclerView.

 

3.2 Buat layout untuk satu item daftar

Buat layout item kata sederhana menggunakan LinearLayout vertikan dengan TextView:

1. Klik kanan folder app/res/layoutdan pilih New > Layout resource file.
2. Beri nama file wordlist_itemdan klik OK.
3. Dalam mode Text, ubah LinearLayout yang dibuat dengan file agar sesuai dengan atribut berikut. Ekstrak sumber daya selagi Anda bekerja.

Atribut	Nilai
android:layout_width	“match_parent”
android:layout_height	“wrap_content”
android:orientation	“vertical”
android:padding	“6dp”

4. Tambahkan TextView untuk kata ke LinearLayout:

Atribut	Nilai
android:id	“@+id/word”
android:layout_width	“match_parent”
android:layout_height	“wrap_content”
android:textSize	“24sp”
android:textStyle	“bold”

3.3 Buat gaya dari atribut TextView

1. Saat wordlist_item.xml terbuka, arahkan mouse ke atas bagian TextView yang baru Anda buat dan Klik kanan > Refactor > Extract > Style.
2. Dalam dialog Extract Android Styledialog,
   • Beri nama gaya Anda dengan word_title.
   • Biarkan semua kotak tidak tercentang.
   • Centang kotak Launch ‘Use Style Where Possible‘.
   • Klik OK.
3. Saat diminta, terapkan gaya pada Whole Project.
4. Temukan dan periksa gaya word_title di values/styles.xml.
5. Kembali ke wordlist_item.xml. Tampilan teks sekarang mengacu ke gaya, sebagai ganti menggunakan properti penataan gaya individual.
6. Jalankan aplikasi Anda. Karena Anda telah membuang tampilan teks “Hello World” default, Anda akan melihat judul “RecyclerView” dan tampilan kosong.

3.4. Buat adapter dengan holder tampilan

Dalam tugas ini, Anda akan membangun adaptor dengan holder tampilan yang menghubungkan celah antara data di daftar kata Anda dengan RecyclerView yang menampilkannya.

1. Klik kanan java/com.android.example.recyclerviewdan pilih New >> Java Class.
2. Beri nama kelas sebagai WordListAdapter.
3. Berikan tanda tangan berikut pada WordListAdapter:

public class WordListAdapter extends

RecyclerView.Adapter<WordListAdapter.WordViewHolder>  {}

WordListAdapter menambah sebuah adaptor generik untuk RecyclerView agar menggunakan holder tampilan yang khusus untuk aplikasi Anda dan didefinisikan di dalam WordListAdapter. WordViewHolder menampilkan kesalahan karena Anda belum mendefinisikannya.

4. Klik deklarasi kelas (WordListAdapter) lalu klik bola lampu merah di sebelah kiri panel. Pilih Implement methods. Ini akan memunculkan kotak dialog yang meminta Anda memilih metode mana yang akan diimplementasikan. Pilih ketiga metode dan klik OK.
   Ini akan membuat placeholder kosong untuk semua metode yang harus Anda implementasikan. Perhatikan bagaimana onCreateViewHolder dan onBindViewHolder mengacu pada WordViewHolder, yang belum diimplementasikan.

2.5 Buat holder tampilan

1. Di dalam kelas WordListAdapter, tambahkan kelas dalam WordViewHolder dengan tanda tangan ini:

class WordViewHolder extends RecyclerView.ViewHolder {}

2. Anda akan melihat kesalahan tentang konstruktor default yang tidak ada. Anda bisa melihat detail tentang kesalahan dengan mengarahkan mouse ke atas kode sumber yang digaris bawah merah atau ke atas baris horizontal merah di margin kanan panel open-files.
3. Tambahkan variabel ke kelas dalam WordViewHolder untuk tampilan teks dan adaptor:

public final TextView wordItemView;

final WordListAdapter mAdapter;

4. Dalam kelas dala WordViewHolder, tambahkan sebuah konstruktor yang melakukan inisialisasi tampilan teks holder tampilan dari sumber daya XML dan menyetel adaptornya:

public WordViewHolder(View itemView, WordListAdapter adapter) {

super(itemView);

wordItemView = (TextView) itemView.findViewById(R.id.word);

this.mAdapter = adapter;

}

5. Jalankan aplikasi Anda untuk memastikan tidak ada kesalahan. Anda masih akan melihat tampilan kosong. Perhatikan peringatan E/RecyclerView: No adapter attached; skipping layoutdi logcat.

3.6 Menyimpan data Anda di adaptor

1. Untuk menampung data Anda di adaptor, buat daftar string yang tertaut dan privat di WordListAdapter dan beri nama mWordList.

private final LinkedList<String> mWordList;

2. Anda sekarang bisa mengisi metode getItemCount() untuk mengembalikan ukuran mWordList.

@Overridepublic int getItemCount() {   return mWordList.size();}

Selanjutnya, WordListAdapter memerlukan konstruktor yang menginisialisasi daftar kata dari data. Untuk membuat tampilan dari item daftar, WordListAdapter perlu memekarkan XML untuk sebuah item daftar. Anda harus menggunakan layout inflater untuk pekerjaan ini. LayoutInflator membaca deskripsi XML dan mengonversinya menjadi tampilan yang sesuai.

3. Buat variabel anggota untuk inflater di WordListAdapter.

private LayoutInflater mInflater;

4. Implementasikan constructor untuk WordListAdapter. Constructor perlu memiliki parameter konteks dan daftar kata tertaut dengan data aplikasi. Metode perlu membuat instance layout inflater untuk mInflaterdan menyetel mWordList ke data yang diteruskan.

public WordListAdapter(Context context, LinkedList<String> wordList) {   mInflater = LayoutInflater.from(context);   this.mWordList = wordList;}

5. Isikan metode onCreateViewHolder() dengan kode berikut. Metode onCreateViewHolder sama dengan metode onCreate. Metode ini memekarkan layout item dan mengembalikan holder tampilan dengan layout dan adaptor.

@Overridepublic WordViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {   View mItemView = mInflater.inflate(R.layout.wordlist_item, parent, false);   return new WordViewHolder(mItemView, this);}

6. Isikan metode onBindViewHolder dengan kode berikut. Metode onBindViewHolder menghubungkan data Anda ke holder tampilan.

@Overridepublic void onBindViewHolder(WordViewHolder holder, int position) {   String mCurrent = mWordList.get(position);   holder.wordItemView.setText(mCurrent);}

7. Jalankan aplikasi Anda untuk memastikan tidak ada kesalahan. Anda masih akan melihat peringatan “E/RecyclerView: No adapter attached; skipping layout”. Anda akan memperbaikinya di tugas selanjutnya.

3.7 Buat RecyclerView di Main Activity

1. Buka MainActivity.java
2. Tambahkan variabel anggota ke MainActivity untuk RecyclerView dan adaptor.

private RecyclerView mRecyclerView;

private WordListAdapter mAdapter;

3. Dalam metode onCreate Aktivitas, tambahkan kode berikut yang membuat RecyclerView dan menghubungkannya dengan adaptor dan data. Baca komentar kode! Perhatikan bahwa Anda harus menyisipkan kode ini setelah inisialisasi mWordList.

// Get a handle to the RecyclerView.

mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);

// Create an adapter and supply the data to be displayed.

mAdapter = new WordListAdapter(this, mWordList);

// Connect the adapter with the RecyclerView.

mRecyclerView.setAdapter(mAdapter);

// Give the RecyclerView a default layout manager.

mRecyclerView.setLayoutManager(new LinearLayoutManager(this));

4. Jalankan aplikasi Anda. Anda seharusnya melihat daftar kata ditampilkan dan Anda bisa menggulir daftar.

Tugas 4. Membuat daftar agar interaktif

4.1 Buat item merespons klik

1. Buka file WordListAdapter.java.
2. Ubah tanda tangan kelas WordViewHolder untuk mengimplementasikan View.onClickListener.

class WordViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener

3. Klik header kelas dan bola lampu merah untuk mengimplementasikan stub untuk metode yang diperlukan, yang dalam hal ini hanyalah metode onClick().
4. Tambahkan kode berikut pada isi metode onClick().

// Get the position of the item that was clicked.int mPosition = getLayoutPosition();// Use that to access the affected item in mWordList.String element = mWordList.get(mPosition);// Change the word in the mWordList.mWordList.set(mPosition, “Clicked! ” + element);// Notify the adapter, that the data has changed so it can// update the RecyclerView to display the data.mAdapter.notifyDataSetChanged();

5. Hubungkan onClickListener dengan tampilan. Tambahkan kode ini ke constructor WordViewHolder (di bawah baris “this.mAdapter = adapter”):

itemView.setOnClickListener(this);

6. Jalankan aplikasi Anda. Klik item untuk melihat perubahan teksnya.

 

Hasil Akhir :