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.
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.
1 2 3 4 5 6 7 8 9 |
<resources> <string name="app_name">Overflow Menu Demo</string> <string name="default_overflow_menu">Default Overflow Menu</string> <string name="custom_overflow_menu">Custom Overflow Menu</string> <string name="contact_us">Contact Us</string> <string name="terms_and_conditions">Terms and Conditions</string> <string name="logout">Logout</string> <string name="style_overflow_menu">Styled Overflow Menu</string> </resources> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context=".MainActivity"> <android.support.v7.widget.Toolbar android:id="@+id/main_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" android:padding="16dp"> <Button android:id="@+id/default_overflow_menu_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:onClick="openDefaultOverflowMenu" android:text="@string/default_overflow_menu" android:textColor="@android:color/white" android:textSize="15sp" /> <Button android:id="@+id/custom_overflow_menu_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:background="@color/colorPrimary" android:onClick="openCustomOverflowMenu" android:text="@string/custom_overflow_menu" android:textColor="@android:color/white" android:textSize="15sp" /> <Button android:id="@+id/styled_overflow_menu_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:background="@color/colorPrimary" android:onClick="openStyledOverflowMenu" android:text="@string/style_overflow_menu" android:textColor="@android:color/white" android:textSize="15sp" /> </LinearLayout> </LinearLayout> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?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" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/overflow_menu_toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" /> </LinearLayout> |
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).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
package com.overflow.menu.demo; import android.content.Context; import android.content.Intent; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v7.app.ActionBar; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.widget.Toast; /** * Created by sonu on 11:42, 10/01/19 * Copyright (c) 2019 . All rights reserved. */ public class OverflowMenuActivity extends AppCompatActivity { private static final String EXTRA_IS_CUSTOM = "is_custom_overflow_menu"; /** * method to open OverflowMenuActivity * * @param context calling context * @param isCustomOverflowMenu param to check which overflow menu has to be show */ public static void openOverflowMenuActivity(Context context, boolean isCustomOverflowMenu) { Intent intent = new Intent(context, OverflowMenuActivity.class); intent.putExtra(EXTRA_IS_CUSTOM, isCustomOverflowMenu); context.startActivity(intent); } private Toolbar toolbar; private boolean isCustomOverflowMenu; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_overflow_menu); //get the boolean value isCustomOverflowMenu = getIntent().getBooleanExtra(EXTRA_IS_CUSTOM, false); setUpToolbar(); } /** * set up toolbar */ private void setUpToolbar() { toolbar = findViewById(R.id.overflow_menu_toolbar); setSupportActionBar(toolbar); //get the actionbar ActionBar actionBar = getSupportActionBar(); if (actionBar != null) { //enable the back button actionBar.setDisplayHomeAsUpEnabled(true); //change the title on basis of boolean value if (isCustomOverflowMenu) { actionBar.setTitle("Custom Overflow Menu"); } else { actionBar.setTitle("Default Overflow Menu"); } } } @Override public boolean onCreateOptionsMenu(Menu menu) { //inflate the menu on the basis of boolean value if (isCustomOverflowMenu) { getMenuInflater().inflate(R.menu.custom_overflow_menu, menu); } else { getMenuInflater().inflate(R.menu.overflow_menu, menu); } return super.onCreateOptionsMenu(menu); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.action_contact_us: Toast.makeText(this, "Contact us clicked", Toast.LENGTH_SHORT).show(); break; case R.id.action_terms_conditions: Toast.makeText(this, "Terms and Conditions clicked", Toast.LENGTH_SHORT).show(); break; case R.id.action_logout: Toast.makeText(this, "Logout clicked", Toast.LENGTH_SHORT).show(); break; case android.R.id.home: //click event of back arrow button to finish activity finish(); break; } return super.onOptionsItemSelected(item); } } |
6. Now let’s have a look how our menu’s look like:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <!-- Default overflow menu items --> <item android:id="@+id/action_contact_us" android:icon="@drawable/ic_contact_phone_black_24dp" android:title="@string/contact_us" /> <item android:id="@+id/action_terms_conditions" android:icon="@drawable/ic_assignment_black_24dp" android:title="@string/terms_and_conditions" /> <item android:id="@+id/action_logout" android:icon="@drawable/ic_power_settings_new_black_24dp" android:title="@string/logout" /> </menu> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <!-- to enable overflow menu with icons we have to do like below --> <item android:id="@+id/action_more" android:icon="@drawable/ic_more_vert_black_24dp" android:title="" app:showAsAction="always"> <menu> <item android:id="@+id/action_contact_us" android:icon="@drawable/ic_contact_phone_black_24dp" android:title="@string/contact_us" /> <item android:id="@+id/action_terms_conditions" android:icon="@drawable/ic_assignment_black_24dp" android:title="@string/terms_and_conditions" /> <item android:id="@+id/action_logout" android:icon="@drawable/ic_power_settings_new_black_24dp" android:title="@string/logout" /> </menu> </item> </menu> |
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:
1 2 3 4 5 6 7 |
<!-- Custom style for overflow menu--> <style name="ThemeOverlay.MyTheme" parent="ThemeOverlay.AppCompat.Light"> <!-- set background color --> <item name="android:colorBackground">@color/colorPrimary</item> <!-- set text color --> <item name="android:textColor">@android:color/white</item> </style> |
1 2 3 4 5 6 |
<android.support.v7.widget.Toolbar android:id="@+id/overflow_menu_toolbar" app:popupTheme="@style/ThemeOverlay.MyTheme" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" /> |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?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" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/overflow_menu_toolbar" app:popupTheme="@style/ThemeOverlay.MyTheme" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" /> </LinearLayout> |
9. Now create a java class for the styled overflow menu naming OverflowMenuStyleActivity.java and add the below code to it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
package com.overflow.menu.demo; import android.content.Context; import android.content.Intent; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v7.app.ActionBar; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.widget.Toast; /** * Created by sonu on 11:42, 10/01/19 * Copyright (c) 2019 . All rights reserved. */ public class OverflowMenuStyleActivity extends AppCompatActivity { /** * method to open OverflowMenuActivity * * @param context calling context */ public static void openOverflowMenuStyleActivity(Context context) { Intent intent = new Intent(context, OverflowMenuStyleActivity.class); context.startActivity(intent); } private Toolbar toolbar; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_overflow_menu_style); setUpToolbar(); } /** * set up toolbar */ private void setUpToolbar() { toolbar = findViewById(R.id.overflow_menu_toolbar); setSupportActionBar(toolbar); //get the actionbar ActionBar actionBar = getSupportActionBar(); if (actionBar != null) { //enable the back button actionBar.setDisplayHomeAsUpEnabled(true); } } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.custom_overflow_menu, menu); return super.onCreateOptionsMenu(menu); } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.action_contact_us: Toast.makeText(this, "Contact us clicked", Toast.LENGTH_SHORT).show(); break; case R.id.action_terms_conditions: Toast.makeText(this, "Terms and Conditions clicked", Toast.LENGTH_SHORT).show(); break; case R.id.action_logout: Toast.makeText(this, "Logout clicked", Toast.LENGTH_SHORT).show(); break; case android.R.id.home: //click event of back arrow button to finish activity finish(); break; } return super.onOptionsItemSelected(item); } } |
10. Now to your MainActivity.java add the below code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
package com.overflow.menu.demo; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.Toolbar; import android.view.View; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setUpToolbar(); } /* set up toolbar */ private void setUpToolbar() { Toolbar toolbar = findViewById(R.id.main_toolbar); setSupportActionBar(toolbar); } /** * open default overflow menu activity * * @param view */ public void openDefaultOverflowMenu(View view) { OverflowMenuActivity.openOverflowMenuActivity(this, false); } /** * open custom overflow menu activity * * @param view */ public void openCustomOverflowMenu(View view) { OverflowMenuActivity.openOverflowMenuActivity(this, true); } /** * open styled overflow menu activity * * @param view */ public void openStyledOverflowMenu(View view) { OverflowMenuStyleActivity.openOverflowMenuStyleActivity(this); } } |
11. Finally, all done run your code.
Thanks.
Subscribe to us and get the latest news.