Android OnCreateOptionsMenu Item with actionLayout not working

Question

I need to display a layout inside my option menu.

menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_likes"
        android:showAsAction="never"
        android:actionLayout="@layout/likes_layout"/>

    <item
        android:id="@+id/settings"
        android:showAsAction="never"
        android:title="Settings"
        />
</menu>

shape_notification.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke android:color="#080808" android:width="2dp"/>
    <corners android:radius="5dp" />
    <solid android:color="#85ea32"/>
</shape>

likes_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="3"
        android:id="@+id/likes"
        android:linksClickable="false"
        android:text="Likes"
        android:gravity="center_vertical|center_horizontal"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="5"
        android:layout_gravity="center"
        android:id="@+id/notif_count"
        android:background="@drawable/shape_notification"
        android:text="0"
        android:textSize="16sp"
        android:gravity="center"
        android:padding="2dp"
        android:singleLine="true"
        android:layout_margin="5dp"
        android:textColor="#fff"/>
</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

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

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        MenuInflater inflater = getMenuInflater();
        inflater.inflate(R.menu.menu, menu);

        return true;
    }
}

Option list is visible. Setting item is visible but likes layout is blank.

Does any one have done action layout for hidden items? Please help me

Answer 1

Change android:actionLayout to app:actionLayout so your menu item declaration should looks like

  <item
    android:id="@+id/action_likes"
    app:showAsAction="never"
    app:actionLayout="@layout/likes_layout"/>

Updated :

You have to create a custom dropdown menu using PopupWindow. peice of code that need to be implemented to archive it :

menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context="project.com.example.MainActivity"

>
<item
    android:id="@+id/item1"
    android:title="@string/action_settings"
    android:icon="@drawable/ic_launcher"
    app:actionViewClass="android.widget.ImageButton"
    app:showAsAction="always">

<menu>
</menu>
</item>

</menu>

MainActivity.java

   @Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    locButton = (ImageButton) menu.findItem(R.id.action_settings).getActionView();
    locButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            PopupWindow popupwindow_obj = popupDisplay();
            popupwindow_obj.showAsDropDown(locButton, -40, 18);
        }
    });
    return true;
}
  public PopupWindow popupDisplay()
{

    final PopupWindow popupWindow = new PopupWindow(this);

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

    View view = inflater.inflate(R.layout.listViewLayout, null);
    ListView listView=(ListView)view.findViewById(R.id.list);
    // populate listview with custom view which will be shown in drow down menu 
    popupWindow.setFocusable(true);
    popupWindow.setWidth(WindowManager.LayoutParams.WRAP_CONTENT);
    popupWindow.setHeight(WindowManager.LayoutParams.WRAP_CONTENT);
    popupWindow.setContentView(view);

    return popupWindow;
}

Hope it helps.

Answer 2

This can be done using Custom Popup Window.

res/menu/menu.xml

<?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">
    <item
        android:id="@+id/more"
        android:title="More Options"
        android:icon="@drawable/ic_menu_moreoverflow_normal_holo_light"
        app:actionLayout="@layout/moreover"
        app:showAsAction="always">

        <menu>
        </menu>
    </item>
</menu>

res/layout/moreover.xml

<?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:layout_height="wrap_content">
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/dropDowmImageBtn"
        android:src="@drawable/ic_menu_moreoverflow_normal_holo_light"/>
</LinearLayout>

res/layout/drop_down_item_row.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#fff">

    <TextView
        android:id="@+id/dropDownItemName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:minWidth="32dp"
        android:minHeight="32dp"
        android:textColor="#000"
        android:text=""
        android:layout_weight="0.7"
        android:singleLine="true"
        android:gravity="center_vertical"
        android:layout_margin="5dp"/>

    <Button xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/dropDownItemImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:minWidth="32dp"
        android:minHeight="32dp"
        android:background="@drawable/round"
        android:text=""
        android:textSize="16sp"
        android:textColor="@android:color/white"
        android:gravity="center"
        android:padding="2dp"
        android:singleLine="true"
        android:layout_weight="0.3"
        android:layout_marginTop="2dp"
        android:visibility="gone"/>

</LinearLayout>

res/drawable/round.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="2dp" />
    <solid android:color="#24bbe6" />
    <stroke android:color="#fffefe" android:width="1dp"/>
</shape>

DropDownItems.java

public class DropDownItems {
    String txt;
    int value;
    Boolean showValue;

    public DropDownItems(String txt, int value, Boolean showValue) {
        this.txt = txt;
        this.value = value;
        this.showValue = showValue;
    }

    public String getTxt() {
        return txt;
    }

    public int getValue() {
        return value;
    }

    public Boolean getShowValue() {
        return showValue;
    }
}

MainActivity.java

public class MainActivity extends AppCompatActivity {

    PopupWindow popupWindow;
    private ArrayList<DropDownItems> items = new ArrayList<DropDownItems>();

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

        items.add(new DropDownItems("Settings", 0, false));
        items.add(new DropDownItems("Likes", 10, true));

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu, menu);

        ImageButton item1 = (ImageButton) menu.findItem(R.id.more).getActionView().findViewById(R.id.dropDowmImageBtn);
        item1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showPopUpWindow(v);
            }
        });

        return true;
    }

    private void showPopUpWindow(View v) {

        DropDownAdapter adapter = new DropDownAdapter(v.getContext(), items);

        popupWindow = new PopupWindow(this);

        ListView listViewSort = new ListView(this);
        listViewSort.setDivider(null);
        listViewSort.setDividerHeight(0);
        listViewSort.setAdapter(adapter);

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

        popupWindow.showAsDropDown(v, 0, 0);
    }

    public class DropDownAdapter extends BaseAdapter {

        Context context;
        ArrayList<DropDownItems> items;

        public DropDownAdapter(Context context, ArrayList<DropDownItems> items) {
            this.context = context;
            this.items = items;
        }

        @Override
        public int getCount() {
            return items.size();
        }

        @Override
        public DropDownItems getItem(int position) {
            return items.get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            DropDownItems item = getItem(position);

            if(convertView==null){
                LayoutInflater inflater = (LayoutInflater) context
                        .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
                convertView = inflater.inflate(R.layout.drop_down_item_row, null);
            }

            final TextView itemText = (TextView) convertView.findViewById(R.id.dropDownItemName);
            final Button itemImage = (Button) convertView.findViewById(R.id.dropDownItemImage);

            itemText.setText(item.getTxt());
            itemText.setTag(item.getTxt());
            itemImage.setText(String.valueOf(item.getValue()));
            itemImage.setTag(item.getTxt());

            if(!item.getShowValue()) {
                itemImage.setVisibility(View.GONE);
            } else {
                itemImage.setVisibility(View.VISIBLE);
            }

            itemText.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(v.getContext(), "Clicked "+itemText.getTag(), Toast.LENGTH_LONG).show();

                    if(popupWindow!=null && popupWindow.isShowing()) {
                        popupWindow.dismiss();
                        popupWindow = null;
                    }

                }
            });

            return convertView;
        }
    }

}

res/drawable/ic_menu_moreoverflow_normal_holo_light.png