Overflow button overlap other actions icon in ActionMenuView

Question

I Used ActionMenuView to render menus. But the overflow button of ActionMenuView overlap last action icon:

This is my code:

<RelativeLayout
    android:id="@+id/main_topBar"
    android:layout_width="match_parent"
    android:layout_height="90dp"
    android:background="@drawable/header_pattern_back"
    android:animateLayoutChanges="true"
    android:padding="0dp">

    <ImageView
        android:id="@+id/main_backBtn"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/arrow_back_white"
        android:padding="4dp"
        android:layout_margin="8dp"/>

    <androidx.appcompat.widget.ActionMenuView
        android:id="@+id/main_topbar_menu"
        android:layout_width="wrap_content"
        android:layout_height="56dp"
        android:layout_alignParentRight="true"
        android:gravity="center_vertical|left"/>
</RelativeLayout>

and in java

ActionMenuView menuView = findViewById(R.id.main_topbar_menu);

MenuBuilder menuBuilder = (MenuBuilder) menuView.getMenu();
getActivity().getMenuInflater().inflate(R.menu.recieved_letter_commands, menuBuilder);

R.menu.recieved_letter_commands.xml file:

<?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/letterCommand_delete"
        android:title="delete"
        android:icon="@drawable/ic_delete_white_24dp"
        app:showAsAction="always"
        android:iconTint="#777"/>
    <item
        android:id="@+id/letterCommand_archive"
        app:showAsAction="always"
        android:title="archive"
        android:icon="@drawable/ic_archive_income"
        android:iconTint="#777" />

    <item
        android:id="@+id/letterCommand_ref"
        android:title="Refrences"
        app:showAsAction="always"
        android:iconTint="#777"
        android:icon="@drawable/ic_reply_gray"/>

    <item
        android:id="@+id/letterCommand_receivers"
        android:title="Recievers"
        app:showAsAction="never"
        android:iconTint="#777"/>

    <item
        android:id="@+id/letterCommand_moveToFolder"
        android:title="Move To Folder..."
        app:showAsAction="never"
        android:iconTint="#777"/>

    <item
        android:id="@+id/letterCommand_setUnread"
        android:title="Set as unread"
        app:showAsAction="never"
        android:iconTint="#777"/>

    <item
        android:id="@+id/letterCommand_close"
        android:title="Close"
        app:showAsAction="never"
        android:iconTint="#777"/>

    <item
        android:id="@+id/letterCommand_note"
        android:title="Note"
        app:showAsAction="never"
        android:iconTint="#777"/>
</menu>

Question edited and added recieved_letter_commands.xml content — Ali.M, Oct 12 '21 at 17:12
There is no issue with R.menu.recieved_letter_commands.xml but there is some issue in your Relative layout. — Parmesh, Oct 12 '21 at 17:23
Any specific reason for you not to use action bar or toolbar? — Parmesh, Oct 12 '21 at 17:26
can you put sample code on GitHub and provide link, if will try to fix it. — Parmesh, Oct 12 '21 at 17:30
I haven't yet pinpointed why, but it's the `RelativeLayout` that breaks that, for some reason, for both the androidx `ActionMenuView` as well as the platform one. Every other `ViewGroup` I put them inside of works as expected – `LinearLayout`, `FrameLayout`, `Toolbar`, `CoordinatorLayout`, `ConstraintLayout`, etc. – so using a different `ViewGroup` for your `main_topBar` might be another option for you. — Mike M., Oct 13 '21 at 01:46
That turns out to be specific to this setup. `RelativeLayout` runs two measure passes over its children for a single layout, and this ends up confusing the logic in `ActionMenuView`'s `onMeasure()` and `onLayout()`. The simplest fix is probably as I mentioned above; just change the parent `ViewGroup` to something other than `RelativeLayout`, if possible. If that must be a `RelativeLayout`, the next simplest solution would be to wrap the `` in a ``. Beyond those options, anything in code would likely require subclassing `RelativeLayout` and/or `ActionMenuView`. — Mike M., Oct 15 '21 at 04:05

score 0 · Answer 1 · answered Oct 13 '21 at 01:16

You can use a customized style for the OverflowButton:

First add the more_vert (3 dots) vector icon to the res\drawable.
Then use the below style that adds the icon, and padding to it

<style name="customoverflow">
    <item name="android:src">@drawable/ic_baseline_more_vert_24</item>
    <item name="android:paddingStart">32dp</item>
</style>

Apply the style in the main application theme:

<item name="android:actionOverflowButtonStyle">@style/customoverflow</item>

Overflow button overlap other actions icon in ActionMenuView

1 Answers1