How to insert a default color in a tab in tabLayout Android?

1

Hi, I am doing an Android application and I have created a tabLayout where there is 3 tab, and I would like the central tab to have a different color, like Instagram in the first version. I can not find a way to get it. Thanks.

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]);
    
asked by Eric Retamero 17.10.2016 в 18:23
source

3 answers

2

It would be best to create a custom view and assign it to the Tab in the position you want from your TabLayout. Taking your example as a reference:

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

Additionally, you must add the following properties to your TabLayout in the xml to eliminate padding between tabs.

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

Below are the resources that I used for the example

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_indicator.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>

It should be noted that this is a static implementation for a special tab.

    
answered by 18.10.2016 / 17:03
source
0

You can do it this way, change the color you want.

tabLayout.getTabAt(2).getCustomView()
                        .setBackgroundColor(Color.parseColor("#FFFFFF"));
    
answered by 18.10.2016 в 13:47
0

I use this library in which you can change the color of the tabs quite comfortably

tabs.setIndicatorColorResource(R.color.morado);
    
answered by 18.10.2016 в 16:45