Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Set Custom View to TabLayout android

    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 9.88k
    Comment on it

    This blog is about adding custom Layout to TabLayout.

     

    Here we start.

    1. Create Project.

     

    2. Open Gradle file of the project.

     

    3. Add design dependencies to the gradle.

     compile 'com.android.support:design:24.0.0'

     

    4. Add TabLayout to XML Layout file.

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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="wrap_content"
        android:orientation="vertical"
    >
    
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            >
    
        </android.support.design.widget.TabLayout>
    
    
        <android.support.v4.view.ViewPager
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/white" />
    </RelativeLayout>
    

     

    5. Open Activity Java Class.

     

    6. Find instance variable of TabLayout and find from XML.

     

    7.  Create Pager adapter which extends FragmentPagerAdapter.

    public class TabsPagerAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();
    
        public TabsPagerAdapter(FragmentManager fm) {
            super(fm);
    
        }
    
        @Override
        public Fragment getItem(int position) {
            return mFragmentList.get(position);
        }
    
        @Override
        public int getCount() {
            return mFragmentList.size();
        }
    
        public void addFragment(Fragment fragment, String title) {
            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }
    
        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }

     

    8. Create TabFragment.

    public class TabFragment extends Fragment {
    
        public TabFragment() {
            // Required empty public constructor
        }
    
        public static TabFragment newInstance() {
            TabFragment fragment = new TabFragment();
            return fragment;
        }
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            // Inflate the layout for this fragment
            View view = inflater.inflate(R.layout.fragment_tab, container, false);
            return view;
        }

     

    9. Create PagerAdapter instance.

    TabsPagerAdapter adapter = new TabsPagerAdapter(getFragmentManager());

     

    10. Add Fragment to Adapter.

      adapter.addFragment(TabFragment.newInstance(), "ONE");
            adapter.addFragment(TabFragment.newInstance(), "TWO");
            adapter.addFragment(TabFragment.newInstance(), "THREE");
            adapter.addFragment(TabFragment.newInstance(), "Four");

     

    11. Set Adapter to ViewPager instance.

    mViewPager.setAdapter(adapter);

     

    12. set viewPager to TabLayout.

     tabs.setupWithViewPager(mViewPager);

     

    13. get count of TabLayout Tabs.

    int tabCount = tabs.getTabCount();

     

    14.  Write below code to set CustomView to TabLayout's Tabs.

    for (int i = 0; i < tabCount; i++) {
                TabLayout.Tab tab = tabs.getTabAt(i);
                View tabView = ((ViewGroup) tabs.getChildAt(0)).getChildAt(i);
    
                tabView.requestLayout();
    
                View view = LayoutInflater.from(this).inflate(R.layout.blue, null);
             
                tab.setCustomView(view);
                tab.setText(i + "");
            }

     

    Happy Coding. :D

 1 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: