Android Design Support Library TabLayout using custom tabs layout but layout wrapping the tabs

user4909189 picture user4909189 · Aug 8, 2015 · Viewed 45.7k times · Source

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:Tabs Screenshot

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;
}

Answer

Mark picture Mark · Aug 20, 2015

Try this

<android.support.design.widget.TabLayout
    app:tabPaddingStart="-1dp"
    app:tabPaddingEnd="-1dp"/>

I found it here