TabView.java

readme.md

you can use like this

TabView chatTab = new TabView(this);
chatTab.setBadgeCount(99);
chatTab.setLabel(R.string.txt_conversation);
tabLayout.addTab(tabLayout.newTab().setCustomView(chatTab));

example.png

TabView.java

import android.content.Context;
import android.graphics.Color;
import android.os.Build;
import android.support.annotation.Nullable;
import android.support.annotation.RequiresApi;
import android.support.annotation.StringRes;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * @author yuana <[email protected]>
 * @since 9/29/17
 */

public class TabView extends LinearLayout {

    private TextView tvLabel;
    private TextView tvCounter;
    private ImageView ivBgCounter;
    private FrameLayout flBadge;

    public TabView(Context context) {
        super(context);
        init(null);
    }

    public TabView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(attrs);
    }

    public TabView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public TabView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init(attrs);
    }

    private void init(AttributeSet attrs) {
        LayoutInflater inflater = (LayoutInflater) getContext()
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.view_tab, this);

        initView(view);
    }

    private void initView(View v) {
        tvLabel = (TextView) v.findViewById(R.id.tvLabel);
        tvCounter = (TextView) v.findViewById(R.id.tvCounter);
        ivBgCounter = (ImageView) v.findViewById(R.id.ivBgCounter);
        flBadge = (FrameLayout) v.findViewById(R.id.flBadge);
    }

    public void setLabel(String label) {
        tvLabel.setText(label);
    }

    public void setLabel(@StringRes int stringRes) {
        tvLabel.setText(stringRes);
    }

    public void setBadgeCount(int badgeCount) {
        flBadge.setVisibility(badgeCount > 0 ? VISIBLE : GONE);
        tvCounter.setText(badgeCount > 99 ? "99+" : String.valueOf(badgeCount));
    }

    @Override
    public void setSelected(boolean selected) {
        super.setSelected(selected);

        tvLabel.setTextColor(selected ? Color.WHITE : Color.parseColor("#fc959b"));
        ivBgCounter.setImageResource(selected ? R.drawable.bg_circle_white :
                R.drawable.bg_circle_primary_light);
    }
}

view_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <TextView
        android:id="@+id/tvLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="5dp"
        android:textColor="@color/white" />

    <FrameLayout
        android:id="@+id/flBadge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="gone">

        <ImageView
            android:id="@+id/ivBgCounter"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:background="@drawable/bg_circle_white" />

        <TextView
            android:id="@+id/tvCounter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="99"
            android:textColor="@color/colorPrimary"
            android:textSize="12sp" />

    </FrameLayout>

</LinearLayout>