Reduce height between text and icon in TabItem under TabLayout

user_5544859 0
Viewed 1191

I have seen this post before with the same question, but recently Google introduced another TabLayout

QUESTION: Is there a way of reducing the space between text and icon using an attribute for instance, or another google-maintainable method in order to avoid having to go through creating a separate layout with text and an icon?

My current layout looks like this: 

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/mViewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/homeTabs">

    <com.google.android.material.tabs.TabLayout
        style="@style/Widget.MaterialComponents.TabLayout"
        android:id="@+id/homeTabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:tabIndicatorColor="@color/clear_blue">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/one_svg"
            android:text="@string/one"/>

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/two_svg"
            android:text="@string/two"/>

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/three_svg"
            android:text="@string/three"/>

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@drawable/four_svg"
            android:text="@string/four"/>


    </com.google.android.material.tabs.TabLayout>

</RelativeLayout>
android-xml android
2 Answers

As I could understand after some tests, no.

The Google Tab Item is created to match with the material design rules, so the space between icon and text is calculated following that rules, as you can read here in the post you reported.

Only way is to create a custom layout, with an ImageView and a TextView and inflating it in the TabItem.

I suggest you this way, because is fully customizable so you can create pratically what you want.

Hope I helped you! If you have any question write a comment.

user_91078210

No, looks like you cannot do that with just attribute. This change will definitely require creating custom layout. And this gonna be the right way - almost any application has custom views. But this class looks complicated (there is source code). So there is inner class TabView, that contains ImageView and TextView, and there is method inflateAndAddDefaultIconView(). The easiest way for you my opinion is just to copy that class into your project and change it as you need, the license (Apache 2.0) allows you to do that.

user_36213530
Related