Using a custom template for actionbar menu item

Question

I am trying to display a menu with text and icon always visible. I have defined my item layout as following

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?attr/selectableItemBackground"
    android:clickable="true"
    android:drawableLeft="@drawable/ic_cart"
    android:gravity="center"
    android:orientation="vertical"
    android:text="(0)"
    android:drawablePadding="5dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:textColor="@android:color/white" />

And the menu is defined as following

<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="com.taptoscan.taptoscan.MainActivity">

    <item
        android:id="@+id/action_sign"
        android:title="(0)"
        app:showAsAction="always|withText"
        app:actionLayout="@layout/menu_sign" />

    <item
        android:id="@+id/action_settings"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
</menu>

I'm having an issue with enabling the ripple effect on the background. It works but the ripple effect is not rounded, lik on a regular menu icon. It's square shaped and looks kinda ugly. What would be the best way to achieve the native ripple effect look on a custom menu item?

EDIT: This is what it looks like

Answer 1

NOTE: Better solution found, check the edit

I figured it out. First I created a background drawable with rounded corners, like this:

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">

        <padding
            android:bottom="5dp"
            android:left="5dp"
            android:right="5dp"
            android:top="5dp" />

        <corners android:radius="5dp" />

    </shape>
</ripple>

After that, I set the TextView's background as the drawable from above. Ripple effect works as intended and it's all rounded like on default menu items.

EDIT

After further messing around with the custom menu item, I have found out that just by using a TextView without a root element will cause TextView's baseline to be changed after clicking on another menu item and then clicking back on the custom one. The solution is using the following layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clickable="true"
    android:background="@drawable/btn_actionbar_icon">

    <TextView
        android:id="@+id/icon_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:drawableLeft="@drawable/ic_cart"
        android:drawablePadding="5dp"
        android:gravity="center_vertical"
        android:padding="10dp"
        android:text="(0)"
        android:textColor="@android:color/white"
        android:textSize="14sp" />

</RelativeLayout>