I'm currently experimenting with various new components in the new Android Support Design library. I've implemented a NavigationView
in my MainActivity.java
, which uses a FragmentManager to navigate between the items in the Navigation drawer:
getSupportFragmentManager()
.beginTransaction()
.replace(R.id.content, mTabLayoutFragment)
.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN)
.commit();
I'm using a TabLayout
in one of the fragments. Here is the fragment's layout:
<android.support.design.widget.AppBarLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.TabLayout
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabMode="fixed"
app:tabGravity="fill"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"/>
</android.support.design.widget.AppBarLayout>
And the Java code behind it:
import android.os.Bundle;
import android.support.design.widget.*;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class TabLayoutFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View inflatedView = inflater.inflate(R.layout.fragment_tablayout, container, false);
TabLayout tabLayout = (TabLayout) inflatedView.findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Campusplan"));
tabLayout.addTab(tabLayout.newTab().setText("Raumplan"));
final ViewPager viewPager = (ViewPager) inflatedView.findViewById(R.id.viewpager);
viewPager.setAdapter(new PagerAdapter
(getFragmentManager(), tabLayout.getTabCount()));
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
return inflatedView;
}
public class PagerAdapter extends FragmentStatePagerAdapter {
int mNumOfTabs;
public PagerAdapter(FragmentManager fm, int NumOfTabs) {
super(fm);
this.mNumOfTabs = NumOfTabs;
}
@Override
public Fragment getItem(int position) {
switch (position) {
case 0:
TabItem1 tab1 = new TabItem1();
return tab1;
case 1:
TabItem1 tab2 = new TabItem1();
return tab2;
default:
return null;
}
}
@Override
public int getCount() {
return mNumOfTabs;
}
}
}
Please note TabItem1
and TabItem1
, which are fragments consisting of nothing but a TextView. These two are to be displayed in the TabLayout.
Now, this code seems to be working, to some extent. Here is how it looks like:
What's weird is, after I rotate the device, everything seems to be working just fine:
It seems like something gets called upon a configuration change. This is weird, especially considering that I have following in my AndroidManifest
:
android:configChanges="orientation|screenSize"
I face the same problem with new version of android support Design Library v23.1.1. But I just figure it out what happening.
if your view pager has 2 fragment as your mention above, then you set your view pager with this statement:
tabLayout.setupWithViewPager(viewPager);
automatically you will have 2 tabs with empty text. So you should not add new tab anymore. But something you have to do is to set text in that two created tabs.
tabLayout.getTabAt(0).setText("Campusplan");
tabLayout.getTabAt(1).setText("Raumplan");
Conclusion. To make tabs work as you want, important thing you have to do :
tabLayout.setupWithViewPager(viewPager);
tabLayout.getTabAt(0).setText("Campusplan");
tabLayout.getTabAt(1).setText("Raumplan");
I hope this will be helpful for you :)