1

Hola estoy haciendo una aplicación Android y he creado un tabLayout donde hay 3 tab, y me gustaría que la tab central tuviera un color distinto, tipo Instagram en la primera versión. No logro la manera de conseguirlo. Gracias.

tabLayout = (TabLayout) findViewById(R.id.tabs);
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());
        tabLayout.addTab(tabLayout.newTab());

 int[] tabIcons = {
                R.drawable.ic_home_menu,
                R.drawable.ic_publish_menu,
                R.drawable.ic_profile_menu,
        };

  tabLayout.getTabAt(0).setIcon(tabIcons[0]);
        tabLayout.getTabAt(1).setIcon(tabIcons[1]); //Cambiar el color de la TAB
        tabLayout.getTabAt(2).setIcon(tabIcons[2]);
3
  • 2
    Puedes agregar tu codigo? es dificil ayudarte sin ver que has intentado hacer
    – sioesi
    Commented el 17 oct. 2016 a las 17:04
  • El color del indicador predeterminado se toma de la AppTheme. Mira este enlace como referencia - stackoverflow.com/questions/30904138/… Commented el 17 oct. 2016 a las 21:07
  • Allí lo tienes. Ahora como hago para indicarle un color de fondo a la tab central. Commented el 17 oct. 2016 a las 22:38

3 respuestas 3

2

Lo mejor sería crear una vista personalizada y asignarla al Tab en la posición que deseas de tu TabLayout. Tomando como referencia tu ejemplo:

TabLayout.Tab centerTab = tabLayout.getTabAt(1);
View view = LayoutInflater.from(getContext()).inflate(R.layout.tab_layout_red, null);
centerTab.setCustomView(view);

Adicionalmente debes agregar las siguientes propiedades a tu TabLayout en el xml para eliminar el padding entre tabs.

app:tabPaddingStart="-1dp"
app:tabPaddingEnd="-1dp"

A continuación los recursos que utilicé para el ejemplo

tab_layout_red.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent" android:padding="15dip"
    android:background="@drawable/tab_red_indicator">

    <TextView
        android:id="@+id/tab_red_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:layout_gravity="center"
        tools:text="Tab Custom"
        />

</LinearLayout>

tab_red_indicador.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Non focused states -->
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_selected" />
    <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected" />

    <!-- Focused states -->
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_selected" />
    <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected" />

    <!-- Pressed -->
    <item android:state_selected="true" android:state_pressed="true" android:drawable="@drawable/tab_selected" />
    <item android:state_pressed="true" android:drawable="@drawable/tab_selected" />
</selector>

tab_selected.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#F44336" />
        </shape>
    </item>

    <item android:top="-3dp" android:bottom="0dp" android:left="-5dp" android:right="-5dp">
        <shape android:shape="rectangle">
            <padding android:left="10dp"
                android:top="15dp"
                android:right="10dp"
                android:bottom="15dp" />
            <stroke android:width="5dp" android:color="#B71C1C" />
            <solid android:color="#00000000" />
        </shape>
    </item>
</layer-list>

Cabe destacar que ésta es una implementación estática para un tab en especial.

3
  • Muy bueno, solo me faltaría saber como hago para que se muestra el icono, ya que si le añado la imagen tab_layout_red.xml, no se ve con el mismo tamaño que los otros. Commented el 19 oct. 2016 a las 14:49
  • Si asignándole un ícono al objeto Tab no te complace tienes como opción agregar en el TextView[@id/tab_red_title] un Drawable en alguno de los bordes. Sino un ImageView a un lado del TextView, con ésta opción podrías manejar el tamaño y ubicación del ícono a tu gusto y dejando el parámetro android:orientation="horizontal" en el LinearLayout del archivo tab_layout_red.xml dado el caso que quieras ubicarlo a uno de los lados del TextView.
    – Amenofis
    Commented el 19 oct. 2016 a las 18:07
  • ya lo intente, sigue estando mas pequeño que los otros. Commented el 19 oct. 2016 a las 18:22
0

Puedes hacerlo asi, cambia el color que desees.

tabLayout.getTabAt(2).getCustomView()
                        .setBackgroundColor(Color.parseColor("#FFFFFF"));
2
  • Caused by: java.lang.NullPointerException Commented el 18 oct. 2016 a las 13:31
  • Ese error aparece porque getCustomView devuelve null, no estas seteando un layout diferente para cada tab?
    – sioesi
    Commented el 18 oct. 2016 a las 13:41
0

Yo utilizo esta librería en la que te permite cambiar el color de los tabs de forma bastante cómoda

tabs.setIndicatorColorResource(R.color.morado);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.