Adjust height between Tablayout title text and icon

Question

I there any way to reduce the distance between the title text and the icon of TabLayout like in Google plus where the icons and text title have at least no distance. I have searched , but couldn't find anyway till now.

EDITED

This is how I am setting icon and title:

 tabLayout.getTabAt(3).setIcon(R.drawable.ic_more_horiz_white_24dp);
 tabLayout.getTabAt(3).setText("More");

And this is my TabLayout:

<android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/white"
        app:tabIndicatorHeight="2dp"
        app:tabTextAppearance="?android:attr/textAppearanceSmall"
        />

Lilllie

are you using any custom layout for your TabLayout? – Timeserver

did you found a solution to this? – Sattler

did u found any solution for this ? – Tintinnabulation

any solution for this? – Ptah

Answer 1

you can try this code, it works for me

for (i in 0 .. tabLayout.tabCount) {
        val params = tabLayout.getTabAt(i)?.view?.getChildAt(0)?.layoutParams as LinearLayout.LayoutParams?
        params?.bottomMargin = 0
        tabLayout.getTabAt(i)?.view?.getChildAt(0)?.layoutParams = params
    }

Syllogism

Answer 2

TabLayout has been introduced to help developers conform to Material Design standards. In that case it is appropriate tab height, padding between icon and text and icon and text size. Look into Material Design Guidelines in order to get familiar with them.

However if you really don't like the padding (and don't want to build application according to Material Design guidelines) you can change it.

You can use @user13 answer. That way You can pass your layout.

However remember that if you would like to build TabLayout more dynamically and use it's TabLayout.Tab#setText(java.lang.CharSequence) and TabLayout.Tab#setIcon(int) you must use layout like that:

<ImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@android:id/icon"/>
<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0"
    android:id="@android:id/text1"
    android:gravity="center"
    android:layout_below="@android:id/text1" />

Look at the identifiers @android:id/icon and @android:id/text1. If you add those ID's the TabLayout your layout will work with TabLayout class code. Have a look at the documentation for more info.

Ontiveros

Sure thnx , let me try this. – Lilllie

You use "weight", which only works in LinearLayout parents and you also use "layout_below" which only works in RelativeLayout parents. I think this should be wrapped in LinearLayout and "layout_below" property can be removed. – Daysidayspring

Thanks! Your answer helped me! +1 – Faithless

How to make this work while using MVVM with databinding? – Ptah