Add Badge To Tab

December 21, 2023 Post a Comment

How can I add a badge to tab ? I am using this code protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activit

Solution 1:

first step is creating custom layout for each tabs so:

<?xml version="1.0" encoding="utf-8"?><TextViewxmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/text1"android:layout_width="fill_parent"android:layout_height="wrap_content"android:textAppearance="?android:attr/textAppearanceLarge"android:gravity="center_vertical"android:paddingLeft="6dip"android:minHeight="?android:attr/listPreferredItemHeight"
/>

then when you want to add tabs to actionbar you must do :

privatevoidaddTabs(ActionBar actionBar)
{
    ActionBar.Tab tab1=actionBar.newTab();

    tab1.setTabListener(this);
    tab1.setCustomView(R.layout.tab);
    TextViewtxt1= (TextView)tab1.getCustomView().findViewById(R.id.text1);
    txt1.setText("Tab 1");

    ActionBar.Tab tab2=actionBar.newTab();

    tab2.setTabListener(this);
    tab2.setCustomView(R.layout.tab);
    TextViewtxt2= (TextView)tab2.getCustomView().findViewById(R.id.text1);
    txt2.setText("Tab 2");

    ActionBar.Tab tab3=actionBar.newTab();
    tab3.setCustomView(R.layout.tab);
    tab3.setTabListener(this);
    TextViewtxt3= (TextView)tab3.getCustomView().findViewById(R.id.text1);
    txt3.setText("Tab 3");

    actionBar.addTab(tab1);
    actionBar.addTab(tab2);
    actionBar.addTab(tab3);
}

so in order to access them and add badgeView :

Viewv= getActionBar().getTabAt(0).getCustomView();
            BadgeViewbadge=newBadgeView(getActivity(), v);
            badge.setText("1");
            badge.show();

the result will be:

enter image description here

Solution 2:

After tweaking around with a few other solutions I came up with something simple and hope this would help someone.

create a custom tab layout tab_badge.xml

Baca Juga

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/transparent">

<TextView
android:id="@+id/tab_badge"android:layout_width="30dp"android:layout_height="30dp"android:background="@drawable/badge_background"android:gravity="center"android:layout_centerVertical="true"android:textColor="@color/colorWhite"android:textSize="20sp"android:textStyle="bold"/>

<TextView
android:id="@+id/tab_text"android:layout_width="match_parent"android:layout_height="match_parent"android:textSize="16sp"android:textColor="@color/colorWhite"android:text="test"android:textStyle="bold"android:gravity="center"android:textAppearance="@style/Widget.AppCompat.Light.ActionBar.TabText"android:layout_toRightOf="@+id/tab_badge"/>

</RelativeLayout>

badge_background.xml is an oval drawable filled with the color you want for the badge

<?xml version="1.0" encoding="utf-8"?><shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval" ><solidandroid:color="@color/colormaterialred500" /></shape>

Extend textview to get myBadgeView class:

publicclassmyBadgeViewextendsTextView {

privateView target;

publicmyBadgeView(Context context, View target) {
super(context);
init(context, target);
}

privatevoidinit(Context context, View target) {
this.target = target;
}

publicvoidupdateTabBadge(int badgeNumber) {
if (badgeNumber > 0) {
    target.setVisibility(View.VISIBLE);
    ((TextView) target).setText(Integer.toString(badgeNumber));
}
else {
    target.setVisibility(View.GONE);
}
}
}

In your activity declare the tablayout as follows:

tabLayout = (TabLayout) findViewById(R.id.tab_layout);
TabLayout.Tabtab1= tabLayout.newTab();
tab1.setCustomView(R.layout.tab_badge);
TextViewtab_text_1= (TextView) tab1.getCustomView().findViewById(R.id.tab_text);
tab_text_1.setText("Tab1");
tabLayout.addTab(tab1);
badge1 = newmyBadgeView(this,     tab1.getCustomView().findViewById(R.id.tab_badge));     tab1.getCustomView().findViewById(R.id.tab_badge);

 //set the badge for the tab
 badge1.updateTabBadge(badge_value_1);