4.1: Using Keyboards, Input Controls, Alerts, and Pickers
Dalam praktik ini, akan membuat aplikasi baru yang bernama Keyboard Samples untuk bereksperimen dengan dengan atribut “android:inputType” untuk elemen UI “EditText”. Anda akan mengubah keyboard sehingga akan menyarankan pembetulan ejaan dan mengubah kapitalisasi setiap kalimat, seperti yang ditampilkan di sebelah kiri gambar di bawah ini. Untuk menyederhanakan aplikasi, Anda akan menampilkan teks yang dimasukkan dalam pesan “toast”, seperti yang ditampilkan di sebelah kanan gambar di bawah ini. Anda juga akan mengubah keyboard menjadi keyboard yang menampilkan simbol “@” di lokasi yang umum untuk memasukkan alamat email, dan menjadi keypad ponsel untuk memasukkan nomor telepon, seperti yang ditampilkan di sebelah kiri dan di tengah gambar di bawah ini. Sebagai tantangan, Anda akan mengimplementasikan listener untuk kunci tindakan di keyboard untuk mengirimkan intent yang implisit ke aplikasi lain untuk memutar nomor telepon.
Task 1. Experiment with text entry keyboard attributes
1.1 Membuat layout utama dan metode showText
Buat proyek baru
Kemudian pilih template Empty Activity
Buka file layout activity_main.xml untuk mengedit kode XML
Tambahkan Tombol di atas elemen TextView yang sudah ada dengan atribut berikut:
Hasil setelah diubah seperti perintah diatas
Extract the string resource for the android:text pada cursor on “Show”
Maka hasilnya akan seperti dibawah ini
Ubah attribute teks menjadi berikut :
Hasil setelah diubah seperti perintah diatas
Lihat MainActivity kemudian perluas AppCompatActivity
Buka MainActivity.java dan masukkan metode showText
Kemudian buka strings.xml (di app> res> values), dan edit nilai app_name menjadi “Keyboard Samples” (pastikan untuk menyertakan spasi antara “Keyboard” dan “Samples”
1.2 Set the keyboard to capitalize sentences
Tambhakan attribute adnorid:inputType ke elemen EditText menggunakan nilai textCapSentence untuk keyboard menjadi huruf besar diawal kallimat, sehingga pengguna bisa otomatis memulai kalimat dengan huruf besar
Lalu run agar dapat melihat Huruf besar sekarang akan tampil pada keyboard di awal kalimat saat mentapping keyboard
1.3 Setel keyboard untuk menyembunyikan sandi saat memasukkannya
Ubah elemen EditText untuk menggunakan nilai textPassword untuk atribut android:inputType dan Ubah android:hint menjadi “Enter your password”
Kemudian Run aplikasi
Task 2. Change the keyboard type
Setiap bidang teks mengharapkan tipe masukan teks tertentu, seperti alamat email, nomor telepon, sandi, atau hanya teks biasa. Penting untuk menetapkan tipe masukan untuk setiap bidang teks di aplikasi Anda sehingga sistem akan menampilkan metode masukan virtual yang sesuai, seperti:
- Keyboard di layar standar untuk teks biasa
- Keyboard untuk alamat email yang menyertakan simbol “@” di lokasi penting
- Keypad ponsel untuk nomor telepon
2.1 Menggunakan keyboard email
Pada elemen EditText di file layout activity_main.xml, ubah atribut android:inputType menjadi android:inputType=”textEmailAddress” dan ubah Ubah atribut android:hint menjadi “Enter an email address”
Extract the string resource untuk android:hint value ke enter_email
2.2 Menggunakan keypad ponsel
Pada elemen EditText di file layout activity_main.xml, ubah atribut android:inputType menjadi yang berikut: android:inputType=”phone” dan Ubah atribut android:hint menjadi “Enter a phone number”
Extract the string resource untuk the android:hint value ke enter_phone
Task 3. Add a spinner input control for selecting a phone label
Spinner menyediakan cara cepat untuk memilih salah satu dari serangkaian nilai. Menyentuh spinner akan menampilkan daftar tarik-turun dengan semua nilai yang tersedia, yang bisa dipilih oleh pengguna. Jika hanya menyediakan dua atau tiga pilihan, Anda mungkin ingin menggunakan tombol radio untuk pilihan jika memiliki ruang di layout untuk tombol-tombol itu; akan tetapi, jika ada lebih dari tiga pilihan, spinner bekerja sangat baik, menggulir seperlunya untuk menampilkan item, dan hanya membutuhkan sedikit ruang di layout Anda. Untuk informasi selengkapnya tentang spinner, lihat Spinner.Untuk memberikan cara memilih label untuk nomor telepon (misalnya Rumah, Kantor, Seluler, dan Lainnya), Anda bisa menambahkan spinner ke layout agar tampil tepat di sebelah bidang nomor telepon.
3.1 Salin proyek KeyboardSamples dan ubah layout
Salin folder proyek KeyboardSamples, ubah namanya menjadi PhoneNumberSpinner
Setelah mengoptimalkan kode, ubah nilai ” di file strings.xml (di dalam app > res > values) menjadi Phone Number Spinner (berikut spasinya) sebagai nama aplikasi
Buka file layout activity_main.xml dan Kurung elemen EditText dan Button yang ada dari pelajaran sebelumnya di dalam LinearLayoutdengan orientasi horizontal, dan menempatkan elemen EditText di atas Button
Tambahkan elemen Spinner di antara elemen EditText dan elemen Button
Maka, hasilnya akan seperti ini :
Tambakan LinearLayout lagi di bawah LinearLayout yang baru saja Anda buat, dengan orientasi horizontal untuk mengurung dua elemen TextView secara bersisian — deskripsi teks dan bidang teks untuk menampilkan nomor telepon dan label telepon — dan meratakan LinearLayout ke bawah induknya
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.
Untuk mendefinisikan callback pilihan untuk spinner, ubah kelas MainActivity Anda untuk mengimplementasikan antarmuka AdapterView.OnItemSelectedListener
Selagi Anda mengetik AdapterView. di pernyataan di atas, Android Studio otomatis mengimpor widget AdapterView. Alasan mengapa Anda memerlukan AdapterView adalah Anda memerlukan adaptor—khususnya ArrayAdapter—untuk menetapkan larik ke spinner. Sebuah adaptor* menyambungkan data Anda—dalam hal ini, larik item spinner—ke tampilan spinner
3.2 Tambahkan kode untuk mengaktifkan spinner dan listener-nya
3.3 Tambahkan kode untuk merespons pilihan pengguna
Task 4. Use a dialog for an alert requiring a decision
Anda bisa menyediakan dialog untuk peringatan yang mengharuskan pengguna membuat keputusan. Dialog adalah jendela yang muncul di atas tampilan atau mengisi tampilan, menyela alur aktivitas.Misalnya, sebuah dialog peringatan mungkin mengharuskan pengguna untuk mengeklik Continue setelah membacanya, atau memberi pilihan kepada pengguna untuk menyetujui suatu tindakan dengan mengeklik tombol positif (seperti OK atau Accept), atau untuk tidak menyetujui dengan mengeklik tombol negatif (seperti Cancel). Di Android, gunakan subkelas AlertDialog dari kelas Dialog untuk menampilkan dialog standar untuk peringatan
4.1 Buat proyek baru dengan layout untuk menampilkan dialog peringatan
Buat proyek baru bernama Alert Sample berdasarkan template Empty Activity
Lalu buka layout activity_main.xml dan buat atribut sesuai yang diminta
Extraxt string android:text menjadi tap_test
Lalu buat button berdasarkan atribut yang diminta
Kemudian string android:text menjadi alert_button
Lalu extract nilai untuk dimensi android:layout_marginTop menjadi button_top_margin
Penetapan sumber daya dimensi disimpan di file dimens.xml (di app > res > values > dimens). Anda bisa mengedit file ini untuk mengubah penetapan, sehingga aplikasi bisa diubah untuk ukuran layar yang berbeda
4.2 Menambahkan dialog peringatan ke aktivitas utama
Pola desain builder mempermudah pembuatan objek dari kelas yang membutuhkan banyak atribut wajib serta opsional dan karena itu memerlukan banyak parameter untuk dibangun. Tanpa pola ini, Anda tentunya harus membuat konstruktor untuk kombinasi atribut yang diperlukan dan atribut opsional; dengan pola ini, kode lebih mudah dibaca dan dikelola. Untuk informasi selengkapnya tentang pola desain builder, lihat pola Builder
Tambahkan metode onClickShowAlert() ke MainActivity.java, lalu Setel judul dan pesan untuk dialog peringatan dalam onClickShowAlert(),kemudian Ekstrak judul dan pesan ke dalam sumber daya string, Tambahkan tombol OK pada peringatan dengan setPositiveButton() dan menggunakan onClickListener(), dan Ekstrak sumber daya string untuk “OK” dan untuk “Pressed OK”, dan Tambahkan tombol Cancel pada peringatan dengan setNegativeButton() dan onClickListener(), Ekstrak sumber daya string untuk “Cancel” dan “Pressed Cancel” lalu tambahkan show() yang membuat lalu menampilkan dialog peringatan, ke akhir onClickShowAlert()
Run aplikasi
Task 5. Use a picker for user input
ndroid menyediakan dialog yang siap digunakan, disebut picker, untuk memilih waktu atau tanggal. Anda bisa menggunakannya untuk memastikan pengguna Anda memilih waktu atau tanggal yang valid, yang diformat dengan benar dan disesuaikan dengan waktu dan tanggal lokal pengguna. Masing-masing picker menyediakan kontrol untuk memilih setiap bagian waktu (jam, menit, AM/PM) atau tanggal (bulan, tanggal, tahun). Anda bisa membaca semua tentang mempersiapkan picker di Picker. Dalam tugas ini, Anda akan membuat proyek baru, dan menambahkan picker tanggal dan picker waktu. Anda juga akan mempelajari cara menggunakan fragmen. Fragmen adalah perilaku atau bagian antarmuka pengguna dalam suatu aktivitas. Fragmen mirip seperti aktivitas mini di dalam aktivitas utama, dengan siklus hidupnya sendiri, dan digunakan untuk membangun picker. Semua pekerjaan dilakukan untuk Anda. Untuk mengetahui tentang fragmen, lihat Fragmen dalam Panduan API.
5.1 Membuat layout aktivitas utama
Mulai proyek baru yang bernama Date Time Pickers menggunakan template Empty Activity
Buka activity_main.xml untuk mengedit kode layout
Ubah induk RelativeLayout
agar menjadi LinearLayout
dan tambahkan android:orientation="vertical"
untuk mengatur orientasi layout menjadi vertikal. Tidak perlu mengkhawatirkan penampilan layout saat ini
Lalu kemudian ikutin peirntah sesuai yang di minta
5.2 Buat fragmen baru untuk picker tanggal
Dalam latihan ini, Anda akan menambahkan fragmen untuk picker tanggal. Fragmen mirip seperti aktivitas mini di dalam aktivitas utama, dengan daur hidupnya sendiri expand app > java > com.example.android.DateTimePickers dan pilih MainActivity. Kemudaian Pilih File > New > Fragment > Fragment (Blank), dan beri nama fragmen DatePickerFragment
Dan unchecklist
Lalu lakukan sesuai perintah pada task
5.3 Buat fragmen baru untuk picker waktu
Kembali ke mainActivity lagi
Lalu Pilih File > New > Fragment > Fragment (Blank), dan beri nama fragmen TimePickerFragment
Lalu lakukan perintah seperti yang ada pada task
5.4 Modifikasi aktivitas utama
Buat sumber daya string di strings.xml:
<string name="date_picker">datePicker</string> dan <string name="time_picker">timePicker</string> lalu
Buka MainActivity kemudianTambahkan metodeshowDatePickerDialog()
danshowTimePickerDialog()
, dengan merujuk ke kode di bawah ini. Ini membuat instanceFragmentManager
untuk mengelola fragmen secara otomatis, dan untuk menampilkan picker. Untuk informasi selengkapnya tentang fragmen, lihat Fragmen.
Kemudian Run
5.5 Gunakan tanggal dan waktu yang dipilih
hasil run
Task 6: Use image views as buttons
Anda bisa membuat tampilan agar bisa diklik, sebagai tombol, dengan menambahkan atributandroid:onClick
di layout XML. Misalnya, Anda bisa membuat gambar agar berfungsi sebagai tombol dengan menambahkan android:onClick
ke ImageView
6.1 Mulai proyek baru
Mulai proyek Android Studio baru dengan nama aplikasi Droid Cafe. Pilih template Basic Activity, terima setelan default, dan klik Finish. Proyek terbuka dengan dua layout dalam folder res > layout: activity_main.xml, dan content_main.xml
Lalu ikutin langkah seperti yang ada pada task
6.2 Tambahkan gambar
6.3 Tambahkan metode onClick untuk tampilan gambar
Hasil run
Task 7: Use radio buttons
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. Kelas OrderActivity
sekarang seharusnya dicantumkan di bawah MainActivity
di folder java dan activity_order.xml
sekarang seharusnya dicantumkan di folder layout. Template Empty Activity ditambahkan di file berikut.
Buka MainActivity. Ubah metode showFoodOrder()
untuk membuat intent eksplisit untuk memulai OrderActivity
Run aplikasi
7.2 Tambahkan layout untuk tombol radio
Untuk membuat setiap opsi tombol radio, Anda akan membuat elemen RadioButton di file layout activity_order.xml
, yang ditautkan ke OrderActivity
. Setelah mengedit file layout, layout untuk tombol radio di OrderActivity
Ikutin langkah seperti yang diminta pada task
Tambahkan tiga elemen RadioButton
berikut di dalam RadioGroup
menggunakan atribut berikut. Entri "onRadioButtonClicked"
untuk atribut onClick
akan disorot sampai Anda menambahkan metode tersebut di tugas
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
. Biasanya, aplikasi Anda akan menampilkan pesan mengenai tipe pengantaran seperti apa yang dipilih. Anda akan membuat ini dengan pesan toast dengan membuat metode yang bernama displayToast()
di 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.
Lalu ikutin perintah seperti yang ada pada task
Run aplikasi
LEAVE A COMMENT