The android overflow menu also known as Option Menu is used to show a list of vertical menus with icons inside it. Overflow menu is place above on android application screen at the top right side of it. User can itself customize the over flow menu icons. So in this tutorial we would going to create customized Overflow menu with multiple icons. So let’s get started 🙂 .
Contents in this project Overflow Menu on Action Bar Toolbar Tutorial :
1. Open the build.gradle( Module:app ) file of your project.
2. Add compile ‘com.android.support:design:26.0.0-alpha1’ inside the dependencies block.
3. Download All 5 icons from below and paste it into res -> drawable folder. These are the Overflow menu icons.
4. Now open res -> values -> styles.xml file and replace your code with mine.
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <!-- Must Add for toolbar --> <item name="windowNoTitle">true</item> </style> </resources>
5. Create a menu file inside res -> menu -> toolbar_main_menu.xml .
Code for toolbar_main_menu.xml file.
<?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" > <item android:id="@+id/ADD" android:title="Add now" android:icon="@drawable/ic_add_circle_black" app:showAsAction="never" /> <item android:id="@+id/CALL_BACK" android:title="Call Back" android:icon="@drawable/ic_call_black" app:showAsAction="never" /> <item android:id="@+id/CAMERA" android:title="Camera" android:icon="@drawable/ic_camera_alt_black" app:showAsAction="never" /> <item android:id="@+id/CART" android:title="CART" android:icon="@drawable/ic_shopping_cart_black" app:showAsAction="never" /> <item android:id="@+id/VIDEO" android:title="Video" android:icon="@drawable/ic_videocam_black" app:showAsAction="never" /> </menu>
6. Code for activity_main.xml file.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" > <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" > </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout> </LinearLayout>
7. Code for MainActivity.java file .