How can we reduce the gap between tab layout text and its indicator

Question

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/htab_maincontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true">

            <android.support.design.widget.AppBarLayout
                android:id="@+id/htab_appbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorBlack"
                android:fitsSystemWindows="false"
                android:theme="@style/AppTheme">

                <android.support.design.widget.CollapsingToolbarLayout
                    android:id="@+id/htab_collapse_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="256dp"
                    android:fitsSystemWindows="true"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed"
                    app:titleEnabled="false">

                    <ImageView
                        android:id="@+id/htab_header"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:background="@drawable/logo_inner"
                        android:fitsSystemWindows="true"
                        app:layout_collapseMode="parallax" />

                    <android.support.v7.widget.Toolbar
                        android:id="@+id/htab_toolbar"
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        android:background="@android:color/transparent"
                        app:contentInsetStart="0dp"
                        app:layout_collapseMode="pin"
                        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

                    <android.support.design.widget.TabLayout
                        android:id="@+id/htab_tabs"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_gravity="bottom"
                        android:background="@color/colorBlack"
                        app:tabGravity="center"
                        app:tabIndicatorColor="@color/colorSelectText"
                        app:tabPaddingEnd="@dimen/space_micro"
                        app:tabPaddingStart="@dimen/space_micro"
                        app:tabSelectedTextColor="@color/colorSelectText"
                        app:tabTextAppearance="@style/TabLayoutTextStyle"
                        app:tabTextColor="@color/colorWhite">


                    </android.support.design.widget.TabLayout>


                </android.support.design.widget.CollapsingToolbarLayout>

            </android.support.design.widget.AppBarLayout>



        </android.support.design.widget.CoordinatorLayout>

I want to reduce the space between Tab Layout text and its indicator. I am using tab layout with collapsing toolbar that when it slides up, Tab layout will pin on the top.

I have 4 tabs with its corrosponding indicator.

I am sharing my xml & have attached image also.

Marquess

Please reduce size of text using tabTextAppearance. also you can set fix height of tablayout for reduce space between Tab Layout text and its indicator – Rigdon

Hi Pragya , Check my answer below , it will surely help you – Impost

@NileshRathod: thanks man....its working... but can you suggest me some solution for decreasing the height of TabLayout. – Marquess

@PragyaMendiratta wait i will post an ans – Plait

@NileshRathod: I changed the height of toolbar but when I collapse it, it show some space between toolbar and tab layout. – Marquess

@NileshRathod: you haven't posted answer .... !!! – Marquess

@PragyaMendiratta sorry for the delay little busy in work check my below ans and let me know in case of any query – Plait

Answer 1

Try this

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/htab_maincontent"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">


    <android.support.design.widget.AppBarLayout
        android:id="@+id/htab_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#2fff00"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/htab_collapse_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false">


            <android.support.v7.widget.Toolbar
                android:id="@+id/htab_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@android:color/transparent"
                app:contentInsetStart="0dp"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

            <ImageView
                android:id="@+id/htab_header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/ic_launcher_background"
                app:layout_collapseMode="parallax" />


        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/htab_tabs"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:layout_gravity="bottom"
            android:background="@drawable/tab_selector"
            app:layout_anchor="@+id/MyAppbar"
            app:layout_anchorGravity="bottom"
            app:tabGravity="fill"
            app:tabIndicatorColor="#F21757"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="#F21757"
            app:tabTextColor="@android:color/white" />


    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

drawable/tab_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true" android:state_pressed="false">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">

            <item android:top="-2dp" android:left="-5dp" android:right="-5dp" android:bottom="2dp">
                <shape android:shape="rectangle">

                    <solid android:color="@android:color/white"/>
                    <stroke android:color="@color/colorPrimary" android:width="2dp"/>

                </shape>
            </item>
        </layer-list>
    </item>

    <item android:state_selected="true" android:state_pressed="true">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">

            <item android:top="-2dp" android:left="-5dp" android:right="-5dp" android:bottom="2dp">
                <shape android:shape="rectangle">

                    <solid android:color="@android:color/white"/>
                    <stroke android:color="@color/colorPrimary" android:width="2dp"/>

                </shape>
            </item>
        </layer-list>
    </item>

</selector>

Plait

@PragyaMendiratta happy to help you – Plait

Answer 2

You should set the following property

app:tabPaddingBottom="-10dp"

Rianna

Answer 3

Simply we can set the tabPaddingBottom to any negative value, say -15dp, as per our requirement.

tabPaddingBottom = "-15dp" worked for me.

Refer here for other paraments: https://material.io/components/tabs/android#scrollable-tabs

Jesusa

Answer 4

Try with this custom TabLayout and design your your TextView as you need. Default TextView may has margin or padding. Let me know if it works.

public class CustomTabLayout extends TabLayout{

        private boolean useCustomTab;

        public CustomTabLayout(Context context) {
            super(context);
        }

        public CustomTabLayout(Context context, AttributeSet attrs) {
            super(context, attrs);
        }

        public CustomTabLayout(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
        }

        @Override
        public void addTab(@NonNull Tab tab, boolean setSelected) {
            if (useCustomTab){
                TextView tv = (TextView) View.inflate(getContext(), R.layout.tab_text, null);
                tv.setText(tab.getText());
                tab.setCustomView(tv);
            }
            super.addTab(tab, setSelected);
        }

        public void setUseCustomTab(boolean useCustomTab){
            this.useCustomTab = useCustomTab;
        }

    }

Widescreen

Is this solution will work for decreasing the height of Tab layout ?? – Marquess

I use this for to give extra space and use custom fonts. It's working well. Just create a layout with one textView and do not give any extra padding or margin. It should work. Let me know if it is working for this case. – Widescreen

Answer 5

I know this is coming late but for anyone that may later come across the same issue, below worked for me. In your CardView, add:

app:cardElevation="0dp"
app:cardUseCompatPadding="false"

Sarcous