How to add ViewPager in Fragment Class?

Question

I am trying to add View Pager in Fragment Class. I have tried all stuff.

public class MessageFragment extends android.support.v4.app.Fragment{

private ViewPager viewPager;
private TabLayout tabLayout;
public static MessageFragment newInstance() {
    MessageFragment fragment = new MessageFragment();
    Log.d("Click", "newInstance: ");
    return fragment;
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {

    View view = inflater.inflate(R.layout.fragment_message, container, false);
    ViewPager viewPager=(ViewPager)view.findViewById(R.id.viewpager);
    if(viewPager!=null)
    {
        setUpViewPager(viewPager);
    }
    TabLayout tabLayout = (TabLayout)view. findViewById(R.id.tabs);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.setTabTextColors(getResources().getColorStateList(R.color.colorToolbar));
    return view;

}
private void setUpViewPager(ViewPager viewPager)
{
    Adapter adapter=new Adapter(getActivity().getSupportFragmentManager());
    adapter.addFragment(new TabTaskFragment(),"Tasks");
    adapter.addFragment(new TabChatFragment(),"Chat");
    viewPager.setAdapter(adapter);
}
static class Adapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragments = new ArrayList<>();
    private final List<String> mFragmentTitles = new ArrayList<>();
    public Adapter(FragmentManager fm) {
        super(fm);
    }
    public void addFragment(Fragment fragment, String title) {
        mFragments.add(fragment);
        mFragmentTitles.add(title);
    }
    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }
    @Override
    public int getCount() {
        return mFragments.size();
    }
    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitles.get(position);
    }
}

} Here is my xml file, I have added all viewpager code over here please find XML FILE:

<android.support.design.widget.CoordinatorLayout 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.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:visibility="gone"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        app:tabIndicatorColor="@color/colorToolbar"
        app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
        app:tabTextColor="@color/colorToolbar" />
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

How can I add?

I am not able to fix it.

Tabs will show 1st time, but when the user clicks on any bottom tab than tabs description gone and its show blank screens.

I have tried all stuffs disappointed at last.

where is your view pager initialization? where is your adapter for view pager? — SripadRaj, Aug 09 '17 at 13:03
this may help you https://stackoverflow.com/a/28858768/5908465 — Shreeya Chhatrala, Aug 09 '17 at 13:03
Possible duplicate of [how to use a ViewPager in a fragment](https://stackoverflow.com/questions/10299837/how-to-use-a-viewpager-in-a-fragment) — Mitesh Vanaliya, Aug 09 '17 at 13:05
@Darshan- if you have tried then paste your whole code.. we will help to solve problem. But we can not feed you by spoon. — Mr Code, Aug 09 '17 at 13:06
@Rahul Gupta I have already paste my code. I don't believe in spoon feeding.. Hope you understand — Darshan, Aug 09 '17 at 16:22
Possible duplicate of [How set ViewPager inside a Fragment](https://stackoverflow.com/questions/19073541/how-set-viewpager-inside-a-fragment) — Khemraj Sharma, Nov 16 '18 at 07:37

score 0 · Answer 1 · edited Aug 09 '17 at 13:20

Your class file should like this

public class ViewPagerFragment extends Fragment {
    ViewPager viewPager;
    PagerAdapter mPagerAdapter;
    TabLayout tabLayout;

    @Override
    public View onCreateView(LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.myLayout, null);
        viewPager = (ViewPager) view.findViewById(R.id.transactions_recharge);
        mPagerAdapter = new ViewPagerAdapter(getChildFragmentManager(), 7);
        viewPager.setAdapter(mPagerAdapter);

        tabLayout = (TabLayout) view.findViewById(R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);

        return view;
    }


    class ViewPagerAdapter extends FragmentPagerAdapter {
        int pageCount = 0;
        String titles[] = {"One", "Two", "Three"};

        ViewPagerAdapter(FragmentManager manager, int _pageCount) {
            super(manager);
            pageCount = _pageCount;
        }

        @Override
        public Fragment getItem(int position) {
            if (position == 0) {
            //load fragment one
            return new FragmentOne();
            } else if (position == 1) {
            //load fragment two
            } else if (position == 2) {
            //load fragment three
            } 
        }

        @Override
        public int getCount() {
            return pageCount;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return titles[position];
        }

    }

 }

And your XML should me like this.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:id="@+id/content_layout"
    android:layout_height="match_parent"
    android:background="@color/primary">


        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@color/white"
            app:tabIndicatorHeight="2dp"
            app:tabMode="scrollable" />

        <android.support.v4.view.ViewPager
            android:id="@+id/transactions_recharge"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/tabs"
            android:background="@android:color/transparent">

        </android.support.v4.view.ViewPager>
</RelativeLayout>

How to add ViewPager in Fragment Class?

1 Answers1