Tabs with numbers like in WhatsApp

CircleSpan.java

package com.cornershopapp.shopper.android.utils;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.text.style.ReplacementSpan;

import com.cornershopapp.shopper.android.R;

/**
 * Created by romantolmachev on 14/7/15.
 */
public class CircleSpan extends ReplacementSpan {

    private int radius;
    private int yMargin;

    private int oneDigitTextSize;
    private int oneDigitTextXMargin;
    private int oneDigitTextYMargin;

    private int twoDigitTextSize;
    private int twoDigitTextXMargin;
    private int twoDigitTextYMargin;

    private int threeDigitTextSize;
    private int threeDigitTextXMargin;
    private int threeDigitTextYMargin;

    private int textColor;
    private int count;

    public CircleSpan(Context context, int textColor, int count) {
        this.radius = context.getResources().getInteger(R.integer.circle_radius);
        this.yMargin = context.getResources().getInteger(R.integer.circle_y_margin);

        this.oneDigitTextSize = context.getResources().getInteger(R.integer.circle_one_digit_text_size);
        this.oneDigitTextXMargin = context.getResources().getInteger(R.integer.circle_one_digit_text_x_margin);
        this.oneDigitTextYMargin = context.getResources().getInteger(R.integer.circle_one_digit_text_y_margin);

        this.twoDigitTextSize = context.getResources().getInteger(R.integer.circle_two_digit_text_size);
        this.twoDigitTextXMargin = context.getResources().getInteger(R.integer.circle_two_digit_text_x_margin);
        this.twoDigitTextYMargin = context.getResources().getInteger(R.integer.circle_two_digit_text_y_margin);

        this.threeDigitTextSize = context.getResources().getInteger(R.integer.circle_three_digit_text_size);
        this.threeDigitTextXMargin = context.getResources().getInteger(R.integer.circle_three_digit_text_x_margin);
        this.threeDigitTextYMargin = context.getResources().getInteger(R.integer.circle_three_digit_text_y_margin);

        this.textColor = textColor;
        this.count = count;
    }

    @Override
    public int getSize(Paint paint, CharSequence text, int start, int end, Paint.FontMetricsInt fm) {
        return radius;
    }

    @Override
    public void draw(Canvas canvas, CharSequence text, int start, int end, float x, int top, int y, int bottom, Paint paint) {
        canvas.drawCircle(x, y - yMargin, radius, paint);
        paint.setColor(textColor);
        if(count < 10) {
            paint.setTextSize(oneDigitTextSize);
            canvas.drawText(count + "", x - oneDigitTextXMargin - radius/2, y - oneDigitTextYMargin, paint);
        } else if(count < 100) {
            paint.setTextSize(twoDigitTextSize);
            canvas.drawText(count + "", x - twoDigitTextXMargin - radius/2, y - twoDigitTextYMargin, paint);
        } else {
            paint.setTextSize(threeDigitTextSize);
            canvas.drawText(count + "", x - threeDigitTextXMargin - radius/2, y - threeDigitTextYMargin, paint);
        }
    }
}

SomeTabsActivity.java

/**
     * Spannable Tabs title with number in circle
     * Usage: ordersTabs.getTabAt(1).setText(getSpannableTitle(getString(R.string.found_many), count));
     *
     * @param label Text label
     * @param count Items count
     * @return
     */
    private SpannableStringBuilder getSpannableTitle(String label, int count) {
        SpannableStringBuilder sb = new SpannableStringBuilder();
        sb.append(label.toUpperCase());

        if (count == 0) {
            return sb;
        }

        sb.append("     ");
        sb.setSpan(new CircleSpan(this, primaryColor, count), label.length() + 4, label.length() + 5, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        return sb;
    }

values-hdpi

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <integer name="circle_radius">14</integer>
    <integer name="circle_y_margin">8</integer>

    <integer name="circle_one_digit_text_size">21</integer>
    <integer name="circle_one_digit_text_x_margin">-1</integer>
    <integer name="circle_one_digit_text_y_margin">0</integer>

    <integer name="circle_two_digit_text_size">20</integer>
    <integer name="circle_two_digit_text_x_margin">4</integer>
    <integer name="circle_two_digit_text_y_margin">1</integer>

    <integer name="circle_three_digit_text_size">14</integer>
    <integer name="circle_three_digit_text_x_margin">5</integer>
    <integer name="circle_three_digit_text_y_margin">3</integer>

</resources>

values-mdpi

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <integer name="circle_radius">12</integer>
    <integer name="circle_y_margin">8</integer>

    <integer name="circle_one_digit_text_size">21</integer>
    <integer name="circle_one_digit_text_x_margin">-1</integer>
    <integer name="circle_one_digit_text_y_margin">0</integer>

    <integer name="circle_two_digit_text_size">18</integer>
    <integer name="circle_two_digit_text_x_margin">5</integer>
    <integer name="circle_two_digit_text_y_margin">1</integer>

    <integer name="circle_three_digit_text_size">13</integer>
    <integer name="circle_three_digit_text_x_margin">5</integer>
    <integer name="circle_three_digit_text_y_margin">2</integer>

</resources>

values-xhdpi

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <integer name="circle_radius">18</integer>
    <integer name="circle_y_margin">10</integer>

    <integer name="circle_one_digit_text_size">28</integer>
    <integer name="circle_one_digit_text_x_margin">-1</integer>
    <integer name="circle_one_digit_text_y_margin">0</integer>

    <integer name="circle_two_digit_text_size">26</integer>
    <integer name="circle_two_digit_text_x_margin">7</integer>
    <integer name="circle_two_digit_text_y_margin">0</integer>

    <integer name="circle_three_digit_text_size">17</integer>
    <integer name="circle_three_digit_text_x_margin">7</integer>
    <integer name="circle_three_digit_text_y_margin">3</integer>

</resources>

values-xxhdpi

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <integer name="circle_radius">26</integer>
    <integer name="circle_y_margin">14</integer>

    <integer name="circle_one_digit_text_size">38</integer>
    <integer name="circle_one_digit_text_x_margin">-1</integer>
    <integer name="circle_one_digit_text_y_margin">0</integer>

    <integer name="circle_two_digit_text_size">32</integer>
    <integer name="circle_two_digit_text_x_margin">5</integer>
    <integer name="circle_two_digit_text_y_margin">1</integer>

    <integer name="circle_three_digit_text_size">24</integer>
    <integer name="circle_three_digit_text_x_margin">8</integer>
    <integer name="circle_three_digit_text_y_margin">4</integer>

</resources>

values-xxxhdpi

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <integer name="circle_radius">32</integer>
    <integer name="circle_y_margin">17</integer>

    <integer name="circle_one_digit_text_size">50</integer>
    <integer name="circle_one_digit_text_x_margin">-1</integer>
    <integer name="circle_one_digit_text_y_margin">0</integer>

    <integer name="circle_two_digit_text_size">40</integer>
    <integer name="circle_two_digit_text_x_margin">7</integer>
    <integer name="circle_two_digit_text_y_margin">1</integer>

    <integer name="circle_three_digit_text_size">29</integer>
    <integer name="circle_three_digit_text_x_margin">10</integer>
    <integer name="circle_three_digit_text_y_margin">4</integer>

</resources>