🎨 UI – Views और Layouts · Lesson 18
Toolbar, Options Menu और Popup Menu
MaterialToolbar
Top bar screen title, navigation icon और action items दिखाता है। NoActionBar theme use करें और अपना MaterialToolbar जोड़ें — look आपके control में रहता है और इसे CoordinatorLayout में रख सकते हैं।
XML + Kotlin
<!-- res/values/themes.xml: parent="Theme.Material3.DayNight.NoActionBar" -->
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="My Notes" />
</com.google.android.material.appbar.AppBarLayout>
// Kotlin – in onCreate after setContentView
setSupportActionBar(binding.toolbar)Menu resource बनाइए
res पर right-click → New → Android Resource File → type Menu → नाम menu_main।
XML – res/menu/menu_main.xml
<!-- res/menu/menu_main.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_search"
android:icon="@drawable/ic_search"
android:title="Search"
app:actionViewClass="androidx.appcompat.widget.SearchView"
app:showAsAction="ifRoom|collapseActionView" />
<item
android:id="@+id/action_sort"
android:icon="@drawable/ic_sort"
android:title="Sort"
app:showAsAction="ifRoom" />
<item
android:id="@+id/action_settings"
android:title="Settings"
app:showAsAction="never" />
<item
android:id="@+id/action_about"
android:title="About"
app:showAsAction="never" />
</menu>Menu दिखाना और handle करना
Kotlin – MainActivity
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// … binding + setSupportActionBar(binding.toolbar)
addMenuProvider(object : MenuProvider {
override fun onCreateMenu(menu: Menu, menuInflater: MenuInflater) {
menuInflater.inflate(R.menu.menu_main, menu)
}
override fun onMenuItemSelected(menuItem: MenuItem): Boolean = when (menuItem.itemId) {
R.id.action_sort -> { showSortDialog(); true }
R.id.action_settings -> { startActivity(Intent(this@MainActivity, SettingsActivity::class.java)); true }
R.id.action_about -> { Toast.makeText(this@MainActivity, "Version 1.0", Toast.LENGTH_SHORT).show(); true }
else -> false
}
})
}
}Toolbar में SearchView
Kotlin
// inside onCreateMenu, after inflating
val searchView = menu.findItem(R.id.action_search).actionView as SearchView
searchView.queryHint = "Search notes…"
searchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener {
override fun onQueryTextSubmit(query: String?): Boolean {
searchView.clearFocus() // hide keyboard
return true
}
override fun onQueryTextChange(newText: String?): Boolean {
adapter.submitList(allNotes.filter { it.title.contains(newText.orEmpty(), ignoreCase = true) })
return true
}
})Up (back) button और title
Kotlin – DetailActivity
// Second activity: show ← and a title
class DetailActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityDetailBinding.inflate(layoutInflater)
setContentView(binding.root)
setSupportActionBar(binding.toolbar)
supportActionBar?.setDisplayHomeAsUpEnabled(true)
supportActionBar?.title = "Note details"
supportActionBar?.subtitle = "Physics"
}
override fun onSupportNavigateUp(): Boolean {
finish() // close this screen
return true
}
}Navigation Component के साथ setupActionBarWithNavController यह अपने आप करता है (Navigation Component lesson देखें)।
Popup menu
XML + Kotlin
<!-- res/menu/menu_note_item.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/action_edit" android:title="Edit" />
<item android:id="@+id/action_share" android:title="Share" />
<item android:id="@+id/action_delete" android:title="Delete" />
</menu>
// Kotlin – show it under the ⋮ button of a list row
binding.btnMore.setOnClickListener { anchor ->
PopupMenu(anchor.context, anchor).apply {
menuInflater.inflate(R.menu.menu_note_item, menu)
setOnMenuItemClickListener { item ->
when (item.itemId) {
R.id.action_edit -> openEditor(note)
R.id.action_share -> share(note)
R.id.action_delete -> confirmDelete(note)
}
true
}
show()
}
}Fragment-specific menus
Kotlin – Fragment
// From Student Diary – NotesFragment (menu only while this screen is visible)
requireActivity().addMenuProvider(object : MenuProvider {
override fun onCreateMenu(menu: Menu, menuInflater: MenuInflater) {
menuInflater.inflate(R.menu.menu_notes, menu)
}
override fun onMenuItemSelected(menuItem: MenuItem) = false
}, viewLifecycleOwner, Lifecycle.State.RESUMED)आम गलतियाँ
setSupportActionBarcall न करना → menu कभी नहीं दिखता।- Handle किए item के लिए
falseलौटाना → click आगे जाता है और दो बार चल सकता है। - Fragment में
viewLifecycleOwnerके बिना MenuProvider जोड़ना → हर बार लौटने पर menu items जमा होते जाते हैं। - Menu में
android.widget.SearchViewऔर importandroidx.appcompat.widget.SearchView→ ClassCastException।
सारांश
- NoActionBar theme + MaterialToolbar +
setSupportActionBar। - Menus XML resources हैं; clicks
addMenuProviderसे handle करें। actionViewClassसे SearchView; हर item के actions के लिए PopupMenu;setDisplayHomeAsUpEnabledसे Up button।
✅ Practice
List screen में Search, Sort और overflow "About" item वाला toolbar जोड़िए। Search list को live filter करे; Sort single-choice dialog खोले।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
onCreateOptionsMenu की जगह MenuProvider क्यों?
Fragments में onCreateOptionsMenu deprecated है। MenuProvider lifecycle-aware है: viewLifecycleOwner के साथ जोड़ने पर screen जाते ही menu items अपने आप हट जाते हैं।
showAsAction का क्या मतलब है?
ifRoom जगह होने पर item को toolbar में icon की तरह दिखाता है; never उसे ⋮ overflow menu में रखता है; always उसे हमेशा दिखाता है।
मेरा toolbar menu क्यों नहीं दिख रहा?
शायद आपकी theme में अपना action bar है और आपने setSupportActionBar(binding.toolbar) call नहीं किया, या theme NoActionBar वाली नहीं है।
