Building a Custom Overflow Menu

Building a Custom Overflow Menu

Hello folks its been a 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 customise Overflow menu like adding icons to it and giving a style to overflow menu.

If you don’t know about menus  you can have a look to 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 required details. By default my activity is MainActivity.java.

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

3. Create activity_main.xml and add the following code. Here there are three buttons which will open different activities to show us different type 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 toolbar because the overflow menu will be shown at toolbar.

5. After creating xml let’s create java class for overflow menu naming OverflowMenuActivity.java. In this class we are doing nothing special just simply inflating the menus and implementing click events to it. I have used the same class for two different overflow menu 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 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 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 menu i have taken 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 overflow menu and also change the color of 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 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 stye.
Styled Overflow Menu

Styled Overflow Menu

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

9. Now create java class for 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. 🙂

Download Source Code

 

About the author

I am an Android developer for whom Android is the one and only love. I work as a freelancer which gets me and Android closer. I always love to share my learnings and love to learn from others knowledge too.

Leave a Comment

Comment (required)

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Name (required)
Email (required)