TabLayout establece el espaciado o el margen de cada pestaña

5 minutos de lectura

Quiero establecer un margen entre cada pestaña. Al igual que en PagerTabStrip, que tiene setTextSpacing (int textSpacing) para hacer que el texto se espacie entre pestañas. ¿Puede TabLayout hacer eso?

Avatar de usuario de Sammy Patenotte
Sammy Patente

También he estado luchando contra este problema por un tiempo, encontré la solución en este hilo: Android Design Support Library TabLayout usando un diseño de pestañas personalizado pero el diseño envuelve las pestañas

<!-- Add the padding to tabPaddingStart and/or tabPaddingEnd -->
<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="@dimen/tab_layout_height"
        app:tabPaddingStart="10dp"
        app:tabPaddingEnd="10dp">

  • También elimina el espacio entre pestañas (que son predeterminados) si configura los rellenos en 0. ¡Gracias!

    – Yusuf Çağlar

    12 de marzo de 2018 a las 18:07


  • ¿Hay una forma dinámica para eso?

    – john-salib

    23 de enero de 2019 a las 12:45

  • No que yo sepa, solo revisé dos veces el código fuente de TabLayout, y parece que es solo a través de XML.

    – Sammy Patente

    24 de julio de 2019 a las 16:37

  • por defecto agrega relleno – use app:tabPaddingStart=”0dp” app:tabPaddingEnd=”0dp” si no quiere relleno

    – vive el amor

    21 de marzo de 2021 a las 16:37

Puede usar el atributo tabMinWidth. Me gusta esto.

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="44dp"
    app:tabIndicatorColor="@color/default_enable"
    app:tabTextColor="@color/font_default_03"
    app:tabSelectedTextColor="@color/default_enable"
    app:tabMinWidth="50dp"
    android:clipToPadding="false"
    android:paddingLeft="4dp"
    android:paddingRight="4dp" />

  • Aww, fue clipToPadding lo que me ayudó a colocar el indicador pero aún tengo un área grande en la que se puede hacer clic.

    – Sebastián Helzer

    4 de febrero de 2022 a las 15:13

Avatar de usuario de Rasoul Miri
Rasoul Miri

Puede quitar peso y establecer marginEnd,marginStart y width para pestañas en TabLayout.

kotlin:

val tabs = tabLayout.getChildAt(0) as ViewGroup

for (i in 0 until tabs.childCount ) {
       val tab = tabs.getChildAt(i)
       val layoutParams = tab.layoutParams as LinearLayout.LayoutParams
       layoutParams.weight = 0f
       layoutParams.marginEnd = 12.dpToPx()
       layoutParams.marginStart = 12.dpToPx()
       layoutParams.width = 10.dpToPx()
       tab.layoutParams = layoutParams
       tabLayout.requestLayout()
}

Java:

ViewGroup tabs = (ViewGroup) tabLayout.getChildAt(0);

for (int i = 0; i < tabs.getChildCount() - 1; i++) {
       View tab = tabs.getChildAt(i);
       LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) tab.getLayoutParams();
       layoutParams.weight = 0;
       layoutParams.setMarginEnd(12);
       layoutParams.setMarginEnd(12);
       layoutParams.width = 10;
       tab.setLayoutParams(layoutParams);
       tabLayout.requestLayout();
}

  • debe llamar a tabLayout.requestLayout() después de for-loop para un mejor rendimiento

    – gturedi

    8 de febrero de 2021 a las 13:26

  • Obtengo un indicador en tabs.getChildAt(i)

    – kirkadev

    13 de agosto de 2021 a las 16:53

diseño

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

Java

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
int betweenSpace = 100;

ViewGroup slidingTabStrip = (ViewGroup) tabLayout.getChildAt(0);

for (int i=0; i<slidingTabStrip.getChildCount()-1; i++) {
    View v = slidingTabStrip.getChildAt(i);
    ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) v.getLayoutParams();
    params.rightMargin = betweenSpace;
}

Cuando configura tabPadding para que no funcione, puede intentar configurar tabMaxWidth y tabMinWidth. es trabajo para mi

  <android.support.design.widget.TabLayout
            app:tabMaxWidth="200dp"
            app:tabMinWidth="20dp"
            app:tabPaddingStart="0dp"
            app:tabPaddingEnd="16dp"
            app:tabMode="scrollable" />

avatar de usuario de masoud jafari
masud jafari

si alguien tiene un fondo personalizado para las pestañas (selector), solo necesita agregar una lista de capas al fondo de las pestañas y establecer un margen para ellas

selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg_selected_tab" android:state_selected="true"/>
    <item android:drawable="@drawable/bg_unselected_tab"/>
</selector>

pestaña seleccionada:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:right="8dp" android:left="8dp">
        <shape>
            <stroke android:width="1dp" android:color="@color/Green"/>
            <corners android:radius="@dimen/cardCornerRedius"/>
        </shape>
    </item>
</layer-list>

pestaña no seleccionada:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:right="8dp" android:left="8dp">
        <shape>
            <stroke android:width="1dp" android:color="@color/Gray"/>
            <corners android:radius="@dimen/cardCornerRedius"/>
        </shape>
    </item>
</layer-list>

Avatar de usuario de Kishan Solanki
Kishan Solanki

ingrese la descripción de la imagen aquí

Cuando querías lograr algo así para tu TabLayout luego sigue estos pasos:

1. Diseño de código XML:

    <com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/dp_5"
    app:tabBackground="@drawable/tab_selector"
    app:tabIndicator="@null"
    app:tabSelectedTextColor="@color/white"
    app:tabTextColor="@color/black" />

2. Ficha Selector dibujable de fondo (drawable/tab_selector):

   <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_background_selected" android:state_selected="true" />
    <item android:drawable="@drawable/tab_background_unselected" />
</selector>

3. Drawable de tab_background_selected :

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

    <item
        android:bottom="@dimen/dp_5"
        android:left="@dimen/dp_5"
        android:right="@dimen/dp_5"
        android:top="@dimen/dp_5">

        <shape>
            <solid android:color="@color/btnBG" />
            <corners android:radius="@dimen/dp_10" />
        </shape>
    </item>
</layer-list>

4. Dibujable de tab_background_unselected:

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

    <item
        android:bottom="@dimen/dp_5"
        android:left="@dimen/dp_5"
        android:right="@dimen/dp_5"
        android:top="@dimen/dp_5">

        <shape>
            <solid android:color="@color/white" />
            <corners android:radius="@dimen/dp_10" />
        </shape>
    </item>
</layer-list>

¿Ha sido útil esta solución?