Android MenuItem Custom Layout

Question

I have a PopupMenu that appears when I click on an action button in a actionbar. I would like the MenuItem, in my PopupMenu, with a custom layout like this:

layout/menu_item_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/menuItemLayout"

    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/imageViewMenuItem"
        android:layout_width="20dip"
        android:layout_height="20dip"
        android:src="@drawable/abc_list_focused_holo" />

    <TextView
        android:id="@+id/textViewMenuItem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextViewMenuItem" />

</LinearLayout>

This is the xml of PopUpMenu:

menu/pop_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       tools:context="apparound.actiobarpopupstylefacebook.Main" >

    <item
        android:id="@+id/popupItem"
        android:showAsAction="ifRoom"/>
</menu>

In my activity code is following:

public void showPopup(int idR){
View menuItemView = findViewById(idR);
PopupMenu popup = new PopupMenu(this, menuItemView);
MenuInflater inflate = popup.getMenuInflater();
inflate.inflate(R.menu.pop_menu, popup.getMenu());
MenuItem menuItem= popup.getMenu().findItem(R.id.popupItem);
menuItem.setActionView(R.layout.menu_item_layout);
popup.show();
}

But when appear popupmenu, item is empty. I was wrong to use setActionview() method? Thanks.

Answer 1

For custom layouts you can't use a menu, one alternate option is a PopupWindow

PopupWindow popupwindow_obj = popupDisplay();
popupwindow_obj.showAsDropDown(clickbtn, -40, 18); // where u want show on view click event popupwindow.showAsDropDown(view, x, y);

public PopupWindow popupDisplay() 
{ 

    final PopupWindow popupWindow = new PopupWindow(this);

    // inflate your layout or dynamically add view
    LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE); 

    View view = inflater.inflate(R.layout.mylayout, null);

    Button item = (Button) view.findViewById(R.id.button1);

    popupWindow.setFocusable(true);
    popupWindow.setWidth(WindowManager.LayoutParams.WRAP_CONTENT);
    popupWindow.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);
    popupWindow.setContentView(view);

    return popupWindow;
}

Create this XML file in the res/layout folder named my layout.xml

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Window test" />
</LinearLayout>

Answer 2

By default the layout of a PopupMenu (and it's items) cannot be customized. In the solution below I have created a PopupMenu with a horizontal layout. In this case I used TextView as clickable items, but you can easily replace them by Buttons. You can customize the menu items whatever you want.

1 - The Custom PopupMenu class:

public class PopupMenuCustomLayout {
    private PopupMenuCustomOnClickListener onClickListener;
    private Context context;
    private PopupWindow popupWindow;
    private int rLayoutId;
    private View popupView;

    public PopupMenuCustomLayout(Context context, int rLayoutId, PopupMenuCustomOnClickListener onClickListener) {
        this.context = context;
        this.onClickListener = onClickListener;
        this.rLayoutId = rLayoutId;
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(LAYOUT_INFLATER_SERVICE);
        popupView = inflater.inflate(rLayoutId, null);
        int width = LinearLayout.LayoutParams.WRAP_CONTENT;
        int height = LinearLayout.LayoutParams.WRAP_CONTENT;
        boolean focusable = true;
        popupWindow = new PopupWindow(popupView, width, height, focusable);
        popupWindow.setElevation(10);

        LinearLayout linearLayout = (LinearLayout) popupView;
        for (int i = 0; i < linearLayout.getChildCount(); i++) {
            View v = linearLayout.getChildAt(i);
            v.setOnClickListener( v1 -> { onClickListener.onClick( v1.getId()); popupWindow.dismiss(); });
        }
    }
    public void setAnimationStyle( int animationStyle) {
        popupWindow.setAnimationStyle(animationStyle);
    }
    public void show() {
        popupWindow.showAtLocation( popupView, Gravity.CENTER, 0, 0);
    }

    public void show( View anchorView, int gravity, int offsetX, int offsetY) {
        popupWindow.showAsDropDown( anchorView, 0, -2 * (anchorView.getHeight()));
    }

    public interface PopupMenuCustomOnClickListener {
        public void onClick(int menuItemId);
    }
}

2 - Your custom layout, e.g. linearlayout with horizontal layout. In this case I use a simple LinearLayout with TextView items. You can use Buttons, etc.

<?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="wrap_content"
    android:background="@color/white"
    android:orientation="horizontal">
    <TextView
        android:id="@+id/popup_menu_custom_item_a"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="A"
        android:textAppearance="?android:textAppearanceMedium" />
    <TextView
        android:id="@+id/popup_menu_custom_item_b"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:text="B"
        android:textAppearance="?android:textAppearanceMedium" />
    // ...
</LinearLayout>

3 - Using the Custom PopupMenu like the normal PopupMenu.

PopupMenuCustomLayout popupMenu = new PopupMenuCustomLayout(
        MainActivity.mainActivity, R.layout.popup_menu_custom_layout,
        new PopupMenuCustomLayout.PopupMenuCustomOnClickListener() {
            @Override
            public void onClick(int itemId) {
                // log statement: "Clicked on: " + itemId
                switch (itemId) {
                    case R.id.popup_menu_custom_item_a:
                        // log statement: "Item A was clicked!"
                        break;
                }
            }
        });
// Method 1: popupMenu.show();
// Method 2: via an anchor view: 
popupMenu.show( anchorView, Gravity.CENTER, 0, 0);

Answer 3

Final PopupWindow popupWindow = new PopupWindow(); // inflate your layout or dynamically add view

LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); 

View view = inflater.inflate(R.layout.alert_reply_chat,null); 
popupWindow.setFocusable(true); 
popupWindow.setWidth(WindowManager.LayoutParams.WRAP_CONTENT); 
popupWindow.setHeight(180); popupWindow.setBackgroundDrawable(null); 
popupWindow.setClippingEnabled(false); popupWindow.setTouchable(true); 
popupWindow.setContentView(view); return popupWindow; 

//above is working code i checked it