Mobile Programming (Teori & Praktek) 2021

LESSON 4
Dialog dan Menu

Tujuan:
1. Mahasiswa dapat memahami konsep dialog dan menu pada kotlin.
2. Mahasiswa dapat memahami penerapan dialog dan menu untuk pembuatan
aplikasi mobile.

Tugas Pendahuluan:
1. Apa yang anda ketahui tentang dialog dan menu ?
2. Ada berapa jenis dialog pada Android ?

DASAR TEORI
4.1. Dialog
Dialog adalah komponen android yang berguna untuk memberikan informasi
kepada pengguna serta dapat digunakan untuk memberikan pilihan kepada
pengguna untuk melakukan suatu perintah di android.
Dialog dalam android dibagi menjadi empat jenis, yaitu:
• Alert Dialog
Dialog yang digunakan untuk peringatan atau informasi untuk pengguna.

Gambar 1. Alert Dialog

1 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE

 Mobile Programming (Teori & Praktek) 2021

• Confirmation Dialog
Dialog yang mengharuskan pengguna untuk secara eksplisit
mengkonfirmasi pilihan mereka sebelum opsi dilakukan.
o Multi Choice Dialog
Dialog yang digunakan pengguna untuk memilih lebih dari satu item
dalam sebuah dialog

Gambar 2. Multi Choice Dialog

o Single Choice Dialog

Dialog yang digunakan pengguna untuk memilih salah satu item
dalam sebuah dialog

Gambar 3. Single Choice Dialog

2 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE

 Mobile Programming (Teori & Praktek) 2021

o Date Picker Dialog

Dialog yang digunakan pengguna untuk memilih tanggal dalam
sebuah dialog

Gambar 4. Date Picker Dialog

o Time Picker Dialog

Dialog yang digunakan pengguna untuk memilih jam dalam sebuah
dialog

Gambar 5. Time Picker Dialog

3 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE

 Mobile Programming (Teori & Praktek) 2021

• Bottom Sheet Dialog

Dialog yang dapat menampilkan banyak informasi dan posisinya berada
dibawah.
• Fullscreen Dialog
Dialog yang menampilkan secara layar penuh.

4.2. Menu
Option menu Android adalah kumpulan item menu untuk suatu aktivitas.
Option menu memungkinkan penempatan tindakan yang berdampak secara global
pada aplikasi. Option menu biasanya sering ditampilkan pada bagian sisi kanan atas
dengan icon tiga titik. Ketika icon tersebut di klik maka akan muncul beberapa
menu.

Gambar 6. Menu

KEGIATAN PRAKTIKUM
Praktek 4.1
• Buatlah project dengan nama “Lesson4_dialog_nim_kelas”
• Pada activity_main.xml , buatlah layout / ketikkan kode berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"

4 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE

 Mobile Programming (Teori & Praktek) 2021

xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">

<Button
android:id="@+id/btnAlert"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="klikAlert"
android:text="Klik" />

</LinearLayout>

• Pada MainActivity.kt , ketikkan kode berikut:

package com.example.oksip

import android.app.AlertDialog
import android.content.DialogInterface
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Toast

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}

public fun klikAlert(view: View){

AlertDialog.Builder(this)
.setTitle("Konfirmasi")
.setMessage("Apakah anda sehat ?")
.setPositiveButton("Ya",
DialogInterface.OnClickListener { dialog, i ->
Toast.makeText(this, "Sehat selalu kakak ! :D",
Toast.LENGTH_LONG).show()
})
.setNegativeButton("Tidak",
DialogInterface.OnClickListener { dialog, i ->
Toast.makeText(this, "Semoga lekas sembuh kakak
! ;(", Toast.LENGTH_LONG).show()
})
.show()
}
}

• Tekan Shift+F10 untuk menjalankan, jika tidak ada masalah berikut hasilnya:

5 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE

 Mobile Programming (Teori & Praktek) 2021

Praktek 3.2
• Masih di project “Lesson4_dialog_nim_kelas”
• Tambahkan Empty Activity dengan nama activity “pilihanganda” dan layout
“activity_pilihanganda.xml”
• Pada activity_ pilihanganda.xml , buatlah layout / ketikkan kode berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context=".pilihanganda">

<Button
android:id="@+id/btnGanda"
android:layout_width="wrap_content"
android:layout_height="wrap_content"

6 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE

 Mobile Programming (Teori & Praktek) 2021

android:onClick="klikGanda"
android:text="Klik" />

</LinearLayout>

• Pada pilihanganda.kt , ketikkan kode berikut:

package com.example.oksip

import android.app.AlertDialog
import android.content.DialogInterface
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.view.View
import android.widget.Toast
import java.util.*

class pilihanganda : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_pilihanganda)
}

public fun klikGanda(view: View){

val daftarPilihanGanda = arrayOf("Bakso", "Nasi Goreng", "Sate
Ayam", "Sop Daging")
val statuspilihan = booleanArrayOf(false, true, false, false)
val yangDipilih = Arrays.asList(*daftarPilihanGanda)

AlertDialog.Builder(this)
.setTitle("Mau pesan apa ?")
.setMultiChoiceItems(
daftarPilihanGanda, statuspilihan
){dialog, i, isChecked ->
Log.d("MainActivity", "cek pilihan " + i);
}
.setPositiveButton("OK", DialogInterface.OnClickListener
{dialog, i ->
// Do something when click positive button
for (i in statuspilihan.indices) {
val checked = statuspilihan[i]
if (checked) {
Toast.makeText(this, "anda memesan " +
yangDipilih[i], Toast.LENGTH_SHORT).show()
}
}
})
.setNegativeButton("Batal", null)
.show()
}
}

7 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE

 Mobile Programming (Teori & Praktek) 2021

• Tekan Shift+F10 untuk menjalankan, jika tidak ada masalah berikut hasilnya:

Praktek 3.3
• Masih di project “Lesson4_dialog_nim_kelas”
• Tambahkan Empty Activity dengan nama activity “pilihantunggal” dan
layout “activity_ pilihantunggal.xml”
• Pada activity_ pilihantunggal.xml , buatlah layout / ketikkan kode berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context=".pilihantunggal">

<Button
android:id="@+id/btnTunggal"

8 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE

 Mobile Programming (Teori & Praktek) 2021

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="klikTunggal"
android:text="Klik" />

</LinearLayout>

• Pada pilihanganda.kt , ketikkan kode berikut:

package com.example.oksip

import android.app.AlertDialog
import android.content.DialogInterface
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.util.Log
import android.view.View
import android.widget.Toast
import java.util.*

class pilihantunggal : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_pilihantunggal)
}

public fun klikTunggal(view: View){

val daftarPilihanTunggal = arrayOf("Bakso", "Nasi Goreng", "Sate
Ayam", "Sop Daging")
val statuspilihan = 2

AlertDialog.Builder(this)
.setTitle("Mau pesan apa ?")
.setSingleChoiceItems(
daftarPilihanTunggal, statuspilihan
) { dialog, i ->
}

.setPositiveButton("OK", DialogInterface.OnClickListener {
dialog, i ->
val posisi = (dialog as
AlertDialog).listView.checkedItemPosition
// if selected, then get item text
if (posisi !=-1){
val yangDipilih = daftarPilihanTunggal[posisi]
Toast.makeText(this, "anda memesan " + yangDipilih,
Toast.LENGTH_SHORT).show()
}
})
.setNegativeButton("Batal", null)
.show()
}
}

9 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE

 Mobile Programming (Teori & Praktek) 2021

• Tekan Shift+F10 untuk menjalankan, jika tidak ada masalah berikut hasilnya:

Praktek 3.4
• Masih di project “Lesson4_dialog_nim_kelas”
• Tambahkan Empty Activity dengan nama activity “pilihantanggal” dan layout
“activity_ pilihantanggal.xml”
• Pada activity_ pilihantanggal.xml , buatlah layout / ketikkan kode berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context=".pilihantanggal">

<Button
android:id="@+id/btnTanggal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="klikTanggal"

10 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE

 Mobile Programming (Teori & Praktek) 2021

android:text="Klik" />

</LinearLayout>

• Pada pilihantanggal.kt , ketikkan kode berikut:

package com.example.oksip

import android.app.DatePickerDialog
import android.os.Bundle
import android.util.Log
import android.view.View
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import java.text.DateFormat
import java.util.*

class pilihantanggal : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_pilihantanggal)
}

public fun klikTanggal(view: View){

val mCalendar = Calendar.getInstance()

val datePickerDialog = DatePickerDialog(

this,
{ view, year, monthOfYear, dayOfMonth ->
mCalendar.set(Calendar.YEAR, year)
mCalendar.set(Calendar.MONTH, monthOfYear)
mCalendar.set(Calendar.DAY_OF_MONTH, dayOfMonth)
val date: String =

DateFormat.getDateInstance(DateFormat.MEDIUM).format(mCalendar.getTime()
)
Toast.makeText(this, "tanggal yang dipilih " + date,
Toast.LENGTH_LONG).show()
},
mCalendar.get(Calendar.YEAR),
mCalendar.get(Calendar.MONTH),
mCalendar.get(Calendar.DAY_OF_MONTH)
)
datePickerDialog.show()
}
}

• Tekan Shift+F10 untuk menjalankan, jika tidak ada masalah berikut hasilnya:

11 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE

 Mobile Programming (Teori & Praktek) 2021

Praktek 3.5
• Masih di project “Lesson4_dialog_nim_kelas”
• Tambahkan Empty Activity dengan nama activity “pilihanjam” dan layout
“activity_ pilihanjam.xml”
• Pada activity_ pilihanjam.xml , buatlah layout / ketikkan kode berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
tools:context=".pilihanjam">

<Button
android:id="@+id/btnJam"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="klikJam"
android:text="Klik" />

12 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE

 Mobile Programming (Teori & Praktek) 2021

</LinearLayout>

• Pada pilihanjam.kt , ketikkan kode berikut:

package com.example.oksip

import android.app.TimePickerDialog
import android.os.Bundle
import android.view.View
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import java.text.DateFormat
import java.util.*

class pilihanjam : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_pilihanjam)
}

public fun klikJam(view: View){

val mCalendar = Calendar.getInstance()

val timePickerDialog = TimePickerDialog(

this,
{ timePicker, hourOfDay, minute ->
mCalendar.set(Calendar.HOUR_OF_DAY, hourOfDay)
mCalendar.set(Calendar.MINUTE, minute)
val time =
DateFormat.getTimeInstance(DateFormat.SHORT).format(mCalendar.getTime())
Toast.makeText(this, "jam yang dipilih " + time,
Toast.LENGTH_LONG).show()
}, mCalendar.get(Calendar.HOUR_OF_DAY),
mCalendar.get(Calendar.MINUTE), true
)
timePickerDialog.show()
}
}

• Tekan Shift+F10 untuk menjalankan, jika tidak ada masalah berikut hasilnya:

13 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE

 Mobile Programming (Teori & Praktek) 2021

Praktek 3.5
• Buatlah project dengan nama “Lesson4_menu_nim_kelas”
• Pada activity_ main.xml , buatlah layout / ketikkan kode berikut:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />

14 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE

 Mobile Programming (Teori & Praktek) 2021

</androidx.constraintlayout.widget.ConstraintLayout>

• Pada MainActivity.kt , ketikkan kode berikut:

package com.example.okcin

import android.content.Intent
import android.os.Bundle
import android.view.Menu
import android.view.MenuItem
import androidx.appcompat.app.AppCompatActivity

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}

override fun onCreateOptionsMenu(menu: Menu): Boolean {

// Inflate the menu; this adds items to the action bar if it is
present.
menuInflater.inflate(R.menu.optionmenu, menu)
return true
}

override fun onOptionsItemSelected(item: MenuItem) : Boolean {

if (item.itemId ==R.id.about){
startActivity(Intent(this, AboutActivity::class.java))
}else if (item.itemId ==R.id.setting){
startActivity(Intent(this, SettingActivity::class.java))
}else if (item.itemId ==R.id.help){
startActivity(Intent(this, HelpActivity::class.java))
}
return true
}
}

• Tambahkan Empty Activity dengan nama activity “AboutActivity” dan layout

“activity_ about.xml”
• Pada activity_ about.xml , buatlah layout / ketikkan kode berikut:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".AboutActivity">

15 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE

 Mobile Programming (Teori & Praktek) 2021

</androidx.constraintlayout.widget.ConstraintLayout>

• Pada AboutActivity.kt , ketikkan kode berikut:

package com.example.okcin

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class AboutActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_about)
}
}

• Tambahkan Empty Activity dengan nama activity “SettingActivity” dan

layout “activity_ setting.xml”
• Pada activity_ setting.xml , buatlah layout / ketikkan kode berikut:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".SettingActivity">

</androidx.constraintlayout.widget.ConstraintLayout>

• Pada SettingActivity.kt , ketikkan kode berikut:

package com.example.okcin

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class SettingActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_setting)
}
}

16 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE

 Mobile Programming (Teori & Praktek) 2021

• Tambahkan Empty Activity dengan nama activity “HelpActivity” dan layout

“activity_ help.xml”
• Pada activity_ help.xml , buatlah layout / ketikkan kode berikut:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".HelpActivity">

</androidx.constraintlayout.widget.ConstraintLayout>

• Pada HelpActivity.kt , ketikkan kode berikut:

package com.example.okcin

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class HelpActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_help)
}
}

• Tambahkan sebuah direktori “menu” dibawah “layout”

• Di dalam menu, tambahkan Menu Resource File dengan nama

optionmenu.xml
• Pada optionmenu.xml , buatlah layout / ketikkan kode berikut:

17 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE

 Mobile Programming (Teori & Praktek) 2021

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

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/about"
android:title="About"
app:showAsAction="never"/>

<item
android:id="@+id/setting"
android:title="Setting"
app:showAsAction="never" />

<item
android:id="@+id/help"
android:title="Help"
app:showAsAction="never"/>

</menu>

• Tekan Shift+F10 untuk menjalankan, jika tidak ada masalah berikut hasilnya:

18 Wiwit Agus Triyanto, S.Kom., M.Kom., MTA., MCE