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?
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
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" />
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>
Kishan Solanki
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>