Making ActionBar beautiful by showing Count on ActionBar Icon

- Saturday, September 16, 2017
Creating drawable with layer-list
First of all, we will understand what are layer-list and how it works? Basically layer-list provides us a way to create a drawable icon using more than one items (drawable, bitmap etc.) and adding them in each layer of layer-list stack. Whichever layer is having higher index is visible on the top others can be seen below it. In xml the index increases as we go from top item to bottom item. So the item at the bottom in xml will be visible at the top of the resulting drawable and the item at the top in xml will be visible at the bottom of the resulting drawable.

For this article we need a create group icon and a count. So we can split them in two different layers. In bottom layer we can add create group icon and in the top layer we can put count drawable. In the code below you can see that we have created a drawable with layer-list, here count item gets higher index so it will be visible on the top of the create group icon.
Adding the icon created in step 1 to menu of the ActionBar
To add the drawable created above (actionbar_group_icon.xml) in Android ActionBar, we need to add it in the menu of the ActionBar. As shown in the above code it is really simple to add the created drawable in menu. The menu resource file can be found at res/menu folder.

Creating Custom Component to draw count on top layer
In the following code I have created a CountDrawable by extending Drawable class. Note: You must specify badge_count_textsize in your dimen.xml and background_color in your colors.xml file.

To set the count on the icon, use the following code: Done
Source Article



Start typing and press Enter to search