In tab custom layout I set its parent element to match_parent
and set its background color. When I run it tabs are shown custom layout wrapping the elements imageview and textview. I want this custom layout will fill the tab without any space between tabs.
Check output here:
private void setupTabLayout(ViewPager viewPager, ViewPagerAdapter viewPagerAdapter) {
TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
tabLayout.setupWithViewPager(viewPager);
int length = tabLayout.getTabCount();
for (int i = 0; i < length; i++) {
tabLayout.getTabAt(i).setCustomView(viewPagerAdapter.getTabView(i));
}
}
tab_layout.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/layout"
android:background="@color/grey_accent">
<ImageView
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/icon"
android:src="@drawable/ic_action_home"
android:layout_marginBottom="19dp"
android:layout_above="@+id/title"
android:layout_centerHorizontal="true" />
<TextView
android:layout_gravity="center"
android:textColor="@color/white"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Home"
android:id="@+id/title"
android:layout_marginBottom="259dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
ViewPagerAdapter:
public View getTabView(int position) {
View view = LayoutInflater.from(this.context).inflate(R.layout.tab_layout, null);
TextView title = (TextView) view.findViewById(R.id.title);
ImageView icon = (ImageView) view.findViewById(R.id.icon);
ViewGroup layout = (ViewGroup) view.findViewById(R.id.layout);
layout.setBackgroundResource(this.mColorList.get(position));
icon.setImageResource(this.mIconList.get(position));
title.setText(this.getPageTitle(position));
return view;
}