Set Custom View to TabLayout android.
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
Source: www.bing.com
Images credited to www.bing.com and www.bhmpics.com
