Add badge to tab

Question

How can I add a badge to tab ? I am using this code

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    viewPager = (ViewPager) findViewById(R.id.pager);
    actionBar = getActionBar();
    mAdapter = new TabsPagerAdapter(getSupportFragmentManager());

    viewPager.setAdapter(mAdapter);
    actionBar.setHomeButtonEnabled(false);
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);        

    // Adding Tabs
    for (String tab_name : tabs) {
        actionBar.addTab(actionBar.newTab().setText(tab_name)
                .setTabListener(this));
    }

    /**
     * on swiping the viewpager make respective tab selected
     * */
    viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

        @Override
        public void onPageSelected(int position) {
            // on changing the page
            // make respected tab selected
            actionBar.setSelectedNavigationItem(position);
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {
        }

        @Override
        public void onPageScrollStateChanged(int arg0) {
        }
    });
}

main activity.xml

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

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

</FrameLayout>

Tabs adapter java

public class TabsPagerAdapter extends FragmentPagerAdapter {

    public TabsPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int index) {

        switch (index) {
        case 0:

            return new RandomsFragment();
        case 1:
            return new ChatsFragment();
        }
        return null;
    }

    @Override
    public int getCount() {
        return 2;
    }

}

I am following this tutorial for tabs:http://www.androidhive.info/2013/10/android-tab-layout-with-swipeable-views-1/

I didn't understand how can I add a badge to tabs.

Already answered : https://stackoverflow.com/questions/25584010/badgeview-and-slidingtabstrip-clicking-error/46662175#46662175 — Tell Me How, Oct 10 '17 at 08:39

score 6 · Accepted Answer · answered Aug 30 '14 at 16:06

first step is creating custom layout for each tabs so:

     <?xml version="1.0" encoding="utf-8"?>
<TextView xmlns: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 :

     private void addTabs(ActionBar actionBar)
{
    ActionBar.Tab tab1=actionBar.newTab();

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

    ActionBar.Tab tab2=actionBar.newTab();

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

    ActionBar.Tab tab3=actionBar.newTab();
    tab3.setCustomView(R.layout.tab);
    tab3.setTabListener(this);
    TextView txt3 = (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 :

View v = getActionBar().getTabAt(0).getCustomView();
            BadgeView badge = new BadgeView(getActivity(), v);
            badge.setText("1");
            badge.show();

the result will be:

enter image description here

Hi man! could you help me on this topic? http://stackoverflow.com/q/39178561/6599627 — mahdi pishguy, Aug 27 '16 at 07:44

score 1 · Answer 2 · answered Oct 04 '16 at 21:18

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

<?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"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"      android:shape="oval" >
 <solid android:color="@color/colormaterialred500" />
 </shape>

Extend textview to get myBadgeView class:

public class myBadgeView extends TextView {

private View target;

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

private void init(Context context, View target) {
this.target = target;
}

public void updateTabBadge(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.Tab tab1 = tabLayout.newTab();
tab1.setCustomView(R.layout.tab_badge);
TextView tab_text_1 = (TextView) tab1.getCustomView().findViewById(R.id.tab_text);
tab_text_1.setText("Tab1");
tabLayout.addTab(tab1);
badge1 = new myBadgeView(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);

I've modified it a bit with some tweaks to support icons as well and removed myBadgeView class as there's no need for that — Desolator, Sep 13 '17 at 04:59

score 0 · Answer 3 · answered Aug 27 '14 at 22:16

0

AFAIK, badge is not supported out of the box. You may find this library helpful: https://github.com/jgilfelt/android-viewbadger

answered Aug 27 '14 at 22:16

huy.nguyen

454
2
9

How can I use it ? View target = findViewById(R.id.target_view); I need a target,but I can't see any target for tabs. ? – Tolgay Toklar Aug 27 '14 at 22:27
You can set a custom view to a tab (http://developer.android.com/reference/android/app/ActionBar.Tab.html#setCustomView(int)) – huy.nguyen Aug 27 '14 at 22:46

Add badge to tab

3 Answers3

Linked