Building a Custom Overflow Menu - Androhub

Overflow Menu Banner

Building a Custom Overflow Menu

Hello, folks its been too long that I haven’t written any post. So once again I am back with one more article.

So today we are going to learn how to customize the Overflow menu UI by adding icons to it and giving a style to the overflow menu.

If you don’t know about menus you can have a look at my article about ActionBar and Options Menus.

VIDEO DEMO

Example

1. Create a new project in Android Studio by navigating to File ⇒ New ⇒ New Project and fill the required details. By default my activity is MainActivity.java.

2. Open strings.xml located under res=>values folder and add the following strings.

3. Create activity_main.xml and add the following code. Here there are three buttons that will open different activities to show us different types of overflow menus.

4. Now we will create one more XML naming activity_overflow_menu.xml which will contain one Toolbar. We are only taking the toolbar because the overflow menu will be shown at the toolbar.

5. After creating XML let’s create a java class for the overflow menu naming OverflowMenuActivity.java. In this class, we are doing nothing special just simply inflating the menus and implementing click events to them. I have used the same class for two different overflow menus i.e. Default and Custom(with Icons).

6. Now let’s have a look how our menu’s look like:

  • overflow_menu.xml : This is the default or simple overflow menu that contains three items with id, icon, and title. When we inflate this menu the icons won’t be visible with text.

Default Overflow Menu
Default Overflow Menu

  • custom_overflow_menu.xml : This is a custom overflow menu with icons. If you see the structure there is one item(action_more) and inside that item, one menu is there and inside the menu, I have taken the same three menus. By doing this we can see the icons with text in runtime.

Custom Overflow Menu with Icons
Custom Overflow Menu with Icons

7. In the above steps we learned how to show icons with text but suppose if we want to change the background color of the overflow menu and also change the color of the text view. We can achieve this thing by providing style to our overflow menu. Let’s see how we can do this:

  • Creating a style: Use the below style and put it inside of your styles.xml file. Here we are setting background color and text color.

  • Setting a Style:  After creating the style you can set the style to your toolbar like this app:popupTheme=”@style/ThemeOverlay.MyTheme”. That’s all now you can see your overflow menu with this style.

Styled Overflow Menu
Styled Overflow Menu

8. Now let’s see the full code for the styled overflow menu. First, create XML naming activity_overflow_menu_style.xml with the toolbar and add the created style to the toolbar.

9. Now create a java class for the styled overflow menu naming OverflowMenuStyleActivity.java and add the below code to it.

10. Now to your MainActivity.java add the below code.

11. Finally, all done run your code.

Thanks. 🙂

 

Post comment

Your email address will not be published. Required fields are marked *