Sunday, August 30, 2015

Support TabLayout inside a fragment

Standard
Hello:

Google has released new Support Design Library which contains some awesome widgets. One of them is TabLayout. In this post I will share the code to use TabLayout inside a fragment.


I will use ViewPager with TabLayout.

Below is XML layout code.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabGravity="fill"
        app:tabMode="fixed" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>


In the java file have the following code
public class TabsFragment extends Fragment {

    View view;
    Adapter adapter;

    private void setupViewPager(ViewPager viewPager) {
 

///Here we have to pass ChildFragmentManager instead of FragmentManager.
      adapter = new Adapter(getChildFragmentManager());
        adapter.addFragment(new Fragment1(), "Fragment1");
        adapter.addFragment(new Fragment2(), "Fragment2");
        viewPager.setAdapter(adapter);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.f_tabslayout, container, false);
        super.onCreate(savedInstanceState);
        ButterKnife.bind(this, view);
        final ViewPager viewPager = ButterKnife.findById(view, R.id.viewpager);
        setupViewPager(viewPager);
        TabLayout tabLayout = ButterKnife.findById(view, R.id.tabs);
        tabLayout.setupWithViewPager(viewPager);
        return view;
    }

    @Override
    public void onDestroyView() {
        super.onDestroyView();
        ButterKnife.unbind(this);
    }

    static class Adapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragments = new ArrayList<>();
        private final List<String> mFragmentTitles = new ArrayList<>();

        public Adapter(android.support.v4.app.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);
        }
    }
}

Hope this helps. Happy coding :)




Thanks for printing this post. Hope you liked it.
Keep visiting and sharing.
Thanks,
Ashwani.

12 comments :

  1. Hi I am replacing container layout in navigation drawer with fragment having Tablayout and ViewPager and referred ur code to make it work but I am unable to view fragments attached with the tabs and swiping is not functioning. Can u suggest ideas for this?

    ReplyDelete
  2. please send complete source code

    ReplyDelete
  3. What is the variable ButterKnife? It's not established anywhere else in the program

    ReplyDelete
    Replies
    1. ButterKnife is a automatic field and method binder. More info @http://jakewharton.github.io/butterknife/

      Delete
  4. what is Butterknife?

    ReplyDelete
    Replies
    1. ButterKnife is a automatic field and method binder. More info @http://jakewharton.github.io/butterknife/

      Delete
  5. dynamic content is not loaded

    ReplyDelete
  6. How can i set this viewPager currentItem from another fragment?

    ReplyDelete
  7. app stop working and terminate when open that fragment

    ReplyDelete