You should not put a Fragment inside a Fragment. You can however put a ViewPager inside a fragment and get the result you're looking for.
I was facing the same issue a while ago for one of my apps (only I wanted the ViewPager to contain some ListViews). This was the end result (see the lines; red contains Fragment, blueViewPagerIndicator, green ViewPager):
I accomplished this with the following steps. Fist, for the detail-fragment, I created the following XML file:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.viewpagerindicator.TabPageIndicator
android:id="@+id/viewpagerIndicator"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
Then, I set up a custom PagerAdapter to populate the ViewPager and the TabPageIndicator:
public class MainPagerAdapter extends PagerAdapter implements TitleProvider {
// constructor
...
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
// remove the object (we don't want to keep it in memory as it will get recreated and cached when needed)
ViewPager viewPager = (ViewPager) container;
View view = (View) object;
viewPager.removeView(view);
}
@Override
public Object instantiateItem(View pager, final int position) {
// inflate your 'content'-views here (in my case I added a listview here)
// similar to a listadapter's `getView()`-method
View wrapper = ... // inflate your layout
... // fill your data to the appropriate views
((ViewPager) pager).addView(wrapper);
}
public String getTitle(int position) {
... // return the title of the tab
}
}
Next, in my fragment, I set the following:
public class MainFragment extends Fragment {
private MainPagerAdapter pagerAdapter;
private TabPageIndicator mIndicator;
private ViewPager viewPager;
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
View detailsFrame = context.findViewById(R.id.details_fragment);
// setup your adapter: pass data, etc.
this.pagerAdapter = new MainPagerAdapter(...);
this.viewPager = (ViewPager) context.findViewById(R.id.viewpager);
viewPager.setAdapter(pagerAdapter);
this.mIndicator = (TabPageIndicator) context.findViewById(R.id.viewpagerIndicator);
this.mIndicator.setViewPager(viewPager);
}
}
