Single post

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 (HomeWorkMobile, 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> laluBuka MainActivity kemudianTambahkan metode showDatePickerDialog() dan showTimePickerDialog(), dengan merujuk ke kode di bawah ini. Ini membuat instance FragmentManager 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

theme by teslathemes