La pestaña no ocupa todo el ancho en una tableta [Usando android.support.design.widget.TabLayout]

Resuelto Max asked hace 54 años • 13 respuestas

Tengo pestañas de configuración como ACTUALIZACIÓN 29/05/2015 en esta publicación. Las pestañas ocupan todo el ancho en mi móvil Nexus 4, pero en la tableta Nexus 7 están en el centro y no cubren todo el ancho de la pantalla.

Captura de pantalla de Nexus 7 Nexus7 Captura de pantalla de Nexus 4 Nexo 4

Max avatar Jan 01 '70 08:01 Max
Aceptado

Una respuesta "más simple" tomada prestada de Kaizie simplemente agregaría app:tabMaxWidth="0dp"en su TabLayoutxml:

<android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed" />
Adam Johns avatar Jul 24 '2015 22:07 Adam Johns

Tuve el mismo problema y verifiqué el estilo TabLayout y descubrí que su estilo predeterminado Widget.Design.TabLayouttiene diferentes implementaciones (normal, horizontal y sw600dp).

El que necesitamos es el de tablets (sw600dp) el cual tiene la siguiente implementación:

<style name="Widget.Design.TabLayout" parent="Base.Widget.Design.TabLayout">
        <item name="tabGravity">center</item>
        <item name="tabMode">fixed</item>
 </style>

De este estilo usaremos " tabGravity " (cuyos valores posibles son "center" o "fill") usando el valor "fill".

Pero necesitamos profundizar más y luego vemos que este se extiende desde Base.Widget.Design.TabLayout, cuya implementación es:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
    <item name="tabMaxWidth">@dimen/tab_max_width</item>
    <item name="tabIndicatorColor">?attr/colorAccent</item>
    <item name="tabIndicatorHeight">2dp</item>
    <item name="tabPaddingStart">12dp</item>
    <item name="tabPaddingEnd">12dp</item>
    <item name="tabBackground">?attr/selectableItemBackground</item>
    <item name="tabTextAppearance">@style/TextAppearance.Design.Tab</item>
    <item name="tabSelectedTextColor">?android:textColorPrimary</item>
</style>

Entonces, a partir de este estilo necesitaremos anular " tabMaxWidth ". En mi caso lo puse en 0dp, por lo que no tiene límite.

Y mi estilo se veía así:

<style name="MyTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabGravity">fill</item>
        <item name="tabMaxWidth">0dp</item>
</style>

Y luego la barra de pestañas ocupará toda la pantalla de lado a lado.

Kaizie avatar Jul 02 '2015 15:07 Kaizie

Solución para desplazamiento: (TabLayout.MODE_SCROLLABLE), es decir, cuando necesita más de 2 pestañas (pestañas dinámicas)

Paso 1: estilo.xml

<style name="tabCustomStyle" parent="Widget.Design.TabLayout">
            <item name="tabGravity">fill</item>
            <item name="tabMaxWidth">0dp</item>
            <item name="tabIndicatorColor">#FFFEEFC4</item>
            <item name="tabIndicatorHeight">2dp</item>
            <item name="tabTextAppearance">@style/MyCustomTabTextAppearance</item>
            <item name="tabSelectedTextColor">#FFFEEFC4</item>
        </style>

        <style name="MyCustomTabTextAppearance" parent="TextAppearance.Design.Tab">
            <item name="android:textSize">@dimen/tab_text_size</item>
            <item name="android:textAppearance">@style/TextAppearance.roboto_medium</item>
            <item name="textAllCaps">true</item>
        </style>
        <style name="TextAppearance.roboto_medium" parent="android:TextAppearance">
            <item name="android:fontFamily">sans-serif-medium</item>
        </style>

Paso 2: Su diseño xml

<android.support.design.widget.TabLayout
            android:id="@+id/sliding_tabs"
            style="@style/tabCustomStyle"
            android:layout_width="match_parent"
            android:layout_height="@dimen/tab_strip_height"
            android:background="@color/your_color"
            app:tabMode="scrollable"
            app:tabTextColor="@color/your_color" />

Paso 3: En tu Actividad/Fragmento donde tengas pestañas.

/**
     * To allow equal width for each tab, while (TabLayout.MODE_SCROLLABLE)
     */
    private void allotEachTabWithEqualWidth() {

        ViewGroup slidingTabStrip = (ViewGroup) mTabLayout.getChildAt(0);
        for (int i = 0; i < mTabLayout.getTabCount(); i++) {
            View tab = slidingTabStrip.getChildAt(i);
            LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) tab.getLayoutParams();
            layoutParams.weight = 1;
            tab.setLayoutParams(layoutParams);
        }

    }
Ram Prakash Bhat avatar Aug 18 '2016 12:08 Ram Prakash Bhat