User Interface

(part 4)
Sunaryo Winardi, S.Kom., M.TI.

PRODI. TEKNIK INFORMATIKA (S-1)

Pembahasan
• Gesture Deteksi
• Menu
• Options menu
• Context menu
• Popup menu
Gesture Deteksi
• Jika aplikasi Anda menggunakan isyarat umum
seperti ketuk dua kali, tekan lama, geser, dan
seterusnya, anda dapat memanfaatkan turunan
kelas GestureDetector untuk mendeteksi isyarat
umum
• GestureDetector yang dapat anda gunakan untuk
dapat mendeteksi beragam isyarat dan kejadian
dengan menggunakan objek MotionEvent.
Gesture Deteksi
• GestureDetector.OnGestureListener merupakan
bagian dari GestureDetector, harus
diimplementasikan kedalam sebuah kelas, atau
langsung di dalam kelas aktifitas anda.
• Implementasi ini akan meminta anda untuk
menerapkan metode onFling(), onDown(),
onScroll(), onShowPress(), onSingleTapUp() dan
onLongPress()
• class tersebut juga dapat mengimplementasikan
GestureDetector.OnDoubleTapListener dan
menerapkan metode onDoubleTap()
Gesture Deteksi
• Untuk menggunakan GestureDetector, anda dapat
mengimplementasikannya sebagai berikut.
class MainActivity : AppCompatActivity()
,GestureDetector.OnGestureListener
,GestureDetector.OnDoubleTapListener
{
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
}

Perhatikan, class MainActivity anda akan error

Gesture Deteksi
• Ini diakibatkan anda diwajibkan mengimplementasikan
beberapa metode dari GestureDetector.OnGestureListener
dan GestureDetector.OnDoubleTapListener
• Untuk itu klik kanan pada keyword class dan pilih Implement
members
Gesture Deteksi
• Pilih semua (Ctrl + A)
• Dan klik ok
Gesture Deteksi : Hasil
 Gesture Deteksi
• Anda dapat mengubah semua proses TO DO
menjadi:
class MainActivity : AppCompatActivity()
, GestureDetector.OnGestureListener
,GestureDetector.OnDoubleTapListener
{
override fun onShowPress(p0: MotionEvent?) {
status.setText("on Press")
}
override fun onSingleTapUp(p0: MotionEvent?): Boolean {
status.setText("on Single Tap")
return true
}
override fun onDown(p0: MotionEvent?): Boolean {
status.setText("on Down")
return true
}
override fun onFling(p0: MotionEvent?, p1: MotionEvent?,
p2: Float, p3: Float): Boolean {
return false;
}
 override fun onScroll(p0: MotionEvent?, p1: MotionEvent?
, p2: Float, p3: Float): Boolean {
return false
}

override fun onLongPress(p0: MotionEvent?) {

override fun onDoubleTap(p0: MotionEvent?): Boolean {

return false
}

override fun onDoubleTapEvent(p0: MotionEvent?): Boolean {

return false
}

override fun onSingleTapConfirmed(p0: MotionEvent?): Boolean {

return false
}
}
Gesture Deteksi
• Ketika Kelas Aktifitas anda telah
mengimplementasikan listener untuk mendeteksi
Gesture pada perangkat anda, maka langkah
selanjutnya adalah membentuk objek dair kelas
GestureDetectorCompat pada metode onCreate()
• Ketika anda juga membuat listener metode
OnDoubleTapListener, maka anda harus
mendaftarkan listener tersebut didalam objek
GestureDetectorCompat menggunakan fungsi
setOnDoubleTapListener()
Gesture Deteksi
• Untuk mencoba semua isyarat, tambahkan kode
berikut pada MainActivity anda:

var mDetector: GestureDetectorCompat? = null

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
mDetector = GestureDetectorCompat(this,this)
mDetector?.setOnDoubleTapListener(this)
}
Gesture Deteksi
• Sampai tahap ini, aplikasi belum dapat merespon
gesture.
• Untuk mengaktifkan Gesture Deteksi, anda perlu
mengoverride metode onTouchEvent() pada kelas
aktifitas anda
• Untuk mencoba Gesture Detection, tambahkan kode
berikut pada MainActivity anda:

override fun onTouchEvent(event: MotionEvent): Boolean {

this.mDetector?.onTouchEvent(event)
return super.onTouchEvent(event)
}

• Read More :
https://developer.android.com/reference/android/view/GestureDetector.O
nGestureListener
Menu
• Menu adalah serangkaian opsi yang diberikan kepada
pengguna untuk menjalankan suatu fungsi, seperti
menelusuri aktivitas, menyimpan data, atau mengedit data.
• Sejak Android Versi 3.0 (API level 11), Android telah
membuang Menu button, sehingga saat ini terdapat
tampilan 3 menu yang dapat digunakan, yaitu:
1. Options menu
2. Context menu
3. Popup menu
Menu
• Untuk semua tipe menu, Android menggunakan resource
format XML untuk mendefinisikan menu pilihan dan
memasukkan menu pilihan tersebut pada activity atau
fragment anda.
• Menggunakan resource lebih baik dikarenakan :
1. Visualisasi struktur dari menu lebih mudah dibangun
menggunakan XML.
2. resource memisahkan konten menu dari kode aktivitas.
3. Memudahkan anda dalam membuat beberapa alternative
tampilan menu untuk menyesuaikan perbedaan platform,
ukuran layar, and perbedaan konfigurasi karena
pemanfaatan framework.
Menu
• Untuk mendefinisikan menu menggunakan resource file XML,
Anda perlu menyediakan sebuah resource untuk menu pada
directory res dan menambahkan item menu ke sumber daya
menu XML, dengan cara :
1. Klik direktori res, dan pilih File > New > Android resource
directory, pilih menu dalam Resource type, dan klik OK.
Menu
2. Klik direktori menu baru pada directory res, dan pilih File
> New > Menu resource file, masukkan nama file sebagai
main_menu dan klik OK. File main_menu.xml sekarang
ada di dalam direktori menu.
Menu
• File main_menu.xml sekarang ada di dalam direktori menu.
klik tab Text di sebelah tab Design di bagian bawah panel
untuk menampilkan file.

Klik
Menu
Untuk mendefinisikan menu dalam format XML, gunakan
element-element Berikut:
• <menu>
Mendefinisikan Menu, yang berisikan element item. <menu>
element merupakan akar dari file xml yang dapat berisikan
beberapa elemen <item> dan <group>.
• <item>
Membuat menu pilihan yang dapat dipilih dan harus berada
dalam element <menu>
• <group>
Bersifat opsional, menampung elemen <item> yang digunakan
untuk mengkategorikan menu pilihan. Element ini tidak
terlihat,
Menu
• Contoh : isi main_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/file“
android:title="New" >
<!– membuat submenu -->
<menu>
<item android:id="@+id/create_new_file"
android:title="New File" />
<item android:id="@+id/create_new_folder"
android:title="New Folder" />
</menu>
</item>
<item android:id="@+id/open"
android:title="Open"/>
<item android:id="@+id/help"
android:title="Help" />
</menu>
Menu
• Anda dapat menambahkan beberapa attribu pada
element <item>, seperti:
1. android:id : Penanda unik sehingga aplikasi
dapat mengenal objek
2. android:icon Menggunakan drawable untuk
menambahkan icon gambar
3. android:title Memberikan judul dari menu
Options Menu
• Options menu merupakan menu pilihan utama untuk
sebuah aktivitas dan biasanya berlaku secara global
untuk seluruh aktivitas, seperti “Search” atau
“Settings.“
• Menu yang ditampilkan bergantung pada versi android
yang anda gunakan saat mengembangkan aplikasi

Android 3.0 (API level 11)

Android 2.3.x (API level 10)
dan lebih tinggi
Dan yang lebih rendah
Options Menu
• Untuk menampilkan options menu pada aktivitas
anda, maka lakukan proses override pada metode
onCreateOptionsMenu()
• Metode ini digunakan untuk menanamkan menu
yang telah anda buat pada file resource XML.
 Options Menu
• Contoh : isi MainActivity.kt

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}

override fun onCreateOptionsMenu(menu: Menu?): Boolean {

var inflater = menuInflater
inflater.inflate(R.menu.main_menu,menu)
return true
}
Hasil

Sebelum Sesudah
Menagani Aksi klik Options Menu
• Ketika pengguna melakukan pemilihan menu dengan
cara mengklik menu dari options menu, activity anda
akan menjalankan sebuah metode
onOptionsItemSelected().
• Metode ini akan mengambil semua opsi menu dan
menyimpan nilai id yang menerima aksi klik.
• Identifikasi menu yang diklik dapat diketahui melalui
variable itemID dari objek Item pada parameter
onOptionsItemSelected(), yang mengembalikan ID unik
dari opsi menu yang terklik (didefinisikan di atribute
android:id).
• Anda dapat menggunakan id ini untuk menetukan aksi
balasan dari sistem. Contoh:
Menagani Aksi klik Options Menu
override fun onOptionsItemSelected(item: MenuItem?): Boolean {
when(item?.itemId){
R.id.create_new_file -> Toast
.makeText(getApplicationContext(),
"New File",
Toast.LENGTH_SHORT).show()
R.id.create_new_folder -> Toast
.makeText(getApplicationContext(),
"New Folder",
Toast.LENGTH_SHORT).show()
R.id.help -> Toast
.makeText(getApplicationContext(),
"Help",
Toast.LENGTH_SHORT).show()
R.id.open -> Toast
.makeText(getApplicationContext(),
"Open",
Toast.LENGTH_SHORT).show()
}
return super.onOptionsItemSelected(item)
}
Hasil Pilih Menu

Hasil
Context menu
• Terdapat 2 cara untuk menampilkan contextual
Menu, yaitu:
• Floating Context Menu. Kumpulan menu yang
ditampilkan mengambang (seperti dialog) ketika
pengguna melakukan aksi Long press pada sebuah
objek view yang mendukung context menu.
• Contextual Action Mode. Menu yang
mengimplementasikan ActionMode sehingga menu
ditampilakn dalam konsep action bar di atas layar
ketika pengguna melakukan aksi Long press pada
sebuah objek view
Context menu

Contextual Action Mode

Floating Context Menu.
Floating Context Menu.
• langkah-langkah untuk membuat Floating Context Menu
untuk beberapa objek view, antar lain:
1. Buat file sumber daya menu XML
2. Daftarkan tampilan ke menu konteks dengan
menggunakan metode registerForContextMenu() pada
kelas Activity.
3. Implementasikan metode onCreateContextMenu() dalam
aktivitas Anda untuk membangun menu.
4. Implementasikan metode onContextItemSelected()
dalam aktivitas menangani klik item menu.
 Floating Context Menu.
• Contoh : Contoh : Buat file sumber daya menu XML
untuk item menu floating_menu.xml dengan isi

<menu
xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/select_all"
android:title="Select All"/>
<item
android:id="@+id/delete"
android:title="Delete"/>
<item
android:id="@+id/share"
android:title="Share"/>
</menu>
Floating Context Menu.
• Anda dapat menempelkan menu dalam Floating
Context Menu pada sebuah/beberapa objek view.
• Sebagai contoh, Floating Context Menu ini akan
ditempelkan pada objek view EditText dan muncul
ketika aksi long press dilakukan.
 Floating Context Menu.
Contoh : Buat file layout untuk aktivitas utama anda dengan sebuah edit
text dengan isi:

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:id="@+id/edit_text1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="top"
android:hint="Isi Pesan"/>
</LinearLayout>
Floating Context Menu.
• Gunakan registerForContextMenu() untuk
mendaftarkan menu pada objek view.

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

registerForContextMenu(edit_text1);
}
Floating Context Menu.
• Bila objek view telah didaftarkan dan menerima
aksi long press, maka sistem akan memanggil
metode onCreateContextMenu() yang digunakan
untuk mendefinisikan item menu menggunakan
sumber daya menu.
override fun onCreateContextMenu(menu: ContextMenu?,
v: View?,
menuInfo: ContextMenu.ContextMenuInfo?)
{
super.onCreateContextMenu(menu, v, menuInfo)
val inflaterMenu = menuInflater
inflaterMenu.inflate(R.menu.floating_menu,menu)
}
Floating Context Menu.
1. Argument menu : ContextMenu untuk
onCreateContextMenu() adalah menu konteks
yang akan dibangun.
2. Argumen v:View adalah tampilan yang
didaftarkan untuk menu konteks.
3. Argument menuInfo :
ContextMenu.ContextMenuInfo adalah informasi
ekstra tentang tampilan yang didaftarkan dari
menu konteks seperti informasi tentang item
yang dipilih, dan meneruskannya sebagai
menuInfo , seperti ID baris, posisi, dll.
Floating Context Menu.
• Bila pengguna mengeklik sebuah item menu,
sistem akan memanggil metode
onContextItemSelected().
• Anda dapar melakukan override pada metode ini
untuk menetukan reaksi yang diberikan sistem
Floating Context Menu.
override fun onContextItemSelected(item: MenuItem?): Boolean {
when(item?.itemId){
R.id.select_all -> edit_text1.selectAll()
R.id.delete -> edit_text1.setText("")
R.id.share -> {
if(edit_text1.text.toString().length==0)
Toast.makeText(this,
"No Text To Share",
Toast.LENGTH_SHORT)
.show()
else{
ShareCompat.IntentBuilder
.from(this)
.setText("text/plain")
.setChooserTitle("Share with...")
.setText(edit_text1.text.toString())
.startChooser()
}
}
}
return true
}
 Berikan event Long press
Hasil
Contextual Action Mode
• ActionMode menyatakan mode antarmuka
pengguna (UI) yang menyediakan interaksi
alternatif, menggantikan tampilan UI normal.
• Memilih bagian teks atau mengeklik lama suatu
tampilan akan memicu ActionMode.
• Saat mode ini diaktifkan, pengguna bisa memilih
beberapa item pada bagian atas layar(jika aplikasi
Anda memungkinkannya), dan melanjutkan
navigasi dalam aktivitas.
• ActionMode dinonaktifkan saat pengguna
menghapus pilihan, menekan tombol Return, atau
mengetuk Done.
 Contextual Action Mode
• Contoh : Contoh : Buat file sumber daya menu XML
untuk item menu context_am_menu.xml dengan
isi
<menu
xmlns:android="http://schemas.android.com/apk/res/and
roid">
<item
android:id="@+id/context_share"
android:orderInCategory="10"
android:icon="@drawable/ic_action_share"
android:title="Share" />
<item
android:id="@+id/context_select"
android:orderInCategory="10"
android:icon="@drawable/ic_action_select_all"
android:title="Select All" />
</menu>
 Contextual Action Mode
• Buat Objek dari kelas ActionMode dan
ActionMode.Callback.
• ActionMode digunakan untuk membuat objek dalam
Contextual Action Mode
• Buat objek ActionModeCallback yang digunakan
untuk mengatur siklus hidup dari ActionMode
• ActionModeCallback mengharuskan anda untuk
melakukan override 4 metode
private var actionMode : ActionMode? = null
private val actionModeCallback = object : ActionMode.Callback {
}
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//registerForContextMenu(edit_text1);
}
Contextual Action Mode
1. onCreateActionMode() untuk membentuk dan
membangun menu dalam ActionMode
2. onPrepareActionMode() metode yang dijalankan
ketika menu ActionMode ditampilkan
3. onActionItemClicked() metode yang dijalankan
ketka menu ActionMode diklik
4. onDestroyActionMode() metode yang dijalankan
ketika ActionMode ditutup
 Contextual Action Mode
Isikan keempat metode tersebut dengan:
private var actionMode : ActionMode? = null
private val actionModeCallback = object : ActionMode.Callback {

override fun onCreateActionMode(p0: ActionMode?, p1: Menu?)

: Boolean {
val inflaterMCmenu = p0?.menuInflater
inflaterMCmenu?.inflate(R.menu.context_am_menu,p1)
return true
}
override fun onPrepareActionMode(p0: ActionMode?,
p1: Menu?): Boolean {
return false // ketika tidak lakukan apapun
}
override fun onActionItemClicked(p0: ActionMode?,
p1: MenuItem?): Boolean {
return when (p1?.itemId) {
R.id.select_all -> {
edit_text2.selectAll()
p0?.finish()
true
}
R.id.share ->{
ShareCompat.IntentBuilder
.from(this@MainActivity)
.setText("text/plain")
.setChooserTitle("Share with...")
.setText(edit_text2.text.toString())
.startChooser()
p0?.finish()
true
}
else -> false
}
}
 override fun onDestroyActionMode(p0: ActionMode) {
actionMode = null
}
}
 Contextual Action Mode
Contoh : Buat file layout untuk aktivitas utama anda dengan sebuah edit
text dengan isi:

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<EditText
android:id="@+id/edit_text2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="top"
android:hint="Isi Pesan"/>
</LinearLayout>
 Contextual Action Mode
• Anda dapat menempelkan menu dalam ActionMode pada
sebuah objek view.
• Sebagai contoh, ActionMode ini akan ditempelkan pada
objek view EditText dan muncul ketika aksi long press
dilakukan.
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

edit_text2.setOnLongClickListener { view ->

when (actionMode) {
null -> {
actionMode = this.startActionMode(actionModeCallback)
view.isSelected = true
true
}
else -> false
}
}
//registerForContextMenu(edit_text1);
Hasil Berikan event Long press

Contextual Action Mode

Popup menu
• Popup Menu adalah daftar menu yang ditampilkan
secara vertikal yang diberikan pada sebuah objek
view.
• Jika Objek View diklik, maka menu pilihan akan
ditampilkan dan menu didalamya
• Misalnya, aplikasi Gmail menggunakan popup
menu yang diberikan pada ikon saat anda akan
membalas email.
• Menu yang diberikan adalah Reply, Reply All, dan
Forward terkait dengan membalas email
Popup menu
• Contoh : Buat file sumber daya menu XML untuk item menu
popup_menu.xml dengan isi :

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

<menu
xmlns:android="http://schemas.android.com/apk/res/androi
d">
<item android:id="@+id/Play"
android:title="Play"/>
<item android:id="@+id/Stop"
android:title="Stop"/>
<item android:id="@+id/Pause"
android:title="Pause"/>
</menu>
Popup menu
• Isi layout aktivitas utama anda dengan ikon yang
memicu popup menu.

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button_popup"
android:src="@drawable/ic_action_popup"
android:layout_gravity="right"
android:onClick="showPopUpMenu"
/>
</LinearLayout>
 Popup menu
• Pada metode showPopUpMenu() ImageButton,
gunakan class Popup untuk mebuat menu popup
dan popup.menuInflater untuk membangun menu
popup pada Imagebutton menggunakan metode
inflate.
• Fungsi show() digunakan untuk menampilkan menu
pop up.

fun showPopUpMenu(view: View){

val popup = PopupMenu(this,button_popup)
popup.menuInflater.inflate(R.menu.popup_menu,popup.menu)
popup.show()
}
Menagani Aksi klik Popup Menu
• Untuk menagani aksi klik pada popup menu, anda
dapat menambahakan sebuah Lisener kepada kelas
popup setOnMenuItemClickListener
• setOnMenuItemClickListener akan memberikan anda
sebuah variable it
• It merupakan sebuah keyword yang mewakili sebuah
parameter ketika sebuah fungsi lambda hanya memiliki
satu parameter
• Anda dapat menggunakan ID dari tiap menu untuk
menentukan aksi apa yang akan diberikan yang
tersimpan dalam variable it
fun showPopUpMenu(view: View){
val popup = PopupMenu(this,button_popup)
popup.menuInflater.inflate(R.menu.popup_menu,popup.menu)
popup.setOnMenuItemClickListener {
return@setOnMenuItemClickListener when(it.itemId){
R.id.Play -> {
Toast.makeText(this,"Play",
Toast.LENGTH_SHORT).show()
true
}
R.id.Stop -> true
R.id.Pause -> true
else -> false
}
}
popup.show()
}
 Hasil

Berikan event Klik

Latihan II
• Kerjakan kembali mengenai GestureDetection, dan pahami, kapan
metode-metode ini dijalankan (buat dalam sebuah aplikasi sederhana),
dan apa nilai dari setiap parameter p0,p1,p2,p3 pada setiap metode ini
• override fun onShowPress(p0: MotionEvent?)
• override fun onSingleTapUp(p0: MotionEvent?): Boolean
• override fun onDown(p0: MotionEvent?): Boolean
• override fun onFling(p0: MotionEvent?, p1: MotionEvent?, p2: Float, p3:
Float): Boolean
• override fun onScroll(p0: MotionEvent?, p1: MotionEvent?, p2: Float,
p3: Float): Boolean
• override fun onLongPress(p0: MotionEvent?)
• override fun onDoubleTap(p0: MotionEvent?): Boolean
• override fun onDoubleTapEvent(p0: MotionEvent?): Boolean
• override fun onSingleTapConfirmed(p0: MotionEvent?): Boolean