Custom menu item in Toolbar

Question

I'm trying to create a custom layout to my item menu. I need an icon with an image to show a shopping cart like this:

I create a custom relative layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="48dp"
    android:layout_height="fill_parent"
    android:layout_gravity="right" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:clickable="true"
        android:src="@drawable/ic_shopping_cart"/>

    <TextView
        android:id="@+id/counter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:padding="8dp"
        android:text="5"
        android:textSize="15sp"
        android:textColor="#ffffff" />

</RelativeLayout>

And the item menu:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/icon_shopping_cart"
        android:actionLayout="@layout/shopping_cart"
        android:title="@string/shopping_icon_description"
        app:showAsAction="always" />
</menu>

Does anyone know how to do it?

Thanks in advance

EDIT:

MainActivity.java

    public class Prueba extends AppCompatActivity {

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

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

        toolbar.inflateMenu(R.id.shopping_cart);

    }

}

Answer 1

If you want counter in toolbar try ActionBarMenuItemCounter,it worked for me

private Drawable buildCounterDrawable(int count, int backgroundImageId) {
LayoutInflater inflater = LayoutInflater.from(this);
View view = inflater.inflate(R.layout.counter_menuitem_layout, null);
view.setBackgroundResource(backgroundImageId);

if (count == 0) {
    View counterTextPanel = view.findViewById(R.id.counterValuePanel);
    counterTextPanel.setVisibility(View.GONE);
} else {
    TextView textView = (TextView) view.findViewById(R.id.count);
    textView.setText("" + count);
}

view.measure(
        View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
        View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());

view.setDrawingCacheEnabled(true);
view.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH);
Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
view.setDrawingCacheEnabled(false);

return new BitmapDrawable(getResources(), bitmap);
}