Android Custom Dropdown/Popup Menu

Android custom dropdown/popup menu

Update: To create a popup menu in android with Kotlin refer my answer here.

To create a popup menu in android with Java:

Create a layout file activity_main.xml under res/layout directory which contains only one button.

Filename: activity_main.xml

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"  
    android:paddingLeft="@dimen/activity_horizontal_margin"  
    android:paddingRight="@dimen/activity_horizontal_margin"  
    android:paddingTop="@dimen/activity_vertical_margin"  
    tools:context=".MainActivity" >  

    <Button  
        android:id="@+id/button1"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_alignParentLeft="true"  
        android:layout_alignParentTop="true"  
        android:layout_marginLeft="62dp"  
        android:layout_marginTop="50dp"  
        android:text="Show Popup" />  

</RelativeLayout>  

Create a file popup_menu.xml under res/menu directory

It contains three items as shown below.

Filename: poupup_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android" >  

    <item  
        android:id="@+id/one"  
        android:title="One"/>  

    <item  
        android:id="@+id/two"  
        android:title="Two"/>  

    <item  
        android:id="@+id/three"  
        android:title="Three"/>  

</menu>  

MainActivity class which displays the popup menu on button click.

Filename: MainActivity.java

public class MainActivity extends Activity {  
    private Button button1;  

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        button1 = (Button) findViewById(R.id.button1);
        button1.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //Creating the instance of PopupMenu
                PopupMenu popup = new PopupMenu(MainActivity.this, button1);
                //Inflating the Popup using xml file
                popup.getMenuInflater()
                    .inflate(R.menu.popup_menu, popup.getMenu());

                //registering popup with OnMenuItemClickListener
                popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
                    public boolean onMenuItemClick(MenuItem item) {
                        Toast.makeText(
                            MainActivity.this,
                            "You Clicked : " + item.getTitle(),
                            Toast.LENGTH_SHORT
                        ).show();
                        return true;
                    }
                });

                popup.show(); //showing popup menu
            }
        }); //closing the setOnClickListener method
    }
}

To add programmatically:

PopupMenu menu = new PopupMenu(this, view);

menu.getMenu().add("One");
menu.getMenu().add("Two");
menu.getMenu().add("Three");

menu.show();

Follow this link for creating menu programmatically.

How to pass a custom layout to a PopupMenu?

To inflate popupMenu from a button onClick, use the following code.

btn = (Button) findViewById(R.id.btn);   
btn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            PopupMenu popup = new PopupMenu(MainActivity.this, v);
            popup.getMenuInflater().inflate(R.menu.pop_up, popup.getMenu());

            popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
                public boolean onMenuItemClick(MenuItem item) {
                    Toast.makeText(MainActivity.this, "Some Text" + item.getTitle(), Toast.LENGTH_SHORT).show();
                    return true;
                }
            });
            popup.show();//showing popup menu
        }
    });

EDIT

To style the popupMenu, add the following style.

<style name="PopupMenu" parent="@android:style/Widget.PopupMenu">
        <item name="android:popupBackground">#ffffff</item>
    </style>

I noticed you also want to add icons next to your text. It is possible to add icons in popupMenu. However it is a better approach to use popup Window instead. Here is a sample code:

PopupWindow mypopupWindow;
setPopUpWindow();  
     btn=(Button)findViewById(R.id.btn);  
     btn.setOnClickListener(new View.OnClickListener() {  
       @Override  
       public void onClick(View v) {              
           mypopupWindow.showAsDropDown(v,-153,0);  
           //showAsDropDown(below which view you want to show as dropdown,horizontal position, vertical position)  
         }  
       }  
     });  
   }  
   private void setPopUpWindow() {  
     LayoutInflater inflater = (LayoutInflater)  
         getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
     view = inflater.inflate(R.layout.popup, null);  

     Start=(RelativeLayout)view.findViewById(R.id.start_btn);  
     Pause=(RelativeLayout)view.findViewById(R.id.pause_btn);  
     Stop=(RelativeLayout)view.findViewById(R.id.stop_btn);

  mypopupWindow = new PopupWindow(view,300, RelativeLayout.LayoutParams.WRAP_CONTENT, true);

popup Layout

<?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:orientation="vertical" android:layout_width="wrap_content"  
   android:background="@drawable/whitedrawable"  
   android:paddingRight="0dp"  
   android:layout_marginRight="0dp"  
   android:layout_height="wrap_content">  
   <RelativeLayout  
     android:id="@+id/btn1"  
     android:layout_width="wrap_content"  
     android:layout_height="wrap_content">  
     <ImageView  
       android:layout_centerHorizontal="true"  
       android:layout_centerVertical="true"  
       android:layout_alignParentLeft="true"  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:src="@drawable/startimg"  
       android:id="@+id/startimg"  
       android:paddingLeft="10dp"  
       android:paddingRight="10dp"  
       android:paddingTop="5dp"  
       android:paddingBottom="5dp"  
       />  
     <TextView  
       android:layout_centerHorizontal="true"  
       android:layout_centerVertical="true"  
       android:layout_width="wrap_content"  
       android:layout_height="wrap_content"  
       android:paddingRight="0dp"  
       android:text="Start"  
       android:layout_toRightOf="@+id/startimg"  
       />  
 <!-- Continue for other items-->

The whitedrawable can be used to set a background of your choice. You can use 9patch to get the shadow and rounded corners for the background.

To dismiss the popupWindow, use the following code:

mypopupWindow.getContentView().setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        mypopupWindow.dismiss();
    }
});

To dismiss using the back button, use:

@Override
public void onBackPressed() {
    if(mypopupWindow.isShowing()) {
        mypopupWindow.dismiss();
        return;
    }
    super.onBackPressed();
}

How to create custom dropdown/popup view with buttons textviews etc in android

You can use Custom Dialogs, with a background image like in the provided image.

 Dialog dialog = new Dialog(context);
 dialog.setContentView(R.layout.custom);

You can get more from this link

Custom PopUp Menu

You can use ListPopupWindow. You can submit your custom Adapter to the ListPopupWindow's object, and customize its appearance into getView

Android Custom Popup menu with switch

You can use popupwindow since it allows to use custom layouts.

<RelativeLayout 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"
    tools:context=".MainActivity" 
    android:padding="5dp">

<Switch
    android:id="@+id/mySwitch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_marginTop="20dp"
    android:text="Play with the Switch" />

<TextView
    android:id="@+id/switchStatus"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/mySwitch"
    android:layout_marginTop="22dp"
    android:text="Medium Text"
    android:textAppearance="?android:attr/textAppearanceMedium" />

</RelativeLayout>

and in ur activity implement this method:

/* you should refer to a view to stick your popup wherever u want.
** e.g. Button button  = (Button) findviewbyId(R.id.btn);
**     if(popupWindow != null)
**         showPopup(button); 
**/
    public void showPopup(View v) {


            LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            final View popupView = layoutInflater.inflate(R.layout.popup_filter_layout, null);

            popupWindow = new PopupWindow(
                    popupView,
                    ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);

            popupWindow.setBackgroundDrawable(new BitmapDrawable());
            popupWindow.setOutsideTouchable(true);
            popupWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
                @Override
                public void onDismiss() {
                    //TODO do sth here on dismiss
                }
            });

            popupWindow.showAsDropDown(v); 
}

How to create custom Popup Menu using Kotlin in AndroidStudio?

Finally, I did it, It may help someone

Step 1. First, create an activity_main.xml contains a button named my_button

Step 2. Then take header_menu.xml under res/menu:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/header1"
        android:title="H1" />
    <item
        android:id="@+id/header2"
        android:title="H2" />
    <item
        android:id="@+id/header3"
        android:title="H3" />

</menu>

Step 3. Finally, in MainActivity.kt use it like:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        my_button.setOnClickListener {
             showPopup(my_button)
          }
    }

    private fun showPopup(view: View) {
        val popup = PopupMenu(this, view)
        popup.inflate(R.menu.header_menu)

        popup.setOnMenuItemClickListener(PopupMenu.OnMenuItemClickListener { item: MenuItem? ->

            when (item!!.itemId) {
                R.id.header1 -> {
                    Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
                }
                R.id.header2 -> {
                    Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
                }
                R.id.header3 -> {
                    Toast.makeText(this@MainActivity, item.title, Toast.LENGTH_SHORT).show()
                }
            }

            true
        })

        popup.show()
    }

---

Related Topics