androidandroid-layoutandroid-actionbarbadge

Notification Badge On Action Item Android


I wana add a notification badge on the cart image placed in action bar and manipulate it programmatically. Any Help?


Solution

  • You can show custom MenuItem on ActionBar by creating a custom layout for MenuItem. To set a custom layout you have to use menu item attribute app:actionLayout.

    Follow below steps to create a Badge on Cart action item. See the attached image for result.

    1. Create a custom layout with ImageView(for cart icon) and TextView(for count value)

    layout/custom_action_item_layout.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout
        style="?attr/actionButtonStyle"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        android:focusable="true">
    
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/ic_action_cart"/>
    
        <TextView
            android:id="@+id/cart_badge"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="right|end|top"
            android:layout_marginEnd="-5dp"
            android:layout_marginRight="-5dp"
            android:layout_marginTop="3dp"
            android:background="@drawable/badge_background"
            android:gravity="center"
            android:padding="3dp"
            android:textColor="@android:color/white"
            android:text="0"
            android:textSize="10sp"/>
    
    </FrameLayout>
    
    1. Create drawable circular badge background using Shape.

    drawable/badge_background.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
    
        <solid android:color="@android:color/holo_red_dark"/>
        <stroke android:color="@android:color/white" android:width="1dp"/>
    
    </shape>
    
    1. Add custom layout to menu item.

    menu/main_menu.xml

    <menu 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto" >
    
        <item
            android:id="@+id/action_cart"
            android:icon="@drawable/ic_action_cart"
            android:title="Cart"
            app:actionLayout="@layout/custom_action_item_layout"
            app:showAsAction="always"/>
    
    </menu>
    
    1. In your MainActivity, add following codes:

    MainActivity.java:

    public class MainActivity extends AppCompatActivity {
        ................
        ......................
        TextView textCartItemCount;
        int mCartItemCount = 10;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            .....................
            ............................
        }
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.main_menu, menu);
    
            final MenuItem menuItem = menu.findItem(R.id.action_cart);
    
            View actionView = menuItem.getActionView();
            textCartItemCount = (TextView) actionView.findViewById(R.id.cart_badge);
    
            setupBadge();
    
            actionView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    onOptionsItemSelected(menuItem);
                }
            });
    
            return true;
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
    
            switch (item.getItemId()) {
    
                case R.id.action_cart: {
                    // Do something
                    return true;
                }
            }
            return super.onOptionsItemSelected(item);
        }
    
        private void setupBadge() {
    
            if (textCartItemCount != null) {
                if (mCartItemCount == 0) {
                    if (textCartItemCount.getVisibility() != View.GONE) {
                        textCartItemCount.setVisibility(View.GONE);
                    }
                } else {
                    textCartItemCount.setText(String.valueOf(Math.min(mCartItemCount, 99)));
                    if (textCartItemCount.getVisibility() != View.VISIBLE) {
                        textCartItemCount.setVisibility(View.VISIBLE);
                    }
                }
            }
        }
    
        ..................
        ..............................
    
    }
    

    OUTPUT:

    enter image description here