Search code examples
androidandroid-tablayout

How to customize Background for the selected TabItem in Android TabLayout?


I am trying to implement the tablayout as the following design- Expected_design

I could design as this-

Designed_tablayout

Could anyone please help me to achieve the following points?

  1. When a tab is selected, the background should fill the 1st half or the 2nd half of the tab.
  2. For a selected tab item, there is a small margin for the background. It should not completely fill the tab.

Code: MainActvity.xml

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab"
            android:layout_width="440sp"
            android:layout_height="64sp"
            android:layout_marginTop="100dp"
            android:layout_marginBottom="101dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:background="@drawable/backGroundWithWhiteBorder"
            style="@style/customTabLayout"
            app:tabBackground="@drawable/tab_color_selector" />

tab_color_selector.xml

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

backGroundWithWhiteBorder.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="376dp"
    android:height="64dp"
    android:viewportWidth="376"
    android:viewportHeight="64">
  <path
      android:strokeWidth="1"
      android:fillColor="#00000000"
      android:strokeColor="#fff"/>
</vector>

Style.xml

    <style name="customTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabTextAppearance">@style/TabText</item>
    </style>
    <style name="TabText" parent="@android:style/TextAppearance.Widget.TabWidget">
        <item name="android:textAllCaps">false</item>
        <item name="android:textSize">30sp</item>
        <item name="android:textAlignment">center</item>
    </style>

Solution

  • You can achieve this kind of TabLayout with a MaterialCardView as the parent and the TabLayout as the child of it. To draw the outer rectangle section you can simply use the properties app:strokeWidth and app:strokeColor to draw the border and you can move the TabLayout inside the MaterialCardView using the android:layout_margin property.

    Example:

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/black">
    
        <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:cardBackgroundColor="@android:color/black"
            app:cardCornerRadius="0dp"
            app:strokeWidth="1dp"
            app:strokeColor="@android:color/white">
    
            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:backgroundTint="@android:color/transparent"
                android:layout_margin="5dp"
                app:tabGravity="fill"
                app:tabMode="fixed"
                app:tabMaxWidth="0dp"
                app:tabIndicatorColor="@android:color/transparent"
                app:tabIndicatorHeight="0dp"
                app:tabRippleColor="@android:color/transparent"
                app:tabTextColor="@android:color/darker_gray"
                app:tabSelectedTextColor="@android:color/white"
                app:tabBackground="@drawable/tabs_selector"
                app:tabTextAppearance="@style/CustomTabTextAppearance">
    
                <com.google.android.material.tabs.TabItem
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="All" />
    
                <com.google.android.material.tabs.TabItem
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Favourites" />
    
            </com.google.android.material.tabs.TabLayout>
    
        </com.google.android.material.card.MaterialCardView>
    
    </androidx.constraintlayout.widget.ConstraintLayout>
    

    where @drawable/tabs_selector is the drawable tabBackground selector:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_selected="true">
            <shape android:shape="rectangle">
                <solid android:color="#5F9EA0" />
                <corners android:radius="0dp" />
            </shape>
        </item>
        <item android:state_selected="false">
            <shape android:shape="rectangle">
                <solid android:color="@android:color/transparent" />
                <corners android:radius="0dp" />
            </shape>
        </item>
    </selector>
    

    and @style/CustomTabTextAppearance is used to set a custom Tab Text Appearance:

    <style name="CustomTabTextAppearance" parent="TextAppearance.MaterialComponents.Button">
        <item name="android:textAllCaps">false</item>
        <item name="android:textSize">14sp</item>
    </style>
    

    Result:

    all_tab_selected

    favourites_tab_selected