CODEWITHSUNDEEP
androidmaterial-designandroid-tablayout
BST Kaal
BST Kaal

Reputation: 3033

Adjust height between Tablayout title text and icon

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.

enter image description here

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"
        />

Upvotes: 11

Views: 5912

Answers (2)

Kevin Cao
Kevin Cao

Reputation: 61

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
    }

Upvotes: 6

R. Zag&#243;rski
R. Zag&#243;rski

Reputation: 20258

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.

Upvotes: 3

Related Questions