View Pager within a fragment

Question

I have bottom navigation bar implemented with view pager. Now on the first fragment I want tabs on the top so I need a view pager inside of that fragment only. That view pager will have its own set of fragments. Is it possible? Can some one help me do it?

score 0 · Answer 1 · answered Jun 23 '17 at 20:55

Yes, it is completely possible since your inner viewpager and tablayout will be independent from its parent fragment. The process to achieve this is exactly the same you used to create your first set of tabs, but you have to use getChildFragmentManager() instead:

getChildFragmentManager().beginTransaction().add(R.id.yourinnercontainer, YourFragment.newInstance()).commit();
getChildFragmentManager().executePendingTransactions();

And for the TabLayout just create your views and use the setupWithViewPager(viewPager) function as usual.

score 0 · Answer 2 · answered Jun 23 '17 at 20:58

Yes you can add viewPager to the XML of your fragment like this:

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layoutDirection="ltr"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:contentInsetEnd="16dp"
        app:popupTheme="@style/AppTheme.PopupOverlay">

        <TextView
            android:id="@+id/toolbar_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start|center_vertical"
            android:gravity="center|start"
            android:text="@string/app_name"
            android:textAppearance="@style/TextAppearance.AppCompat.Title"/>
    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:tabIndicatorHeight="3dp"
        app:tabMode="fixed"/>
</android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

and manage it in your code like this:

        ViewPager pager = (ViewPager) findViewById(R.id.pager);
    mAdapter = new MyPagerAdapter(getSupportFragmentManager());

    mAdapter.addFragment(first_fragment, firts_fragment_title);
    mAdapter.addFragment(second_fragment, second_fragment_title);
    pager.setAdapter(mAdapter);

    TabLayout tabs = (TabLayout) findViewById(R.id.tabs);
    tabs.setupWithViewPager(pager);
    TextView first_fragment_tab = (TextView) getLayoutInflater().inflate(R.layout.tab_indicator, null);
    TextView second_fragment_tab = (TextView) getLayoutInflater().inflate(R.layout.tab_indicator, null);

    tabs.getTabAt(0).setCustomView(first_fragment_tab);
    tabs.getTabAt(1).setCustomView(second_fragment_tab);
    pager.setCurrentItem(mAdapter.getCount());

Thank you for the answer. My real concern is that my bottom navigation works on swipe as well as selecting the icon from navigation bar. The sliding tabs that I will implement will also work on swipes so how to solve that conflict? — Aakash Shah, Jun 23 '17 at 22:35

score 0 · Answer 3 · answered Jun 23 '17 at 21:07

Nested Fragment is possible. But Fragment tends to bring new sets of troubles, so with integration of another Fragment layer on top of it, we might end up in deep trouble. If you are performing basic operations, it might be OK but if there is cases of data exchanges and other inter fragments dependency, I would suggest to be very careful.

score 0 · Answer 4 · answered Jun 23 '17 at 22:20

0

Yes, it is possible!

Step 1: Create Tabbed activity. (It will automatically create an activity with ViewPager)

Step 2: Convert that activity to a fragment to be able add it to your BottomNavigation. Use this answer: Converting activity to fragment

Note: I did this in a project and having other ViewPagers on other tabs of BottomNavigation bar made every a bit more complicated. Using viewPager.setOffscreenPageLimit(...); will solve some of your possible problem.

answered Jun 23 '17 at 22:20

Amiraslan

794
1
8
19

thank you for the answer, But my problem is that I have main activity where I am using actinbar and setting custome view on that custome view. Now when I press a button on the first fragment of that main activity, I have to replace that fragment with new fragment and that new fragment must have sliding tabs with the tabs name displayed on top. – Aakash Shah Jun 25 '17 at 23:58
so the problem is that as the main activity uses the Action bar how will I get toolbar set in the fragment? – Aakash Shah Jun 26 '17 at 00:18
I did everything but I want app headers to show on the toolbar. When I implemented as an activity it was working. But after I implemented it as fragment It is not working – Aakash Shah Jun 26 '17 at 06:06
@AakashShah Do you want smth like this: https://camo.githubusercontent.com/9615647c020466aa20c1e46a7bddbc3785414d6c/68747470733a2f2f7261772e6769746875622e636f6d2f6e656f6b7265652f4d6174657269616c546162732f6d61737465722f73637265656e2e6a7067 – Amiraslan Jun 26 '17 at 06:52
@AakashShah Or like this: https://drive.google.com/open?id=0B_6NXeVT9k1IUl9jdTBCWkExbms – Amiraslan Jun 26 '17 at 06:56
the first image you sent is something similar to what I want. I am trying to get that in my fragment but unable to get that. – Aakash Shah Jun 27 '17 at 00:17
I am setting a toolbar as support action bar in my MainActivity that might be causing the problem. I need that toolbar in mainactivity so I can not get rid of that. – Aakash Shah Jun 27 '17 at 00:18

View Pager within a fragment

4 Answers4