Develop Reference

Tab doesn't take full width in fragment

I am trying to create tabs using fragment layout. It is not set the Full Width of the screen and also tabs text is not displaying. Didn't find any solution to fix this. Below I added my code and screenshots of the output and what I want to achieve, please check any help will be appreciated.
Main Activity
public class SettingActivity extends Fragment {
TabLayout tab;
ViewPager vp;
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.activity_setting, container, false);
TabLayout tabLayout = (TabLayout) view.findViewById(R.id.tabs);
tabLayout.addTab(tabLayout.newTab());
tabLayout.addTab(tabLayout.newTab());
final ViewPager viewPager = (ViewPager) view.findViewById(R.id.vp);
viewPager.setAdapter(new ViewPagering(getFragmentManager(), tabLayout.getTabCount()));
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
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 view;
}
}
ViewPager
public class ViewPagering extends FragmentStatePagerAdapter {
int noTabs;
private String[] tabTitles = new String[]{"Tab1", "Tab2"};
public ViewPagering(FragmentManager fm, int noTabs) {
super(fm);
this.noTabs = noTabs;
}
#Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
Frag1 f1 = new Frag1();
return f1;
case 1:
frag2 f2 = new frag2();
return f2;
default:
return null;
}
}
#Override
public int getCount() {
return noTabs;
}
}
Xml
LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="rarecrew.com.taberp.SettingActivity">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="30dp"
app:tabMaxWidth="0dp"
app:tabMode="fixed"></android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/vp"
android:layout_width="match_parent"
android:layout_height="match_parent"></android.support.v4.view.ViewPager>
</LinearLayout>
What I am getting
What I want to achieve

How Can I display Tabs on A Fragment?

My navigation drawer is built using fragments. I want to display tabs on one of the fragments. So far, nothing is showing up. Home fragment is a fragment that is accessed upon clicking home icon on the navigation drawer. I am trying to create two tabs under home fragment without any success. I have already created a class for each tab. The classes inflate their respective layouts.
Home Fragment:
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup
container, #Nullable Bundle savedInstanceState){
View view = inflater.inflate(R.layout.daily_data_fragment, null);
//Adding toolbar to the activity
Toolbar toolbar = (Toolbar) view.findViewById(R.id.toolbar);
((AppCompatActivity)getActivity()).setSupportActionBar(toolbar);
//Initializing the tablayout
tabLayout = (TabLayout) view.findViewById(R.id.tabLayout);
//Adding the tabs using addTab() method
tabLayout.addTab(tabLayout.newTab().setText("ADD DATA"));
tabLayout.addTab(tabLayout.newTab().setText("VIEW ARCHIVE"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
//Initializing viewPager
viewPager = (ViewPager) view.findViewById(R.id.pager);
//Creating our pager adapter
DailyDataPageAdapter adapter = new DailyDataPageAdapter(getActivity().getSupportFragmentManager(), tabLayout.getTabCount());
//Adding adapter to pager
viewPager.setAdapter(adapter);
//Adding onTabSelectedListener to swipe views
tabLayout.setOnTabSelectedListener(this);
tabLayout.post(new Runnable() {
#Override
public void run() {
tabLayout.setupWithViewPager(viewPager);
}
});
return view;
}
Adapter Class:
public class DailyDataPageAdapter extends FragmentStatePagerAdapter {
int tabCount;
public DailyDataPageAdapter(FragmentManager fm, int tabCount){
super(fm);
this.tabCount = tabCount;
}
#Override
public Fragment getItem(int position) {
switch (position){
case 0:
AddData addData = new AddData();
return addData;
case 1:
ViewArchive viewArchive = new ViewArchive();
return viewArchive;
default:
return null;
}
}
#Override
public int getCount() {
return tabCount;
}
}
Layout:
<LinearLayout
android:id="#+id/main_layout"
android:orientation="vertical"
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".home_activity">
<!-- our toolbar -->
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:visibility="visible"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<!-- our tablayout to display tabs -->
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorgray"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:visibility="visible" />
<!-- View pager to swipe views -->
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:visibility="visible" />
</LinearLayout>

You can do like this.
public class HomeFragment extends Fragment {
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
// Fragment List
private final List<Fragment> mFragmentList = new ArrayList<>();
// Title List
private final List<String> mFragmentTitleList = new ArrayList<>();
private ViewPagerAdapter adapter;
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.daily_data_fragment,container,false);
// init view
toolbar = (Toolbar) view.findViewById(R.id.toolbar);
viewPager = (ViewPager) view.findViewById(R.id.pager);
tabLayout = (TabLayout) view.findViewById(R.id.tabLayout);
((AppCompatActivity) getActivity()).setSupportActionBar(toolbar);
((AppCompatActivity) getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(true);
// add title to the list
mFragmentTitleList.add("one");
mFragmentTitleList.add("two");
mFragmentTitleList.add("three");
// add fragment to the list
mFragmentList.add(new OneFragment());
mFragmentList.add(new TwoFragment());
mFragmentList.add(new ThreeFragment());
setupViewPager(viewPager);
tabLayout.setupWithViewPager(viewPager);
// Tab ViewPager setting
viewPager.setOffscreenPageLimit(mFragmentList.size());
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabsFromPagerAdapter(adapter);
return view;
}
private void setupViewPager(ViewPager viewPager) {
adapter = new ViewPagerAdapter(getChildFragmentManager(), mFragmentList, mFragmentTitleList);
viewPager.setAdapter(adapter);
}
/**
* ViewPagerAdapter setting
*/
class ViewPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> mFragmentList = new ArrayList<>();
private List<String> mFragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titleLists) {
super(fm);
this.mFragmentList = fragments;
this.mFragmentTitleList = titleLists;
}
#Override
public Fragment getItem(int position) {
return mFragmentList.get(position);
}
#Override
public int getCount() {
return mFragmentList == null ? 0 : mFragmentList.size();
}
#Override
public CharSequence getPageTitle(int position) {
return mFragmentTitleList.get(position);
}
}
}

android viewpager with tablayout - how to add other fragments inside of a tab?

so i have the classic viewpager in a tablayout that looks something like this:
My viewPagerAdapter class looks like this:
public class HomePagerAdapter extends FragmentPagerAdapter {
int mNumOfTabs;
public HomePagerAdapter(FragmentManager fm, int NumOfTabs) {
super(fm);
this.mNumOfTabs = NumOfTabs;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
TabHomeFragment tab1 = new TabHomeFragment();
return tab1;
case 1:
TabShopFragment tab2 = new TabShopFragment();
return tab2;
case 2:
TabMeFragment tab3 = new TabMeFragment();
return tab3;
default:
return null;
}
}
#Override
public int getCount() {
return mNumOfTabs;
}
}
So now on one of the tabs i need to add a fragment on top of it. so its a search fragment really. i do a search in the tab bar and i want the back end search results to appear in only ONE of the tabs (the first one). but i want the search results displayed in a fragment called searchFragmentResults and i want it to be laid out on top of the first tab. Then when user hits the back button it will just go back to the original content in the first tab. Is this possible with view pager ?
so visually when i hit the search icon on the first tabs tabBar it should bring up a searchView and when i search for the users query it should bring up a another fragment with the results but only in the tab that it started from. Here is an example:
i cant call fragtransaction.replace(somecontentview, somefragment); (or its add method) because i did not add them to a contentview. i let the viewpager do it for me. So how is this achieved ?

i figured out how to do this. The tab should be a fragment who's purpose is to only contain other fragments. the idea is based off of this SO. But i had a need to do it for a viewPager. Lets go through the steps. first the viewpager adapter:
public class HomePagerAdapter extends FragmentStatePagerAdapter {
//integer to count number of tabs
int tabCount;
private Fragment mCurrentFragment;
private String[] tabTitles = new String[]{"tab0", "tab1", "tab2", "tab3"};
//Constructor to the class
public HomePagerAdapter(FragmentManager fm, int tabCount) {
super(fm);
this.tabCount = tabCount;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
TabHomeContainerFragment tab1 = new Tab0ContainerFragment();
return tab1;
case 1:
TabShopFragment tab2 = new Tab1ContainerFragment();
return tab2;
case 2:
TabMeFragment tab3 = new Tab2ContainerFragment();
return tab3;
case 3:
TabBagFragment tab4 = new Tab3ContainerFragment();
return tab4;
default:
return null;
}
}
//Overriden method getCount to get the number of tabs
#Override
public int getCount() {
return tabCount;
}
public Fragment getCurrentFragment() {
return mCurrentFragment;
}
//* this is key to get the current tab to pop the fragments afterwards**/
#Override
public void setPrimaryItem(ViewGroup container, int position, Object object) {
if (getCurrentFragment() != object) {
mCurrentFragment = ((Fragment) object);
}
super.setPrimaryItem(container, position, object);
}
#Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
Lets go into a container to see how it would look:
add this to your xml for all the containers (along with anything else you want visually but they ALL must have the same id of container_framelayout:
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<FrameLayout android:id="#+id/container_framelayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android" />
</android.support.design.widget.CoordinatorLayout>
you dont have to put it in a coordinatorLayout i just find it fixes some bugs and works well.
In your fragments base class i copied almost the same code from the SO i mentioned above but slight modification if you want to add tag or not:
public void replaceFragment(Fragment fragment, boolean addToBackStack,String tag) {
FragmentTransaction transaction = getChildFragmentManager().beginTransaction();
if (addToBackStack) {
transaction.addToBackStack(null);
}
transaction.replace(R.id.container_framelayout, fragment,tag);
transaction.commit();
getChildFragmentManager().executePendingTransactions();
}
public boolean popFragment() {
Log.e("test", "pop fragment: " + getChildFragmentManager().getBackStackEntryCount());
boolean isPop = false;
if (getChildFragmentManager().getBackStackEntryCount() > 0) {
isPop = true;
getChildFragmentManager().popBackStack();
}
return isPop;
}
Now lets look at the activities layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#color/white"/>
<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:tabTextColor="#color/black"
app:tabSelectedTextColor="#android:color/darker_gray"
/>
Now i'll show you how to set up the tablayout in the activity hosting the tablayout:
its standard:
public class HomePageActivity implements TabLayout.OnTabSelectedListener {
private final int NUM_OF_TABS = 4;
#BindView(R.id.pager)
public ViewPager viewPager;
public HomePagerAdapter adapter;
#BindView(R.id.tabLayout)
TabLayout tabLayout;
#NonNull
#Override
public HomePagePresenter createPresenter() {
return new HomePagePresenter();
}
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_homepage);
ButterKnife.bind(this);
initView();
}
private void initView() {
for (int i = 0; i < NUM_OF_TABS; i++)
tabLayout.addTab(tabLayout.newTab());
adapter = new HomePagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
//Adding adapter to pager
viewPager.setAdapter(adapter);
tabLayout.addOnTabSelectedListener(this);
tabLayout.setupWithViewPager(viewPager);
// configure tab icons
int[] imageTabResId = {
R.drawable.welcome1,
R.drawable.welcome2,
R.drawable.welcome3,
R.drawable.welcome1};
for (int i = 0; i < imageTabResId.length; i++) {
tabLayout.getTabAt(i).setIcon(imageTabResId[i]);
}
}
/** this is key. we get the current fragment showing and pop it **/
#Override
public void onBackPressed() {
boolean isPopFragment = false;
isPopFragment = ((BaseFragment) adapter.getCurrentFragment()).popFragment();
if (!isPopFragment) {
finish();
}
}
#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) {
}
}
I guess the major part is onBackPress getting the current fragment.

Tablayout inside Viewpager

I need to place TabLayout in ViewPager. ViewPager contains some fragments. I can't do it because TabLayout is located in my Activity and I can't manage it if it will be in Fragment.
Now my code looks like this. In Activity's XML:
<LinearLayout
...>
<android.support.v4.view.ViewPager
...>
</android.support.v4.view.ViewPager>
<android.support.design.widget.TabLayout
.../>
</LinearLayout>
and in Activity class
ViewPager mViewPager = (ViewPager) findViewById(R.id.view_pager_offer_detail);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabDots);
tabLayout.setupWithViewPager(mViewPager, true);
FragmentPagerAdapter mPagerAdapter = new FragmentPagerAdapter(...);
mViewPager.setAdapter(mPagerAdapter);
I need to get as shown below.
what i want (imgur doesn't work now)
Which version is correct and how to implement it in XML?

if I understand, you want to show some tabs (Fragments) inside your ViewPager right?
you can follow this implementation in your 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;
}
}
}
Put the tablayout and viewpager inside your layout.xml that represents your fragment as you do with a normal view.

OnBackpressed get empty view on tablayout

I am stuck in solving this problem. I have set tabs in fragment using TabLayout and ViewPager. The problem is when i move to next fragment and then i press back button i get empty tabs view.
Here I am attaching my code:
home.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="4dp" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent" />
</LinearLayout>`
home.java(fragment)
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.home, container, false);
((Drawer) getActivity()).setActionBarTitle("Home");
Toast.makeText(getActivity(), "entry count" + getActivity().getSupportFragmentManager().getBackStackEntryCount(), Toast.LENGTH_SHORT).show();
tabLayout = (TabLayout) view.findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Products"));
tabLayout.addTab(tabLayout.newTab().setText("Category"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
viewPager = (ViewPager) view.findViewById(R.id.pager);
Pager adapter = new Pager(getActivity().getSupportFragmentManager(), tabLayout.getTabCount());
tabLayout.getTabCount());
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
tabLayout.setOnTabSelectedListener(this);
return view;
}
#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) {
}
pager.java (Adapter)
public class Pager extends FragmentStatePagerAdapter {
int tabCount;
public Pager(FragmentManager fm, int tabCount) {
super(fm);
this.tabCount = tabCount;
}
#Override
public Fragment getItem(int position) {
switch (position) {
case 0:
Product tab1 = new Product();
return tab1;
case 1:
Category tab2 = new Category();
return tab2;
default:
return null;
}
}
#Override
public int getCount() {
return tabCount;
}
}
MainActivity (where I set this tab fragment)
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_drawer);
getSupportActionBar().setTitle("Home");
fragment = new home();
FragmentTransaction ft = getSupportFragmentManager().beginTransaction();
ft.replace(R.id.main, fragment);
ft.commit();

I had faced same issue when replacing fragment and that replaced fragment have TabLayout (i.e. Inner Fragments)
After researching about this issue: i found solution
What i does:
replacing
ViewPagerAdapter adapter = new ViewPagerAdapter(getActivity().getSupportFragmentManager());
to
If your Parent Activity is extending AppCompatActivity , then use
ViewPagerAdapter adapter = new ViewPagerAdapter(getChildFragmentManager());
If your Parent Activity is extending Activity than use
ViewPagerAdapter adapter = new ViewPagerAdapter(getActivity().getChildFragmentManager());

write you code in activity
#Override
public void onBackPressed() {
try {
if (getFragmentManager().getBackStackEntryCount() > 1) {
FragmentManager.BackStackEntry first = getFragmentManager().getBackStackEntryAt(0);
getFragmentManager().popBackStack(first.getId(), FragmentManager.POP_BACK_STACK_INCLUSIVE);
onNavigationItemSelected(navigationView.getMenu().getItem(0));
} else
finish();
} catch (Exception e) {
e.printStackTrace();
}
}

You do not need to attach PageListeners to tabLayout and tabListeners to ViewPager.
This will take care of this.
tabLayout.setupWithViewPager(viewPager);
Your updated code can be like this. Do tell me if you still face any problem.
#Nullable
#Override
public View onCreateView(LayoutInflater inflater, #Nullable ViewGroup container, #Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.home, container, false);
((Drawer) getActivity()).setActionBarTitle("Home");
Toast.makeText(getActivity(), "entry count" + getActivity().getSupportFragmentManager().getBackStackEntryCount(), Toast.LENGTH_SHORT).show();
tabLayout = (TabLayout) view.findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setText("Products"));
tabLayout.addTab(tabLayout.newTab().setText("Category"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
viewPager = (ViewPager) view.findViewById(R.id.pager);
Pager adapter = new Pager(getActivity().getSupportFragmentManager(), tabLayout.getTabCount());
tabLayout.getTabCount());
//Link tabLayout with ViewPager.
tabLayout.setupWithViewPager(viewPager);
return view;
}

You should not create an Adapter inside a fragment with its activity's FragmentManager. Try to replace
Pager adapter = new Pager(getActivity().getSupportFragmentManager(), tabLayout.getTabCount());
with
Pager adapter = new Pager(getChildFragmentManager(), tabLayout.getTabCount());