Making ActionBar beautiful by showing Count on ActionBar Icon
In today’s market, if you want to succeed, you not only need the great product but also need great UX (User Experience). So, in android apps whenever you have select items functionality and CTA(Call to Action) button in ActionBar then showing a count of the number of selected items on CTA Icon Button makes a great UX. Like shown in the image below, we had a create group functionality in one of the projects, so we added a count on the create group icon.
There is one easy way to implement icon with a count in Android ActionBar.
- Create different icons for each state and add all in your project. Whenever, you need to change the count you change the icon drawable itself. This solution is costly in terms of the size as you need n drawables if the icon has n possible states, so the size would increase by (n-1)*(size of image).
So, in this article we will go through other solution which is very efficient. We will use layer-list for the ActionBar icon. The bottom layer will remain same and the top layer will keep changing as count changes. We will add custom component to draw the top layer.
Step 1: 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.
Step 2: 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.
Step 3: 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.
Step 4: Usage
To set the count on the icon, use the following code:
And you’re done!
Viola!! You have created an awesome icon with count for your ActionBar.
Note: In this article I have used the count drawable for ActionBar only, but the use is not restricted for ActionBar only. You can apply this drawable anywhere on the screen.
Please clap for this article to show your support and help me to reach out to larger audience. Please follow me to get future updates about my blogs.
In case of any queries comment below or drop me an email on rajsuvariya@gmail.com.
Also, if you want to get email notifications then please submit your email id in the form below.
