The Android platform provides many different types of menus to be added to an Android app. In this tutorial, we will learn how to add the most common type of menu, an Options Menu.

An Options Menu is one that appears at the right corner of the Action Bar/Toolbar. By default, all items in the menu is contained inside the overflow action.

At the end of the tutorial, you would have learned:

1. How to add an Options Menu to an Android app.

1. Android Studio. The version used in this tutorial is Bumblebee 2021.1.1 Patch 3.

1. Basic Android.
2. Action Bar/Toolbar.

To follow along with the tutorial, perform the steps below:

1. Create a new Android project with the default Empty Activity.

2. Give the default TextView an android:id of hello.

3. Change its android:textSize to 32sp.

    <?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:id="@+id/hello"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Hello World!"
           android:textSize="32sp"
           app:layout_constraintBottom_toBottomOf="parent"
           app:layout_constraintLeft_toLeftOf="parent"
           app:layout_constraintRight_toRightOf="parent"
           app:layout_constraintTop_toTopOf="parent" />
   
    </androidx.constraintlayout.widget.ConstraintLayout>

The easiest way to add an Options Menu to an Action Bar is by declaring the menu in an XML file and then inflating it in the Activitys onCreateOptionsMenu() function.

We will start with creating a simple menu with three items in it:

• Refresh.
• Help.
• Settings.

1. Right-click on res -> New -> Android Resource File.

2. Name the file options.

3. Change the Resource type to Menu.
   

4. Select OK.

5. Add these string resources into strings.xml.

    <string name="refresh">Refresh</string>
    <string name="help">Help</string>
    <string name="settings">Settings</string>

6. Now that we have the XML file with <menu> as the root element, we can either build the menu in the Code View by ourselves, or using the Design Surface. Regardless of how you choose to build your menu, add three Menu Item/<item> that corresponds to the three options Refresh, Help, and Settings.

7. Make sure that your Menu Items are using the string resources created in step 5 as the value for their android:title attributes.

8. Your menu should look like the screenshot below if using the Design Surface.
   

9. In Code View, they should look like the code below.

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:title="@string/refresh" />
       <item android:title="@string/help" />
       <item android:title="@string/settings" />
    </menu>

10. We are now done with the XML file for now, but the app will not make use of the menu resource file yet. We still have to inflate the XML resource into the Action Bar. To do this, override MainActivitys onCreateOptionsMenu(), inflate the XML resource using the built-in menuInflater object, and return true.

     override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.options, menu)
        return true
     }

Run the app now to check whether the menu is working. It should behave similarly to the animation below.

The menu that we have created looks nice, but it does not perform any action when clicked. To respond to click events on each menu item, we will have to do a couple more things.

1. When an item in the menu is clicked, MainActivitys onOptionsItemSelected() will be called, so we will have to override this function if we want to respond to click events.

2. We should also give the menu items android:id attributes to make it easy to filter them out in onOptionsItemSelected().

3. Modify options.xml to add android:ids to each <item>.

    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
       <item
           android:title="@string/refresh"
           android:id="@+id/refresh"/>
       <item
           android:title="@string/help"
           android:id="@+id/help"/>
       <item android:title="@string/settings"
           android:id="@+id/settings"/>
    </menu>

4. Override onOptionsItemSelected() in MainActivity using the code below. The app will now change the value of the default TextView to match the menu items title.

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
       val textView = findViewById<TextView>(R.id.hello)
   
       return when(item.itemId){
           R.id.refresh,
           R.id.help,
           R.id.settings -> {
               textView.text = item.title
               true
           }
           else -> false
       }
    }

When we run the app now, we can see that clicks on any menu item will modify the TextView like the animation below.

MainActivity.kt

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

   override fun onCreateOptionsMenu(menu: Menu?): Boolean {
       menuInflater.inflate(R.menu.options, menu)
       return true
   }

   override fun onOptionsItemSelected(item: MenuItem): Boolean {
       val textView = findViewById<TextView>(R.id.hello)

       return when(item.itemId){
           R.id.refresh,
           R.id.help,
           R.id.settings -> {
               textView.text = item.title
               true
           }
           else -> false
       }
   }
}

activity_main.xml

<?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:id="@+id/hello"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       android:textSize="32sp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

options.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
   <item
       android:title="@string/refresh"
       android:id="@+id/refresh"/>
   <item
       android:title="@string/help"
       android:id="@+id/help"/>
   <item android:title="@string/settings"
       android:id="@+id/settings"/>
</menu>

strings.xml

<resources>
   <string name="app_name">Daniweb Android Options Menu</string>
   <string name="refresh">Refresh</string>
   <string name="help">Help</string>
   <string name="settings">Settings</string>
</resources>

Congratulations, we have learned how to add an Options menu into our apps Action Bar. The full project code can be found at https://github.com/dmitrilc/DaniwebAndroidOptionsMenu.

The release of Android 12 also came together with Material 3. Whether you love it or hate it, it is likely to be here to stay for a couple of years, therefore, it would be useful to know how to use it. In this tutorial, we will learn how to enable Material 3 themes and how to add the Material 3 Top App Bar into our app.

At the end of the tutorial, you would have learned:

1. How to subclass a Material 3 theme.
2. How to add Material 3 Top App Bar.

1. Android Studio. The version used in this tutorial is Arctic Fox 2020.3.1 Patch 4.

1. Basic Android.

To follow along with the tutorial, perform the steps below:

1. Create a new Android project with the default Empty Activity.

It is recommended that you apply an app-wide Material 3 theme before using any Material 3 component. Because we wanted to use the Material 3 Top App Bar, we should apply a theme such as Theme.Material3.DayNight.NoActionBar to our App.

1. In your current project, navigate to res > values > themes.

2. Open up both themes.xml and themes.xml (night).

3. Inspect both files. Notice that both of their <style> elements have Theme.MaterialComponents.DayNight.DarkActionBar as the parent. This is only true on my build of Android Studio. If you are using a newer build in the future, you might see a different parent theme. The current theme is a Material 2 theme, so we will need to upgrade it to Material 3 that supports a Top App Bar.

    <style name="Theme.DaniwebAndroidMaterial3TopAppBar" parent="Theme.MaterialComponents.DayNight.DarkActionBar">

4. Replace the current value of the parent attribute with Theme.Material3.DayNight.NoActionBar for both XML files. This theme does not contain an ActionBar, which allows us to add a Top App Bar that conforms to Material 3 guidelines.

5. Both of your <style> elements should look similar to this.

    <style name="Theme.DaniwebAndroidMaterial3TopAppBar" parent="Theme.Material3.DayNight.NoActionBar">

6. But the code will not compile yet because you must add the gradle dependency for Material 3. Open up your gradle module file and replace the current material dependency of implementation 'com.google.android.material:material:1.4.0'to

    implementation' com.google.android.material:material:1.5.0-rc01'

7. Sync the project.

8. Run the app now and you can see that the old Action Bar is gone. The background color is also a little bit different, too.

There are many variants of the Top App Bar:

1. Center aligned.
2. Small.
3. Medium.
4. Large.

For this tutorial, we will add the center-aligned Top App Bar. Follow the steps below to add it to our app:

1. Open up activity_main.xml in the Design view.

2. Under the Component Tree, Right-click on ConstraintLayout > Convert view.
   

3. Select CoordinatorLayout > Apply.
   

4. Switch to Code view.

5. Add an <AppBarLayout> child to the <CoordinatorLayout>.

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
   
    </com.google.android.material.appbar.AppBarLayout>

6. Add a <MaterialToolBar> child to <AppBarLayout>.

    <com.google.android.material.appbar.MaterialToolbar
       android:id="@+id/topAppBar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
       app:title="@string/page_title"
       app:titleCentered="true"
       app:menu="@menu/top_app_bar"
       app:navigationIcon="@drawable/ic_baseline_menu_24" />

7. Add the string resource below to strings.xml.

    <string name="page_title">App Brand</string>

8. Create a new xml resource for the menu by right-clicking on res > New > Android Resource File. Use the configuration from the screenshot below, select OK.
   

9. Create a new drawable for the navigation icon by right-clicking on drawable > New > Vector Asset. Use the configuration from the screenshot below, and then select Next > Finish.
   

10. Remove the default Hello World! TextView.

We are now ready to run the app, so run it now and we can see that we have a centered Top App Bar from the Material 3 library.

ic_baseline_menu_24.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
   android:width="24dp"
   android:height="24dp"
   android:viewportWidth="24"
   android:viewportHeight="24"
   android:tint="?attr/colorControlNormal">
 <path
     android:fillColor="@android:color/white"
     android:pathData="M3,18h18v-2L3,16v2zM3,13h18v-2L3,11v2zM3,6v2h18L21,6L3,6z"/>
</vector>

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">

       <com.google.android.material.appbar.MaterialToolbar
           android:id="@+id/topAppBar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           app:title="@string/page_title"
           app:titleCentered="true"
           app:menu="@menu/top_app_bar"
           app:navigationIcon="@drawable/ic_baseline_menu_24" />

   </com.google.android.material.appbar.AppBarLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

top_app_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

</menu>

strings.xml

<resources>
   <string name="app_name">DaniwebAndroid Material 3 Top App Bar</string>
   <string name="page_title">App Brand</string>
</resources>

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
   <!-- Base application theme. -->
   <style name="Theme.DaniwebAndroidMaterial3TopAppBar" parent="Theme.Material3.DayNight.NoActionBar">
       <!-- Primary brand color. -->
       <item name="colorPrimary">@color/purple_500</item>
       <item name="colorPrimaryVariant">@color/purple_700</item>
       <item name="colorOnPrimary">@color/white</item>
       <!-- Secondary brand color. -->
       <item name="colorSecondary">@color/teal_200</item>
       <item name="colorSecondaryVariant">@color/teal_700</item>
       <item name="colorOnSecondary">@color/black</item>
       <!-- Status bar color. -->
       <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
       <!-- Customize your theme here. -->
   </style>
</resources>

build.gradle

plugins {
   id 'com.android.application'
   id 'kotlin-android'
}

android {
   compileSdk 31

   defaultConfig {
       applicationId "com.example.daniwebandroidmaterial3topappbar"
       minSdk 21
       targetSdk 31
       versionCode 1
       versionName "1.0"

       testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
   }

   buildTypes {
       release {
           minifyEnabled false
           proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
       }
   }
   compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
   }
   kotlinOptions {
       jvmTarget = '1.8'
   }
}

dependencies {

   implementation 'androidx.core:core-ktx:1.7.0'
   implementation 'androidx.appcompat:appcompat:1.4.0'
   implementation 'com.google.android.material:material:1.5.0-rc01'
   implementation 'androidx.constraintlayout:constraintlayout:2.1.2'
   testImplementation 'junit:junit:4.+'
   androidTestImplementation 'androidx.test.ext:junit:1.1.3'
   androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
}

We have learned how to add a Material 3 Top App Bar into our App. The full project code can be found at https://github.com/dmitrilc/DaniwebAndroidMaterial3TopAppBar