Develop Reference

TabLayout with ViewPager on new tab selection previous tab text disappers

I'm using TabLayout with ViewPager for showing data as requested.
In tab layout, my requirement is, I've to set a different font for the selected item and a different one for others. I write the following code for this.
But I'm facing one issue. Suppose I've 4 items "One", "Two", "Three" and "Four". Initially "One" is default selected with Bold font, and others are with normal font. But when I click "Two" tab "One" tab disappears. When I click on "Three" tab "Two" tab disappears and "One" tab visible with normal font.
private void setupViewPager(CustomViewPager viewPager, TabLayout tabLayout, ArrayList<TipsInfo> mListTips) {
adapter = new ViewPagerAdapter(getChildFragmentManager());
for (int i = 0; i < mListTips.size(); i++) {
if (!TextUtils.isEmpty(mListTips.get(i).getValue()))
adapter.addFragment(TipsDetailFragment.newInstance(mListTips.get(i).getValue()), mListTips.get(i).getLabel());
}
viewPager.setAdapter(adapter);
tabLayout.setupWithViewPager(viewPager);
View tabContent = LayoutInflater.from(requireContext()).inflate(R.layout.item_tips_tablayout_selected, null);
TextView selected = tabContent.findViewById(R.id.tv_tips_selected_tab);
View tabContent1 = LayoutInflater.from(requireContext()).inflate(R.layout.item_tips_tablayout_unselected, null);
TextView unselected = tabContent1.findViewById(R.id.tv_tips_unselected_tab);
tabLayout.addOnTabSelectedListener(
new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
selected.setText(tab.getText());
tab.setCustomView(selected);
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
unselected.setText(tab.getText());
tab.setCustomView(unselected);
//
// for(int i=0; i<tabLayout.getTabCount(); i++){
// if(i != tabLayout.getSelectedTabPosition()){
// unselected.setText(tabLayout.getTabAt(i).getText());
// tabLayout.getTabAt(i).setCustomView(unselected);
// }
// }
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
onTabSelected(tab);
}
}
);
}
My ViewPaerAdapter is extended with FragmentStatePagerAdapter and its object is created with getChildFragmentManager. My XML code look's like this:
<com.google.android.material.tabs.TabLayout
android:id="#+id/tl_tips"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorWhite"
android:elevation="#dimen/v1dp"
android:visibility="invisible"
app:tabGravity="fill"
android:gravity="start"
app:tabMinWidth="#dimen/v100dp"
android:textAlignment="viewStart"
app:tabIndicatorFullWidth="false"
app:tabIndicatorColor="#color/colorBannerNewDotSelected"
app:tabMode="scrollable"
android:layout_gravity="start"
app:tabIndicatorHeight="#dimen/v3dp"
app:tabSelectedTextColor="#color/colorBlackDark"
app:tabTextAppearance="#style/MyTabLayoutTextAppearance"
app:tabTextColor="#color/colorServiceCount"
/>
item_tips_tablayout_selected and item_tips_tablayout_unselected contains only TextView with different fonts applied to it.
Screenshots:
Initial
When clicked on "Benefits", the font applied to it but "How to use" disappeared.
When clicked on "Product Use", the font applied to it, "How to use" appeared with normal font, and "Benefits" tab disappeared.

It basically does what you wrote in your code.
tabLayout.addOnTabSelectedListener(
new TabLayout.OnTabSelectedListener() {
#Override
//as tab 2 selected it set text to tab 2
public void onTabSelected(TabLayout.Tab tab) {
selected.setText(tab.getText());
tab.setCustomView(selected);
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
//as tab 1 unselected it set NO text to tab 1 in it
unselected.setText(tab.getText());
tab.setCustomView(unselected);
Why to set CustomView every time when you just need to change the typeface?
I have an Kotlin code that was converted to JAVA code, it looks like shit in JAVA, but it works:
private void setTypefaceToTab(Context context, TabLayout tabLayout, TabLayout.Tab tab, int stylem) {
if (tab != null && context != null) {
try {
View var10000 = ((ViewGroup)tabLayout.getChildAt(0)).getChildAt(tab.getPosition());
LinearLayout layout = (LinearLayout)var10000;
var10000 = layout.getChildAt(1);
TextView tabTextView = (TextView)var10000;
tabTextView.setTextSize (***Text Size***);
tabTextView.setTypeface(Typeface.create("sans-serif-condensed",stylem));
} catch (Exception var7) {
Log.d ("EXC",var7.toString ());
}
}
}
Then just use it at tabselectedlistener and in onCreate to set typeface for the first selected tab:
protected void onCreate(Bundle savedInstanceState) {
...
setTypefaceToTab(context,tablayout, tablayout.getTabAt (tablayout.getSelectedTabPosition ()),Typeface.BOLD_ITALIC);
...
}
and in tabListener:
private void tabListener(){
tablayout.addOnTabSelectedListener (new TabLayout.OnTabSelectedListener () {
#Override
public void onTabSelected(TabLayout.Tab tab) {
setTypefaceToTab(context,tablayout,tab,Typeface.BOLD_ITALIC);
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
setTypefaceToTab(context,tablayout,tab,Typeface.NORMAL);
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
Hope it is what you wanted

How to default set a tab on starting and set the icon color on selection of a tab

I am using a tablayout and a frame layout.
I have five tabs.
I am loading my fragments to this frame layouts.
i want my second tab to defaultly get selected always.
Also when i select a perticular tab, the icon should change the color to red(I am using png icons, which are black , is their any way to change them to red to indicate that it is selected)
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="#+id/simple_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabBackground="#color/colorWhite"
app:tabIndicatorColor="#f00"
app:tabSelectedTextColor="#f00"
app:tabTextColor="#000"
/>
<FrameLayout
android:id="#+id/fl_home"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</LinearLayout>
This is my MainActivity
pb.setIcon(R.drawable.p_icon); // pb is my TabLayout.Tab
mb.setIcon(R.drawable.view_p_icon);
gb.setIcon(R.drawable.c_icon);
ptTab.setIcon(R.drawable.c_icon);
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab)
{
switch (tab.getPosition()) {
case 0:
getSupportFragmentManager().beginTransaction().replace(R.id.fl_home, new UF()).commit();
break;
case 1:
//getSupportFragmentManager().beginTransaction().replace(R.id.fl_home, new DF()).commit();
showAlertDialog("Logout?");
break;
case 2:
//getSupportFragmentManager().beginTransaction().replace(R.id.fl_home, new SF()).commit();
showAlertDialog("Logout?");
break;
case 3:
//getSupportFragmentManager().beginTransaction().replace(R.id.fl_home, new SF()).commit();
showAlertDialog("Logout?");
break;
case 4:
getSupportFragmentManager().beginTransaction().replace(R.id.fl_home, new SF()).commit();
break;
}
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}

Add code for setColorFilter method in onTabSelected() method. It will change color for image .
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
int tabPosition = tab.getPosition();
if (tabPosition == 0) {
// active tabName
imageOne.setColorFilter(getResources().getColor(R.color.redColor));
// other deactive tabName
imageTwo.setColorFilter(getResources().getColor(R.color.blackcolor));
imageThree.setColorFilter(getResources().getColor(R.color.blackcolor));
imageFour.setColorFilter(getResources().getColor(R.color.blackcolor));
} else if (tabPosition == 1) {
// active tabName
imageTwo.setColorFilter(getResources().getColor(R.color.redColor));
// other deactive tabName
imageOne.setColorFilter(getResources().getColor(R.color.blackcolor));
imageThree.setColorFilter(getResources().getColor(R.color.blackcolor));
imageFour.setColorFilter(getResources().getColor(R.color.blackcolor));
} else if (tabPosition == 2) {
// active tabName
imageThree.setColorFilter(getResources().getColor(R.color.redColor));
// other deactive tabName
imageTwo.setColorFilter(getResources().getColor(R.color.blackcolor));
imageOne.setColorFilter(getResources().getColor(R.color.blackcolor));
imageFour.setColorFilter(getResources().getColor(R.color.blackcolor));
} else if (tabPosition == 3) {
// active tabName
imageFour.setColorFilter(getResources().getColor(R.color.redColor));
// other deactive tabName
imageTwo.setColorFilter(getResources().getColor(R.color.blackcolor));
imageThree.setColorFilter(getResources().getColor(R.color.blackcolor));
imageOne.setColorFilter(getResources().getColor(R.color.blackcolor));
}
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
int tabPosition = tab.getPosition();
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
int tabPosition = tab.getPosition();
}
});
To select tab as default .
If use with viewPager then ,
tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.setupWithViewPager(viewpager);
viewpager.setCurrentItem(0); // set any number of tab which you want to select by default.
If use without viewPager then ,
tabLayout = (TabLayout) findViewById(R.id.tablayout);
TabLayout.Tab tab = tabLayout.getTabAt(someIndex); // which you want to select.
tab.select();
Hope it Helps.

Android tabLayout last selected tab color is not updating correctly

I have a tablayout with 4 tabs. When I select a tab, the text and icon of that tab should be red, and the other tabs should be grey.
To update the icon I have created two different versions, and updating it in my overridden OnTabSelectedListener, but when I add this to the tablayout the text colour seems to "lag behind". The last selected tab text is still red and not updated until I press on another new tab.
When I remove the OnTabSelectedListener, the colours work properly, but then I cant update the icon... Im not able to update the text colour directly on the tabLayout.tab item either.
Is this a bug in Android or am I missing something?
activity_tab.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.example.oivind.tabsexample.TabActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#android:color/darker_gray"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorHeight="0dp"
app:tabTextColor="#android:color/darker_gray"
app:tabSelectedTextColor="#android:color/holo_red_light"
android:background="#android:color/white"
style="#style/NASTabLayout">
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
tabActivity.java onCreate:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab);
mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
viewPager = (ViewPager) findViewById(R.id.container);
viewPager.setAdapter(mSectionsPagerAdapter);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
tabLayout.getTabAt(0).setIcon(R.drawable.ic_icon_error);
for(int i = 1; i < tabLayout.getTabCount(); i++) {
tabLayout.getTabAt(i).setIcon(R.drawable.ic_icon_error_grey);
}
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
tab.setIcon(R.drawable.ic_icon_error);
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
tab.setIcon(R.drawable.ic_icon_error_grey);
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
tab.setIcon(R.drawable.ic_icon_error_grey);
}
});
}

I had also this error and i solved it by adding tabLayout.setScrollPosition(tab.getPosition(),0f,true); to the end of onTabSelected as follows:
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
tab.setIcon(navActiveIcons[tab.getPosition()]);
tabLayout.setScrollPosition(tab.getPosition(),0f,true);
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
tab.setIcon(navIcons[tab.getPosition()]);
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});

THIS IS A QUICK FIX AND DOES NOT SOLVE THE ORIGINAL PROBLEM
Fixed it by looping through the tabs and set the grey icon on every click:
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
for(int i = 0; i < tabLayout.getTabCount(); i++) {
tabLayout.getTabAt(i).setIcon(R.drawable.ic_icon_error_grey);
}
tab.setIcon(R.drawable.ic_icon_error);
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
If someone knows how to do this properly, please tell. :)

How use TabItem through TabLayout in Android

Recently google added android.support.design.widget.TabItem in supportDesign as documentation said:
TabItem is a special 'view' which allows you to declare tab items for
a TabLayout within a layout. This view is not actually added to
TabLayout, it is just a dummy which allows setting of a tab items's
text, icon and custom layout.
But when I add TabItems to my TabLayout:
<android.support.design.widget.TabLayout
android:layout_height="wrap_content"
android:layout_width="match_parent">
<android.support.design.widget.TabItem
android:text="#string/tab_text"/>
<android.support.design.widget.TabItem
android:icon="#drawable/ic_android"/>
</android.support.design.widget.TabLayout>
Nothing displayed (in fact place of Tabs exist but Icon/Text not). Does any one knows How to use TabItem through xml?

Based on this answer, TabItem with tabLayout.setupViewPager have conflict and Icons disappear. To make it work you should implement two methods like following and avoid using setupViewPager method:
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
pager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
#Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
#Override
public void onPageSelected(int position) {
tabLayout.getTabAt(position).select();
}
#Override
public void onPageScrollStateChanged(int state) {
}
});

you should set these attributes for the TabItems
android:layout_width
android:layout_height
Cheers

TabLayoutOnPageChangeListener onTabReselected called when just switch tab

I set up ViewPager with TabLayout like this:
tabLayoutOnPageChangeListener = new TabLayout.TabLayoutOnPageChangeListener(tabLayout);
mViewPager.addOnPageChangeListener(tabLayoutOnPageChangeListener);
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
#Override
public void onTabSelected(TabLayout.Tab tab) {
mViewPager.setCurrentItem(tab.getPosition());
}
#Override
public void onTabUnselected(TabLayout.Tab tab) {
}
#Override
public void onTabReselected(TabLayout.Tab tab) {
doSomething();
}
});
so when I swipe ViewPager, TabLayout will update its indicator and selected tab; and when a tab is selected, ViewPager will change to proper page.
But this causes onTabReselected to be called even if I do not reselect tab, because after onTabSelected, mViewPager.setCurrentItem() will trigger tab selecting again (via tabLayoutOnPageChangeListener). I have to do this:
#Override
public void onTabSelected(TabLayout.Tab tab) {
mViewPager.removeOnPageChangeListener(tabLayoutOnPageChangeListener);
mViewPager.setCurrentItem(tab.getPosition());
mViewPager.addOnPageChangeListener(tabLayoutOnPageChangeListener);
}
to temporary remove listener when setCurrentItem() is called.
Is there any "more right" way to make ViewPager work with TabLayout? I'm using latest v23.0.1 design support library.

TabLayout's setupWithViewPager method is available for this purpose. You should able to replace your code with tabLayout.setupWithViewPager(mViewPager).