Interaksi Pengguna dan Navigasi

4.1 Kontrol Input Pengguna

● Interaksi Pengguna

● Fokus

● Input teks dan keyboard

● Tombol Radio dan Kotak Centang

● Membuat Pilihan

○ dialog, spinner dan picker

● Mengenali isyarat

1. Interaksi pengguna
Pengguna mengharapkan untuk berinteraksi dengan aplikasi
● Mengeklik, menekan, berbicara, mengetik, dan mendengarkan
● Menggunakan kontrol input pengguna seperti tombol, menu, keyboard, kotak teks, dan
mikrofon
● Melakukan navigasi antar aktivitas

Desain interaksi pengguna

Harus dimengerti, mudah, dan konsisten:
● Pikirkan tentang bagaimana pengguna akan menggunakan aplikasi Anda
● Minimalkan langkah-langkah
● Gunakan elemen UI yang mudah diakses, dipahami, digunakan
● Ikuti praktik terbaik Android
● Penuhi harapan pengguna

2. Control input
Cara mendapatkan input dari pengguna
● Bentuk bebas
○ Input teks dan suara
● Aksi
○ Tombol
○ Menu kontekstual
○ Isyarat
○ Dialog
● Pilihan terbatas
○ Picker
○ Kotak centang
○ Tombol radio
○ Tombol toggle
○ Spinner
Contoh kontrol input pengguna

1. Button

2. Bidang teks

3. Bilah telusur

4. Kotak centang

5. Tombol radio

6. Toggle

7. Spinner

Dialog peringatan, picker tanggal, picker waktu

Tampilan adalah kelas dasar untuk kontrol input

● Kelas View adalah blok pembangun dasar untuk semua komponen UI, termasuk kontrol input

● Tampilan adalah kelas dasar untuk kelas-kelas yang menyediakan komponen UI interaktif

● Tampilan menyediakan interaksi dasar melalui android:onClick

 3. Focus
 Tampilan yang menerima input pengguna memiliki "Fokus"
 Hanya satu tampilan yang bisa memiliki fokus
 Fokus memperjelas tampilan mana yang mendapat input
 Fokus ditetapkan oleh
o Pengguna mengetuk tampilan
o Aplikasi mengarahkan pengguna dari satu kontrol input teks ke yang berikutnya
menggunakan Return, Tab, atau tombol panah
o Memanggil requestFocus() pada setiap tampilan yang bisa difokuskan

Clickable versus focusable

Clickable—Tampilan bisa merespons klik atau ketuk

Focusable—Tampilan bisa mendapatkan fokus untuk menerima input

Kontrol input seperti keyboard mengirim input ke tampilan yang memiliki fokus

Tampilan apa yang mendapat fokus berikutnya?

● Tampilan paling atas yang disentuh

● Setelah pengguna mengirim input, fokus bergerak ke tampilan terdekat—prioritas-nya adalah

kiri ke kanan, atas ke bawah

● Fokus bisa berubah ketika pengguna berinteraksi dengan kontrol arah

Memandu pengguna

● Menunjukkan tampilan mana yang memiliki fokus secara visual sehingga pengguna tahu ke
mana input mereka berjalan

● Menunjukkan tampilan mana yang memiliki fokus akan membantu pengguna menavigasi
melalui aliran

● Dapat diprediksi dan logis—tidak ada kejutan!

Memandu fokus

● Mengatur kontrol masukan dalam layout dari kiri ke kanan dan atas ke bawah dalam urutan
penetapan fokus yang Anda inginkan

● Meletakkan kontrol input dalam kelompok tampilan dalam layout Anda

● Menetapkan pengurutan dalam XML

android:id="@+id/top"

android:focusable="true"

android:nextFocusDown="@+id/bottom"

Mengatur fokus secara eksplisit

Gunakan metode dari kelas View untuk mengatur fokus

● setFocusable() mengatur apakah tampilan bisa memiliki fokus

● requestFocus() memberikan fokus ke tampilan tertentu

● setOnFocusChangeListener() mengatur listener ketika tampilan memperoleh atau kehilangan

fokus

● onFocusChanged() dipanggil ketika fokus pada tampilan berubah

Menemukan tampilan dengan fokus

● Activity.getCurrentFocus()

● ViewGroup.getFocusedChild()

Input text

EditText

● Kelas EditText

● Beberapa baris input

● Karakter, angka, dan simbol

● Pemeriksa ejaan

● Menekan tombol Return (Enter)

memulai baris baru

● Bisa disesuaikan

Tombol "Action"

Mendapatkan teks

● Menjadikan objek EditText untuk tampilan EditText

EditText simpleEditText =
(EditText) findViewById(R.id.edit_simple);

● Mengambil CharSequence dan mengubahnya menjadi string

String strValue =
simpleEditText.getText().toString();

Tipe input umum

● textShortMessage—Membatasi input sampai 1 baris

● textCapSentences—Mengatur keyboard untuk melakukan kapitalisasi pada awal kalimat

● textAutoCorrect—Mengaktifkan autocorrect

● textPassword—Menyembunyikan karakter yang diketik

● textEmailAddress—Menampilkan tanda @ pada keyboard

● phone—keyboard numerik untuk nomor telepon

● android:inputType="phone"

● android:inputType="textAutoCorrect|textCapSentences"

Tombol

● Tampilan yang merespons klik atau tekanan

● Biasanya teks atau visual akan menunjukkan apa yang akan terjadi ketika ditekan

● Tampilan: Button > ToggleButton, ImageView > FloatingActionButton (FAB)

● Status: normal, difokuskan, dinonaktifkan, ditekan, on/off

● Visual: diangkat, datar, clipart, gambar, teks

Merespons ketukan tombol

● Dalam kode Anda: Gunakan listener kejadian OnClickListener.

● Dalam XML: gunakan atribut android:onClick di layout XML:

<Button

android:id="@+id/button_send"

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

android:text="@string/button_send" android:onClick="sendMessage" />

Setelan listener dengan callback onClick

Button button = (Button) findViewById(R.id.button);

button.setOnClickListener(new View.OnClickListener() {

public void onClick(View v) {

// Do something in response to button click

});

Floating Action Buttons (FAB)

● Terangkat, melingkar, mengambang di atas layout

● Aksi primer atau "yang dipromosikan" pada layar

● Satu tiap layar

Misalnya:

Tombol Add Contact di aplikasi Contacts

Menggunakan FAB

● Menambahkan pustaka dukungan desain ke build.gradle

compile 'com.android.support:design:a.b.c'
 ● Layout

<android.support.design.widget.FloatingActionButton

android:id="@+id/fab"

android:layout_gravity="bottom|end"

android:layout_margin="@dimen/fab_margin"

android:src="@drawable/ic_fab_chat_button_white"

.../>

Aset gambar tombol

1. Klik-kanan app/res/drawable

2. Pilih New > Image Asset

3. Pilih Action Bar and Tab Items

dari menu drop down

4. Klik Clipart: image

(Logo Android)

Eksperimen
1. Pilih New > Vector Asset
Membuat Pilihan

Begitu banyak pilihan!

● Kotak centang

● Tombol radio
 ● Toggle

● Spinner

Kotak centang, tombol radio dan toggle

Kotak centang

● Pengguna bisa memilih sejumlah pilihan

● Mencentang sebuah kotak tidak menghapus centang lainnya

● Pengguna menginginkan kotak centang dalam daftar vertikal

● Biasanya digunakan dengan tombol submit

 ● Setiap kotak centang adalah tampilan dan
bisa memiliki sebuah handler onClick

Tombol radio

● Pengguna bisa memilih salah satu dari beberapa pilihan

● Memasukkan tombol radio dalam RadioGroup

● Mencentang sebuah kotak akan menghapus

centang lainnya

● Meletakkan tombol radio dalam daftar secara

vertikal atau horizontal jika labelnya pendek

● Setiap tombol radio bisa memiliki sebuah handler onClick

● Biasanya digunakan dengan tombol submit

untuk RadioGroup

Tombol toggle dan switch

● Pengguna bisa beralih di antara 2 status khusus (on/off)

● Gunakan android:onClick+callback—atau tangani klik dalam kode

Tombol toggle

Switch
Spinner

● Cara cepat untuk memilih nilai dari

sekumpulan nilai.

● Daftar drop-down menunjukkan semua

nilai, pengguna hanya bisa memilih satu

● Spinner bergulir otomatis apabila diperlukan

● Gunakan kelas Spinner.

Mengimplementasikan spinner

1. Buat elemen UI Spinner dalam layout XML

2. Tentukan pilihan spinner dalam array

3. Buat Spinner dan atur onItemSelectedListener

4. Buat adaptor dengan layout spinner default

5. Pasang adaptor ke spinner

6. Implementasikan metode onItemSelectedListener

Membuat XML spinner

Dalam file XML layout

<Spinner

android:id="@+id/label_spinner"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

</Spinner>

Menentukan array dari pilihan spinner

Dalam file sumber daya arrays.xml

<string-array name="labels_array">

<item>Home</item>

<item>Work</item>
 <item>Mobile</item>

<item>Other</item>

</string-array>

Membuat spinner dan menyematkan listener

public class MainActivity extends AppCompatActivity implements

AdapterView.OnItemSelectedListener

// In onCreate()

Spinner spinner = (Spinner) findViewById(R.id.label_spinner);

if (spinner != null) {

spinner.setOnItemSelectedListener(this);

Apa yang dimaksud dengan adaptor?

Adaptor bagaikan jembatan, atau perantara, antara dua antarmuka yang tidak kompatibel

Misalnya, pembaca kartu memori bertindak sebagai adaptor antara kartu memori dan laptop

layout

Kartu Memori Card

Komputer Laptop
(Array Reader
(Tampilan Spinner)
Pilihan) (Adaptor)

Membuat adaptor

Buat ArrayAdapter menggunakan array string

dan layout spinner default

ArrayAdapter<CharSequence> adapter =

ArrayAdapter.createFromResource(

this, R.array.labels_array,
 // Layout for each item

android.R.layout.simple_spinner_item);

Memasang adaptor ke spinner

● Tentukan layout untuk menu drop down

adapter.setDropDownViewResource(

android.R.layout.simple_spinner_dropdown_item);

● Pasang adaptor ke spinner

spinner.setAdapter(adapter);

Mengimplementasikan onItemSelectedListener

public class MainActivity extends AppCompatActivity implements

AdapterView.OnItemSelectedListener

public void onItemSelected(AdapterView<?> adapterView,

View view, int pos, long id) {

String spinner_item =

adapterView.getItemAtPosition(pos).toString();

// Do something here with the item

public void onNothingSelected(AdapterView<?> adapterView) {

// Do something

Dialog

● Dialog muncul di bagian atas,

mengganggu aliran aktivitas
AlertD
● Memerlukan tindakan pengguna
untuk menghentikannya

TimePickerDialog DatePickerDialog
AlertDialog

AlertDialog bisa
menampilkan:

1. Judul (opsional)

2. Area materi

3. Tombol aksi

Membuat AlertDialog

Gunakan AlertDialog.Builder untuk membuat dialog peringatan standar dan mengatur atribut:

public void onClickShowAlert(View view) {

AlertDialog.Builder alertDialog = new

AlertDialog.Builder(MainActivity.this);

alertDialog.setTitle("Connect to Provider");

alertDialog.setMessage(R.string.alert_message);

...

Menambahkan tindakan tombol

● alertDialog.setPositiveButton()

● alertDialog.setNeutralButton()

● alertDialog.setNegativeButton()

Contoh kode alertDialog

alertDialog.setPositiveButton(

"OK", newDialogInterface.OnClickListener() {

public void onClick(DialogInterface dialog, int which) {

// User clicked OK button.

});

Pola yang sama untuk setNegativeButton() dan setNeutralButton()

Picker

● DatePickerDialog

● TimePickerDialog

Picker menggunakan fragmen

● Gunakan DialogFragment untuk

menampilkan picker

● DialogFragment adalah jendela yang

mengambang di atas jendela aktivitas

Pengantar fragmen

● Sebuah fragment adalah seperti aktivitas-mini dalam suatu aktivitas

○ Mengelola siklus hidupnya sendiri.

○ Menerima kejadian input sendiri.

● Bisa ditambahkan atau dihapus ketika aktivitas induk sedang berjalan

● Beberapa fragmen bisa digabungkan menjadi sebuah aktivitas tunggal

● Bisa digunakan kembali dalam beberapa aktivitas

Membuat dialog pemilih tanggal

1. Menambahkan fragmen kosong yang memperbesar DialogFragment dan mengimplementasikan

DatePickerDialog.OnDateSetListener
 2. Dalam onCreateDialog() inisialisasi tanggal dan mengembalikan dialog

3. Dalam onDateSet() menangani tanggal

4. Aktivitas menunjukkan pemilih dan menambahkan metode untuk menggunakan tanggal

Membuat dialog pemilih waktu

1. Menambahkan fragmen kosong yang memperbesar DialogFragment dan mengimplementasikan

TimePickerDialog.OnTimeSetListener

2. Dalam onCreateDialog() inisialisasi waktu dan mengembalikan dialog

3. Dalam onTimeSet() menangani waktu

4. Aktivitas, menunjukkan pemilih dan menambahkan metode untuk menggunakan waktu

Isyarat umum

Isyarat sentuh

Isyarat sentuh meliputi: Jangan tergantung pada

● sentuh lama
isyarat sentuh untuk
● ketuk dua kali

● fling perilaku dasar aplikasi!

● seret

● gulir

● cubit

Mendeteksi isyarat

Kelas dan metode yang tersedia untuk membantu Anda menangani isyarat.

● Kelas GestureDetectorCompat untuk isyarat umum

● Kelas MotionEvent untuk kejadian gerak

Mendeteksi semua tipe isyarat

1. Mengumpulkan data tentang kejadian sentuh.

 2. Menafsirkan data untuk melihat apakah memenuhi kriteria untuk salah satu isyarat yang
didukung aplikasi Anda.

Baca selengkapnya tentang bagaimana menangani isyarat dalam Dokumentasi pengembang Android