Sub CPMK :
- Mahasiswa dapat menambahkan Option Menu pada ActionBar
- Mahasiswa dapat memberikan aksi pada Option Menu yang dipilih
- Mahasiswa dapat menambahkan SeachView pada ActionBar
Alat dan Bahan :
- Laptop atau PC dengan Spesifikasi Prosesor minimal Corei5 dan RAM 8 GB
- Android Studio
- Android Device
Langkah Praktikum
- Buat project baru di android studio, dengan kriteria sebagai berikut :
| Nama Project | BelajarActionBar |
| Target & Minimal SDK | Phone and Tablet, API Level 21 |
| Tipe Activity | Empty Activity |
| Language | Kotlin |
- Tambahkanlah FrameLayout pada main_activity.xml, sehingga menjadi seperti berikut:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<FrameLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:id="@+id/fragment_container" />
</RelativeLayout>- Setelah itu buatlah berkas xml baru pada directory menu dengan nama berkas option_menu.xml.
Cara membuat menu baru yaitu klik kanan pada res → new → Android resource file. Ganti nama berkas dan directory seperti gambar berikut:
Sehingga akan muncul file baru pada folder menu seperti ini:
Kondisikan option_menu.xml menjadi seperti berikut :
<?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">
<group android:menuCategory="container">
<item android:id="@+id/menu1"
android:title="@string/menu_1"
android:icon = "@drawable/ic_announcement_white_24"
app:showAsAction="always" />
<item android:id="@+id/menu2"
android:title="@string/menu_2" />
</group>
</menu>Kita bisa mengunduh icon di tautan https://material.io/tools/icons/?icon=announcement&style=baseline atau dengan cara klik kanan pada folder drawable → New → Vector Asset → Pada Clipart cari “announcement” → Ganti Color jadi putih → Next → Finish.
- Ada bagian yang merah pada @string/menu_1 dan @string/menu_2. Untuk memperbaikinya, kita hanya perlu menambahkan resource string. Tambahkan kumpulan resource string di dalam strings.xml.
<resources>
<string name="app_name">Belajar Action Bar</string>
<string name="hello_blank_fragment">Hello blank fragment</string>
<string name="this_activity">Ini adalah menu activity</string>
<string name="this_fragment">Ini adalah menu fragment</string>
<string name="search">Search</string>
<string name="menu_1">Menu 1</string>
<string name="menu_2">Menu 2</string>
</resources>- Kemudian buatlah 1 Activity baru dan 1 Fragment baru dengan nama MenuActivity dan MenuFragment. Kemudian tambahkan textview di MenuActivity.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_menu"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MenuActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/this_activity" />
</RelativeLayout>- Begitu juga dengan layout dari MenuFragment. Tambahkan sebuah textview sehingga isinya menjadi seperti berikut:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MenuFragment">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/this_fragment" />
</RelativeLayout>- Sebelum masuk ke kode kotlin, kita tambahkan dulu library View Binding. Caranya buka build.gradle di level module, kemudian tambahkan kode berikut.
android {
...
buildFeatures {
viewBinding true
}
}Setelah itu lakukan sinkronisasi project. Maka secara otomatis akan terbentuk kelas yang menampung semua id yang di dalam layout XML.
- Setelah itu tambahkan beberapa baris kode pada metode onCreateOptionsMenu() dan onOptionsItemSelected() pada MainActivity, sehingga menjadi seperti berikut:
class MainActivity : AppCompatActivity() {
private lateinit var binding: ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
}
override fun onCreateOptionsMenu(menu: Menu): Boolean {
val inflater = menuInflater
inflater.inflate(R.menu.option_menu, menu)
return true
}
override fun onOptionsItemSelected(item: MenuItem): Boolean {
when (item.itemId) {
R.id.menu1 -> {
supportFragmentManager.beginTransaction()
.replace(R.id.fragment_container, MenuFragment())
.addToBackStack(null)
.commit()
return true
}
R.id.menu2 -> {
val i = Intent(this, MenuActivity::class.java)
startActivity(i)
return true
}
else -> return true
}
}
}- Setelah selesai silakan jalankan aplikasi. Tampilannya kurang lebih akan menjadi seperti gambar di bawah ini :
SearchView Pada ActionBar
- Sebelum menambahkan SearchView pada ActionBar, terlebih dahulu kita tambahkan icon search. Caranya klik klik kanan pada folder drawable→ new → Vector Asset. Kemudian klik pada Clip Art dan cari icon dengan keyword “search“.
- Kemudian ganti nama menjadi ic_baseline_search_white_24 dan warna menjadi putih (FFFFFF) seperti ini:
- Nah, langkah selanjutnya tambahkan SearchView pada action bar. Untuk menggunakan widget searchview, tambahkan kode ini pada menu option_menu.xml.
<?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/search"
android:icon="@drawable/ic_search_white_24"
android:title="@string/search"
app:actionViewClass="androidx.appcompat.widget.SearchView"
app:showAsAction="collapseActionView|ifRoom" />
<group android:menuCategory="container">
<item android:id="@+id/menu1"
android:title="@string/menu_1"
android:icon = "@drawable/ic_announcement_white_24"
app:showAsAction="always" />
<item android:id="@+id/menu2"
android:title="@string/menu_2" />
</group>
</menu>- Kemudian kita pasang listener searchview pada MainActivity. Caranya dengan menambahkan beberapa baris pada metode onCreateOptionsMenu(). Pastikan juga bahwa SearchView yang dipilih di-import dari androidx.appcompat.widget.SearchView.
val searchManager = getSystemService(Context.SEARCH_SERVICE) as SearchManager
val searchView = menu.findItem(R.id.search).actionView as SearchView
searchView.setSearchableInfo(searchManager.getSearchableInfo(componentName))
searchView.queryHint = resources.getString(R.string.search_hint)
searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
override fun onQueryTextSubmit(query: String): Boolean {
Toast.makeText(this@MainActivity, query, Toast.LENGTH_SHORT).show()
return true
}
override fun onQueryTextChange(newText: String): Boolean {
return false
}
})Sehingga metode onCreateOptionsMenu() menjadi seperti berikut:
override fun onCreateOptionsMenu(menu: Menu): Boolean {
val inflater = menuInflater
inflater.inflate(R.menu.option_menu, menu)
val searchManager = getSystemService(Context.SEARCH_SERVICE) as SearchManager
val searchView = menu.findItem(R.id.search).actionView as SearchView
searchView.setSearchableInfo(searchManager.getSearchableInfo(componentName))
searchView.queryHint = resources.getString(R.string.search_hint)
searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
/*
Gunakan method ini ketika search selesai atau OK
*/
override fun onQueryTextSubmit(query: String): Boolean {
Toast.makeText(this@MainActivity, query, Toast.LENGTH_SHORT).show()
return true
}
/*
Gunakan method ini untuk merespon tiap perubahan huruf pada searchView
*/
override fun onQueryTextChange(newText: String): Boolean {
return false
}
})
return true
}5. Yang terakhir adalah tambahkan string search_hint pada res → values → strings.xml seperti di bawah ini
<string name="search_hint">Masukkan kata</string>
6. Silahkan jalankan aplikasinya
