Android Custom Overflow Menu Example

The android overflow menu is located at the top toolbar of the android application. You can add menu items in it for users to navigate to different screens. This article will tell you how to customize the overflow menu items to fit your needs.

1. Android Custom Overflow Menu Items Steps.

  1. Create an android project with the Empty Activity template.
  2. Create the menu folder under the app/res folder.
  3. Add a custom overflow menu xml file in app / res / menu folder.
  4. Inflate the overflow menu xml file in activity’s onCreateOptionsMenu(Menu menu) method.
  5. Override onOptionsItemSelected(MenuItem item) method in main activity class, and write code in this method to process user click menu item event.

2. Android Custom Overflow Menu Example.

If you can not watch the above video, you can see it on the youtube URL https://youtu.be/vRLgMFxoK8A

  1. In this example, the overflow menu contains three single radio checkbox menu items.
  2. When you click each menu item, the main activity background and text view text will be changed.
  3. Below is the project files structure that is used in this example.
    android-custom-overflow-menu-example-project-files-structure

2.1 Main Activity.

  1. MainActivity.java
    package com.dev2qa.customoverflowmenu;
    
    import android.graphics.Color;
    import android.support.v7.app.AppCompatActivity;
    import android.os.Bundle;
    import android.view.Menu;
    import android.view.MenuInflater;
    import android.view.MenuItem;
    import android.widget.LinearLayout;
    import android.widget.TextView;
    
    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
        }
    
    
    
        /* Override this method to inflate the overflow menu xml file. */
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
    
            // Get menu inflater object.
            MenuInflater menuInflater = getMenuInflater();
    
            // Inflate the custom overflow menu
            menuInflater.inflate(R.menu.overflow_menu_example, menu);
    
            return true;
        }
    
        /* When user select a menu item in the overflow menu xml file, this method will be invoked. */
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
    
            // Get the main activity layout object.
            LinearLayout mainLayout = (LinearLayout)findViewById(R.id.linear_layout);
    
            // Get the text view object.
            TextView textView = (TextView)findViewById(R.id.text_view);
    
            // Get clicked menu item id.
            int itemId = item.getItemId();
    
            if(itemId == R.id.red_menu)
            {
                mainLayout.setBackgroundColor(Color.RED);
                textView.setText("You select red menu.");
            }else if(itemId == R.id.yellow_menu)
            {
                mainLayout.setBackgroundColor(Color.YELLOW);
                textView.setText("You select yellow menu.");
            }else if(itemId == R.id.green_menu)
            {
                mainLayout.setBackgroundColor(Color.GREEN);
                textView.setText("You select green menu.");
            }
    
    
            return true;
        }
    }

2.2 Main Activity Layout Xml File.

  1. app / res / layout / activity_main.xml
    <LinearLayout
        android:id="@+id/linear_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center">
    
        <TextView
            android:id="@+id/text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:textColor="@color/colorPrimary"
            android:text="Select menu item at right top overflow menu."/>
    
    </LinearLayout>

2.3 Overflow Menu Xml File.

  1. Right click menu folder, click New —> Menu resource file menu item in the popup menu list to create this file.
  2. app / res / menu / overflow_menu_example.xml
    <?xml version="1.0" encoding="utf-8"?>
    <menu xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:android="http://schemas.android.com/apk/res/android">
    
        <group android:checkableBehavior="single">
    
            <item
                android:id="@+id/red_menu"
                android:title="@string/string_red"
                app:showAsAction="never"
                android:orderInCategory="1"/>
    
            <item
                android:id="@+id/yellow_menu"
                android:title="@string/string_yellow"
                app:showAsAction="never"
                android:orderInCategory="2"/>
    
            <item
                android:id="@+id/green_menu"
                android:title="@string/string_green"
                app:showAsAction="never"
                android:orderInCategory="3"/>
    
        </group>
    </menu>

2.4 String Values Xml File.

  1. app / res / values / strings.xml
    <resources>
        <string name="app_name">CustomOverflowMenu</string>
    
        <string name="string_red">Red</string>
    
        <string name="string_yellow">Yellow</string>
    
        <string name="string_green">Green</string>
    </resources>
0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x