Custom layout does not fit in MenuItem properly

[patermark]

I'm trying to put a Layout into a MenuItem, which works, but it seems that the layout is placed next to a space reserved for the icon and title.

This is my output:


And this is the code used for the 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
        app:actionLayout="@layout/drawer_list_item"
        android:id="@+id/nav_item_inbox"
        android:visible="true"
        />
 
    <item android:title="Using a regular MenuItem"
        android:id="@+id/nav_item_sent"
        android:icon="@android:drawable/ic_input_add"
        android:visible="true"
        />
</menu>

drawer_list_item.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="@drawable/temporary_border_layout">
 
    <ImageView
        android:id="@+id/icon"
        android:layout_width="25dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginLeft="12dp"
        android:layout_marginRight="12dp"
        android:contentDescription="Test"
        android:src="@android:drawable/ic_input_add"
        android:layout_centerVertical="true" />
 
    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_toRightOf="@id/icon"
        android:minHeight="?android:attr/listPreferredItemHeightSmall"
        android:textAppearance="?android:attr/textAppearanceListItemSmall"
        android:textColor="@android:color/black"
        android:gravity="center_vertical"
        android:paddingRight="40dp"
        android:text="Using the layout as MenuItem"/>
 
    <TextView android:id="@+id/counter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/counter_bg"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="8dp"
        android:textColor="@android:color/white"
        android:text="3"/>
 
</RelativeLayout>

As can be seen from the output, the counter TextView is not displayed on the screen (due to the layout being pushed to the right).

Does anyone know a fix such that the relativelayout starts at the same position a regular MenuItem would start?

Thanks in advance.

 

[patermark]

I have tried to implement a simple RelativeLayout with a TextView as layout, but this gives the same strange behaviour:

This is the code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="@drawable/temporary_border_layout">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:minHeight="?android:attr/listPreferredItemHeightSmall"
        android:textAppearance="?android:attr/textAppearanceListItemSmall"
        android:textColor="@android:color/black"
        android:text="Using the layout as MenuItem"/>

</RelativeLayout>

Using a LinearLayout gives the same strange output.

I'm very confused at the moment:'(

Perhaps someone knows how to help with this new information?

Thanks in advance.