Android TabLayout tabPaddingTop and tabPaddingBottom not being removed

Question

Here is my tab layout XML

<android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="@dimen/custom_tab_layout_height"
            android:background="@color/tab_background_primary"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/primary_white"
            app:tabIndicatorHeight="3dp"
            app:tabMinWidth="120dp"
            app:tabMode="scrollable"
            app:tabPaddingStart="-1dp"
            app:tabPaddingEnd="-1dp"
            app:tabPaddingTop="1dp"
            app:tabPaddingBottom="1dp"
            />

It is removing the horizontal padding in between tabs but not the tabPaddingTop and tabPaddingBottom.

How do I remove the top and bottom padding to make each tab match the tabLayout height?

Custom view for each tab

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/tab"
android:textColor="@color/primary_white"
android:textSize="14sp"
android:textStyle="bold"
android:gravity="fill"
android:fontFamily="@string/font_fontFamily_medium"/>

I also tried using a Linear Layout with Imagview and Textview as custom view

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:gravity="fill"
android:layout_height="match_parent">

<ImageView
    android:id="@+id/tab_logo"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:src="@mipmap/ic_settings_light"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:id="@+id/tab_title"
    android:textColor="@color/primary_white"
    android:textSize="14sp"
    android:textStyle="bold"
    android:gravity="center"
    android:text="test"
    android:fontFamily="@string/font_fontFamily_medium"/>

</LinearLayout>

And here is how I inflated the custom tab view (for custom view with textView)

TextView tabTwo = (TextView) LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
    tabTwo.setText("CASH IN");
    tabTwo.setBackgroundColor(Color.parseColor("#EC5A0B"));
    tabTwo.setCompoundDrawablesWithIntrinsicBounds(R.mipmap.ic_action_cash_light, 0, 0, 0);
    tabLayout.getTabAt(1).setCustomView(tabTwo);

As you can see, I am trying to give different background color to each tab. But the padding at top and bottom is still there.

Saberhagen

Are you using a custom view for each tab? – Diorite

Tab layout have it's default padding if you have not use custom view for tab, otherwise you can customize padding with custom view for tab. – Mystique

Guys, please see the edit. I am using a custom view for each tab. How do I customize padding in the custom view itself? – Saberhagen

@Saberhagen how you resolved this issue... – Abandoned

I solve the problem like I said in this post – Bega

Answer 1

I think Android design library's TabLayout have default padding like what you can see here

The other recommendation that I can recommend to you is using Google IO's SlidingTabLayout (Don't forget to copy SlidingTabStrip too!)

The usage is simple, just include in your layout :

<com.myapp.ui.widget.SlidingTabLayout
    android:id="@+id/main_view_pager_tab"
    android:layout_width="match_parent"
    android:layout_height="@dimen/tabs_height"
    android:background="@color/white" />

and then in your activity set the viewpager and listener (if you want)

    mainViewPagerTab.setViewPager(mainViewPager);
    mainViewPagerTab.setOnPageChangeListener(onPageChangeListener);

Nickell

I used TabLayout because it gave easier implementation of using icon and text together in Tab. I think I am missing some trick in removing the default padding or overriding it. I will sure use the SlidingTabLayout if it is a no way out. Thanks. – Saberhagen

Answer 2

This was the only solution

https://mcmap.net/q/1142866/-android-tab-layout-not-taking-up-full-width-with-custom-view

Try the code, after adding your tabs to your tablayout.

final ViewGroup test = (ViewGroup)(tabs.getChildAt(0));//tabs is your Tablayout
int tabLen = test.getChildCount();

for (int i = 0; i < tabLen; i++) {
            View v = test.getChildAt(i);
            v.setPadding(0, 0, 0, 0);
        }

Alejoa

Answer 3

I got the best solution for this issue, check the below code and this will helpful.

My tablayout XML is like this:

<RelativeLayout
        android:layout_height="30dp"
        android:background="#333333"
        android:layout_width="match_parent">
    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabTextAppearance="@style/MineCustomTabText"
        style="@style/tab_bassr"
        app:tabMode="scrollable"/>
    </RelativeLayout> 

the relative layout upon this will reduce the top and bottom margin

<style name="tab_bassr"  parent="TextAppearance.Design.Tab">
    <item name="android:layout_width">match_parent</item>
    <item name="android:tabStripEnabled">false</item>
    <item name="tabPaddingStart">5dp</item>
    <item name="tabPaddingEnd">5dp</item>
</style>
<style name="MineCustomTabText" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">14sp</item>
</style>

The style file is for left and right padding and the text size.

Magnetohydrodynamics