Unread Notifications/Messages counter within the app (in tabs) android

Question

I want to achieve something similar to the following image:

Problem: how can we achieve red coloured, unread counter? am I going to design some psd and then reuse it in the app? but then I have to duplicate alot of .png's for each number (let's say my limit is 99 for that). but that would be redundancy.

What is the best practice to achieve this effect ?

Answer 1

You could create a custom View and override the onDraw() method to draw the numbers. What you would probably want to do is to have an icon fully prepared like above except for the number missing in the red circle. Then, in the custom View, you first draw that icon and then you draw the number (you will have to work a little to figure our the precise position in pixels where to draw it, and how to draw it, i.e. text-size, font, color).

Modulo a method getSomeBitmapFromResources() that imports a bitmap from resources (see e.g. here), your custom View could look something like this:

public class MyView extends View {

    //Fields:

    private Paint paint; //Need a Paint object for colors, fonts, etc.
    private RectF rect;
    private int numberToPaint;

    //Constructors:

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        paint = new Paint();

        //Choose the text properties that work for you here:
        paint.setColor(Color.WHITE);
        paint.setTypeface(Typeface.create("sans-serif", Typeface.BOLD));
        paint.setTextSize(12);
    }

    public MyView(Context context) {
        this(context, null);
    }

    //Most importantly: override onDraw for rendering of the view:

    @Override
    protected void onDraw(Canvas canvas) {
        rect.set(0, 0, getWidth(), getHeight()); //But: make sure your View 
            //will have the same size of the Bitmap you use! Set the size in XML!

        canvas.drawBitmap(getSomeBitmapFromResources(), null, rect, paint);

        //Here you will have to carefully choose the position of the text.
        //Also consider that depending on numberToPaint the x-coordinate may have to
        //be modified. Likely you want to use the Paint.getTextBounds method determine the size.
        canvas.drawText("" + numberToPaint, 60, 30, paint);
    }

    public void chooseNumberAndDraw(int n) {
        numberToPaint = n;
        postInvalidate(); //Force redraw
    }

}

In XML, you want to add your custom View using a tag like

<com.mysite.myproject.MyView
    android:layout_width="64dp"
    android:layout_height="64dp"
/>

of course replacing width and height by the actual bitmap dimensions.

Answer 2

Use public TabLayout.Tab setCustomView (int layoutResId)

Create a Layout with TextView and Button use this in Custom view. you may use textView for showing counter.

For reference
setCustomView
Following is the complete Example:
Example

You can also use this library.