Android Studio - Tabbed Activity: aggiungere OptionMenu in ActionBar

In questo articolo vedremo come realizzare il menù nell'ActionBar/ToolBar in un layout a schede (Tabbed Activity).

Eseguire la procedura descritta in questo articolo per creare il file necessario per il menu.

Dopo aver creato il file menù occorre creare all'interno del file activity_main.xml l'oggetto toolbar in questo modo:

	<androidx.appcompat.widget.Toolbar
	android:id="@+id/toolbar"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:minHeight="?attr/actionBarSize"
	app:popupTheme="@style/MyToolbarStyle"/>

view raw toolbar1.xml hosted with ❤ by GitHub

Inoltre nel file style.xml occorre aggiungere questa riga di codice:

<style name="MyToolbarStyle" parent="ThemeOverlay.AppCompat.Light"></style>

view raw style_manu.xml hosted with ❤ by GitHub

questo serve per impostare lo sfondo chiaro e il testo scuro.

Ora bisogna inserire il codice per attivare il menù; anziché inserirlo nel file MainActivity.kt va inserito nei vari file Fragment.kt mentre nel file MainActivity.kt vanno inserite due righe di codice per identificare la ToolBar.
Ecco il codice da inserire nel file MainActivity.kt all'interno della funzione onCreate()
per prima cosa occorre dichiarare la variabile della toolbar in questo modo:

var toolbar: Toolbar? = null

view raw menu3.kt hosted with ❤ by GitHub

poi inserire queste due righe all'interno della funzione onCreate()

	toolbar = findViewById(R.id.toolbar)
	setSupportActionBar(toolbar)

view raw menu4.kt hosted with ❤ by GitHub

Ora all'interno del file Fragment1.kt, per esempio, inserire queste righe di codice per abilitare il menù

	//inserire questa riga di codice all'interno della funzione onCreate di Fragment1.kt
	setHasOptionsMenu(true)

view raw menu5.kt hosted with ❤ by GitHub

poi inserire questa funzione per creare il menù all'interno del Fragment1

	//funzione per creare e gestire le voci di menù
	override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
	super.onCreateOptionsMenu(menu, inflater)
	inflater.inflate(R.menu.menu_main, menu)
	}

view raw menu6.kt hosted with ❤ by GitHub

inserire infine la funzione per il controllo degli elementi del menù all'interno del Fragment1:

	override fun onOptionsItemSelected(item: MenuItem): Boolean {
	when (item.itemId) {
	R.id.action_el1 ->{
	//inserire qui il codice che deve essere eseguito toccando questo elemento di menu
	}
	R.id.action_el2 ->{
	//inserire qui il codice che deve essere eseguito toccando questo elemento di menu
	}
	R.id.action_el3 ->{
	//inserire qui il codice che deve essere eseguito toccando questo elemento di menu
	}
	R.id.action_el4 ->{
	//inserire qui il codice che deve essere eseguito toccando questo elemento di menu
	}
	else -> super.onOptionsItemSelected(item)
	}
	return true
	}

view raw menu2.kt hosted with ❤ by GitHub

Inserire queste righe di codice all'interno dei vari Fragment se si vuole abilitare il menù, se in un Fragment non si desidera abilitare il menù è sufficiente non inserire queste righe di codice al suo interno.

Ecco come si presenta il file activity_main.xml

	<?xml version="1.0" encoding="utf-8"?>
	<androidx.coordinatorlayout.widget.CoordinatorLayout
	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">
	<com.google.android.material.appbar.AppBarLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:theme="@style/AppTheme.AppBarOverlay">
	<androidx.appcompat.widget.Toolbar
	android:id="@+id/toolbar"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:minHeight="?attr/actionBarSize"
	app:popupTheme="@style/MyToolbarStyle"/>
	<com.google.android.material.tabs.TabLayout
	android:id="@+id/tabs"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:background="?attr/colorPrimary"
	app:tabMinWidth="150dp"
	app:tabMode="scrollable"/>
	</com.google.android.material.appbar.AppBarLayout>
	<androidx.viewpager.widget.ViewPager
	android:id="@+id/view_pager"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	app:layout_behavior="@string/appbar_scrolling_view_behavior" />
	</androidx.coordinatorlayout.widget.CoordinatorLayout>

view raw activity_main_menu2.kt hosted with ❤ by GitHub

Ecco come si presenta il file MainActivity.kt

	package com.dm.tutorialtabactivity4
	import android.os.Bundle
	import com.google.android.material.tabs.TabLayout
	import androidx.viewpager.widget.ViewPager
	import androidx.appcompat.app.AppCompatActivity
	import androidx.appcompat.widget.Toolbar //importazione della Classe: Toolbar
	import com.dm.tutorialtabactivity4.ui.main.SectionsPagerAdapter
	class MainActivity : AppCompatActivity() {
	var toolbar: Toolbar? = null
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	setContentView(R.layout.activity_main)
	val sectionsPagerAdapter = SectionsPagerAdapter(this, supportFragmentManager)
	val viewPager: ViewPager = findViewById(R.id.view_pager)
	viewPager.adapter = sectionsPagerAdapter
	val tabs: TabLayout = findViewById(R.id.tabs)
	tabs.setupWithViewPager(viewPager)
	toolbar = findViewById(R.id.toolbar)
	setSupportActionBar(toolbar)
	}
	}

view raw MainActivity_menu2.kt hosted with ❤ by GitHub

Ecco come si presenta il file manu_main.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/action_el1"
	android:orderInCategory="100"
	android:title="@string/menu_element1"
	app:showAsAction="never" />
	<item
	android:id="@+id/action_el2"
	android:orderInCategory="101"
	android:title="@string/menu_element2"
	app:showAsAction="never" />
	<item
	android:id="@+id/action_el3"
	android:orderInCategory="102"
	android:title="@string/menu_element3"
	app:showAsAction="never" />
	<item
	android:id="@+id/action_el4"
	android:orderInCategory="104"
	android:title="@string/menu_element4"
	app:showAsAction="never" />
	</menu>

view raw main_menu1.xml hosted with ❤ by GitHub

Ecco come si presenta il file Fragment1.kt

	package com.dm.tutorialtabactivity4
	import android.os.Bundle
	import android.view.*
	import android.widget.Toast
	import androidx.fragment.app.Fragment
	/**
	* A simple [Fragment] subclass.
	*/
	class Fragment1 : Fragment() {
	override fun onCreateView(
	inflater: LayoutInflater, container: ViewGroup?,
	savedInstanceState: Bundle?
	): View? {
	// Imposta il layout per questo frammento
	return inflater.inflate(R.layout.fragment1, container, false)
	}
	//funzione che viene eseguita quando il Fragment viene creato
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	//abilita il menù in questo Fragment
	setHasOptionsMenu(true)
	}
	//funzione per creare e gestire le voci di menù
	override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
	super.onCreateOptionsMenu(menu, inflater)
	inflater.inflate(R.menu.menu_main, menu)
	//con questa riga di codice è possibile nascondere una voce di menù
	//non necessaria in questo Fragment
	menu.findItem(R.id.action_el3).isVisible = false
	}
	//gestione dei click sugli elementi del menu
	override fun onOptionsItemSelected(item: MenuItem): Boolean {
	when (item.itemId) {
	R.id.action_el1 ->{
	//inserire qui il codice che deve essere eseguito toccando questo elemento di menu
	Toast.makeText(activity,"Elemento 1 di Fragment 1",Toast.LENGTH_SHORT).show()
	}
	R.id.action_el2 ->{
	//inserire qui il codice che deve essere eseguito toccando questo elemento di menu
	Toast.makeText(activity,"Elemento 2 di Fragment 1",Toast.LENGTH_SHORT).show()
	}
	R.id.action_el3 ->{
	//inserire qui il codice che deve essere eseguito toccando questo elemento di menu
	Toast.makeText(activity,"Elemento 3 di Fragment 1",Toast.LENGTH_SHORT).show()
	}
	R.id.action_el4 ->{
	//inserire qui il codice che deve essere eseguito toccando questo elemento di menu
	Toast.makeText(activity,"Elemento 4 di Fragment 1",Toast.LENGTH_SHORT).show()
	}
	else -> super.onOptionsItemSelected(item)
	}
	return true
	}
	}

view raw Fragment1_menu.kt hosted with ❤ by GitHub

Ecco come si presenta il file Fragment2.kt

	package com.dm.tutorialtabactivity4
	import android.os.Bundle
	import android.view.*
	import android.widget.Toast
	import androidx.fragment.app.Fragment
	/**
	* A simple [Fragment] subclass.
	*/
	class Fragment2 : Fragment() {
	override fun onCreateView(
	inflater: LayoutInflater, container: ViewGroup?,
	savedInstanceState: Bundle?
	): View? {
	// Imposta il layout per questo frammento
	return inflater.inflate(R.layout.fragment2, container, false)
	}
	//funzione che viene eseguita quando il Fragment viene creato
	override fun onCreate(savedInstanceState: Bundle?) {
	super.onCreate(savedInstanceState)
	//abilita il menù in questo Fragment
	setHasOptionsMenu(true)
	}
	//funzione per creare e gestire le voci di menù
	override fun onCreateOptionsMenu(menu: Menu, inflater: MenuInflater) {
	super.onCreateOptionsMenu(menu, inflater)
	inflater.inflate(R.menu.menu_main, menu)
	}
	//gestione dei click sugli elementi del menu
	override fun onOptionsItemSelected(item: MenuItem): Boolean {
	when (item.itemId) {
	R.id.action_el1 ->{
	//inserire qui il codice che deve essere eseguito toccando questo elemento di menu
	Toast.makeText(activity,"Elemento 1 di Fragment 2", Toast.LENGTH_SHORT).show()
	}
	R.id.action_el2 ->{
	//inserire qui il codice che deve essere eseguito toccando questo elemento di menu
	Toast.makeText(activity,"Elemento 2 di Fragment 2", Toast.LENGTH_SHORT).show()
	}
	R.id.action_el3 ->{
	//inserire qui il codice che deve essere eseguito toccando questo elemento di menu
	Toast.makeText(activity,"Elemento 3 di Fragment 2", Toast.LENGTH_SHORT).show()
	}
	R.id.action_el4 ->{
	//inserire qui il codice che deve essere eseguito toccando questo elemento di menu
	Toast.makeText(activity,"Elemento 4 di Fragment 3", Toast.LENGTH_SHORT).show()
	}
	else -> super.onOptionsItemSelected(item)
	}
	return true
	}
	}

view raw Fragment2_menu.kt hosted with ❤ by GitHub

Ecco come si presenta il file Fragment3.kt

	package com.dm.tutorialtabactivity4
	import android.os.Bundle
	import androidx.fragment.app.Fragment
	import android.view.LayoutInflater
	import android.view.View
	import android.view.ViewGroup
	/**
	* A simple [Fragment] subclass.
	*/
	class Fragment3 : Fragment() {
	override fun onCreateView(
	inflater: LayoutInflater, container: ViewGroup?,
	savedInstanceState: Bundle?
	): View? {
	// Imposta il layout per questo frammento
	return inflater.inflate(R.layout.fragment3, container, false)
	}
	}

view raw Fragment3_menu.kt hosted with ❤ by GitHub

Ecco come si presenta il file Fragment4.kt

	package com.dm.tutorialtabactivity4
	import android.os.Bundle
	import androidx.fragment.app.Fragment
	import android.view.LayoutInflater
	import android.view.View
	import android.view.ViewGroup
	/**
	* A simple [Fragment] subclass.
	*/
	class Fragment4 : Fragment() {
	override fun onCreateView(
	inflater: LayoutInflater, container: ViewGroup?,
	savedInstanceState: Bundle?
	): View? {
	// Imposta il layout per questo frammento
	return inflater.inflate(R.layout.fragment4, container, false)
	}
	}

view raw Fragment4_menu.kt hosted with ❤ by GitHub

Come si può vedere dal codice dei quattro Fragment solo i primi due hanno abilitato il menù, inoltre il Fragment1 la voce elemento 3 non è visibile.

Ecco un video dimostrativo

Download Project
Download file APK

---

Vedi anche Tabbed Activity: creazione delle schede
Vedi anche Tabbed Activity: personalizzazione
Vedi anche Tabbed Activity: costruire l'app all'interno delle schede