Menu Item icon getting overlapped in API 23

Question

I was creating a cart menu icon with Badge and layler-list but I found that on API 23 the menu icon is getting unwanted background.

activity_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/action_cart1"
        android:icon="@drawable/ic_menu_cart"
        android:title="Cart"
        app:showAsAction="always" />
</menu>

ic_menu_cart.xml

  <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/cart"
        android:gravity="center" />

    <!-- set a place holder Drawable so android:drawable isn't null -->
    <item
        android:id="@+id/ic_badge"
        android:drawable="@drawable/cart" />
</layer-list>

below is the code to update the cart count.

  public static void setBadgeCount(Context context, LayerDrawable icon, String count) {

        BadgeDrawable badge;

        // Reuse drawable if possible
        Drawable reuse = icon.findDrawableByLayerId(R.id.ic_badge);
        if (reuse != null && reuse instanceof BadgeDrawable) {
            badge = (BadgeDrawable) reuse;
        } else {
            badge = new BadgeDrawable(context);
        }

        badge.setCount(count);
        icon.mutate();
        icon.setDrawableByLayerId(R.id.ic_badge, badge);
    }

I have created the the xml for different API's, but didn't work. I want to remove the background. Kindly help!!

Answer 1

As I am understand you have to add badge count and icon. So add below way it works.

app:actionLayout="@layout/notification_layout"

in the <item> and Create notification_layout.xml layout and set what you want.

so your activity_main.xml looks like this.

<?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/action_cart1"
        android:orderInCategory="100"
        android:icon="@drawable/ic_menu_cart"
        android:title="Cart"
        app:showAsAction="always"
        android:title="ABD"
        app:actionLayout="@layout/notification_layout" />
</menu>

notification_layout.xml

<?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"
    android:layout_width="40.0dip"
    android:layout_height="wrap_content"
    android:layout_gravity="right"
    android:clickable="false"
    android:focusable="false"
    android:focusableInTouchMode="false">
<!-- Menu Item Image -->
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:clickable="false"
        android:focusable="false"
        android:focusableInTouchMode="false"
        android:scaleType="center"
        android:src="@drawable/ic_navigation_cart_white" />
<!-- Badge Count -->
    <TextView
        android:id="@+id/actionbar_notifcation_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginTop="12.0dip"
        android:layout_marginRight="5.0dip"
        android:gravity="center"
        android:minHeight="15.0dip"
        android:minWidth="15.0dip"
        android:paddingLeft="3.0dip"
        android:paddingRight="3.0dip"
        android:textSize="10.0sp"
        android:background="@drawable/TextView_design"
        android:textColor="@android:color/white" />
</RelativeLayout>

Output like this :