CODEWITHSUNDEEP
androidmaterial-designandroid-tablayout
drak
drak

Reputation: 31

Custom selected tab indicator based on Material Design 2 in Google's Apps

I am looking for a way to make the rounded pill/ rounded corner selected tab indicator based on Google's latest Material Design. I have made a drawable with the desired results and implemented it as "app:tabIndicator", but it's not working properly.

This is what I want to achieve

rounded_tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:bottom="5dp"
        android:end="5dp"
        android:start="5dp">
        <shape
            android:shape="rectangle"
            app:tabIndicatorFullWidth="false"
            app:tabIndicatorHeight="5dp">
            <corners android:radius="8dp" />
            <solid android:color="@color/colorPrimary" />
        </shape>
    </item>
</layer-list>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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:fitsSystemWindows="true"
    tools:context="com.example.android.tourguideapp.MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/htab_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/htab_collapse_toolbar"
            android:layout_width="match_parent"
            android:layout_height="256dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:titleEnabled="false">

            <ImageView
                android:id="@+id/tour_image_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/dscn0585"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.80" />

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:alpha="0.3"
                android:background="@android:color/black"
                android:fitsSystemWindows="true" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/htab_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="top"
                android:layout_marginBottom="40dp"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabs"
                style="@style/CategoryTab"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                app:tabIndicatorHeight="5dp"
                app:tabIndicator="@drawable/rounded_tab_indicator"
                app:layout_collapseMode="pin"
                app:tabMode="scrollable" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Upvotes: 3

Views: 1087

Answers (2)

Soroush Lotfi
Soroush Lotfi

Reputation: 582

tab indicator drawable:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size
        android:width="100dp"
        android:height="2dp" />
    <corners
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp">
     </corners>
    <solid
        android:color="#1475e7">
    </solid>
</shape>

tab layout:

<com.google.android.material.tabs.TabLayout
    ...
    app:tabIndicatorFullWidth="false"
    app:tabIndicator="@drawable/tab_indicator"
    ... />

Upvotes: 1

M.ekici
M.ekici

Reputation: 763

When you check the source code of the TabLayout, you can see that it draws the indicator drawable you provide with bounds whose size is calculated according to size of the tab. In order to achieve a tab layout like you shared, you should give a padding to your drawable. However, the size of the tabs varies so you have to provide the padding in percentage style. I don't know whether you can such a padding operation in the xml file but you can do that in a custom drawable class extending Drawable.

Upvotes: 0

Related Questions