Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Set Custom View to TabLayout android

    @AmanDeep
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 15.9k
    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.

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

     

    4. Add TabLayout to XML Layout file.

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:layout_width="match_parent"
    6.     android:layout_height="wrap_content"
    7.     android:orientation="vertical"
    8. >
    9.  
    10.     <android.support.design.widget.TabLayout
    11.         android:id="@+id/tabLayout"
    12.         android:layout_width="match_parent"
    13.         android:layout_height="wrap_content"
    14.         android:layout_alignParentTop="true"
    15.         >
    16.  
    17.     </android.support.design.widget.TabLayout>
    18.  
    19.  
    20.     <android.support.v4.view.ViewPager
    21.         android:layout_width="match_parent"
    22.         android:layout_height="wrap_content"
    23.         android:background="@android:color/white" />
    24. </RelativeLayout>
    25.  

     

    5. Open Activity Java Class.

     

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

     

    7.  Create Pager adapter which extends FragmentPagerAdapter.

    1. public class TabsPagerAdapter extends FragmentPagerAdapter {
    2.     private final List<Fragment> mFragmentList = new ArrayList<>();
    3.     private final List<String> mFragmentTitleList = new ArrayList<>();
    4.  
    5.     public TabsPagerAdapter(FragmentManager fm) {
    6.         super(fm);
    7.  
    8.     }
    9.  
    10.     @Override
    11.     public Fragment getItem(int position) {
    12.         return mFragmentList.get(position);
    13.     }
    14.  
    15.     @Override
    16.     public int getCount() {
    17.         return mFragmentList.size();
    18.     }
    19.  
    20.     public void addFragment(Fragment fragment, String title) {
    21.         mFragmentList.add(fragment);
    22.         mFragmentTitleList.add(title);
    23.     }
    24.  
    25.     @Override
    26.     public CharSequence getPageTitle(int position) {
    27.         return mFragmentTitleList.get(position);
    28.     }

     

    8. Create TabFragment.

    1. public class TabFragment extends Fragment {
    2.  
    3.     public TabFragment() {
    4.         // Required empty public constructor
    5.     }
    6.  
    7.     public static TabFragment newInstance() {
    8.         TabFragment fragment = new TabFragment();
    9.         return fragment;
    10.     }
    11.  
    12.     @Override
    13.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
    14.                              Bundle savedInstanceState) {
    15.         // Inflate the layout for this fragment
    16.         View view = inflater.inflate(R.layout.fragment_tab, container, false);
    17.         return view;
    18.     }

     

    9. Create PagerAdapter instance.

    1. TabsPagerAdapter adapter = new TabsPagerAdapter(getFragmentManager());

     

    10. Add Fragment to Adapter.

    1.   adapter.addFragment(TabFragment.newInstance(), "ONE");
    2.         adapter.addFragment(TabFragment.newInstance(), "TWO");
    3.         adapter.addFragment(TabFragment.newInstance(), "THREE");
    4.         adapter.addFragment(TabFragment.newInstance(), "Four");

     

    11. Set Adapter to ViewPager instance.

    1. mViewPager.setAdapter(adapter);

     

    12. set viewPager to TabLayout.

    1.  tabs.setupWithViewPager(mViewPager);

     

    13. get count of TabLayout Tabs.

    1. int tabCount = tabs.getTabCount();

     

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

    1. for (int i = 0; i < tabCount; i++) {
    2.             TabLayout.Tab tab = tabs.getTabAt(i);
    3.             View tabView = ((ViewGroup) tabs.getChildAt(0)).getChildAt(i);
    4.  
    5.             tabView.requestLayout();
    6.  
    7.             View view = LayoutInflater.from(this).inflate(R.layout.blue, null);
    8.          
    9.             tab.setCustomView(view);
    10.             tab.setText(i + "");
    11.         }

     

    Happy Coding. :D

    TabLayout tabs TabHost tabwidget Custom Tab CustomView Tab Android Android TabLayout
    Comment on it

 1 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: