Tolgay Toklar Tolgay Toklar - 1 month ago 23
Android Question

Add badge to tab

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.

Answer

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

Comments