Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Customise TabLayout Indicator. Making Tab Indicator Round Corner?

I want to make only Tab indicator roundcorner not whole tab. I had tried setting custom view but it did not helped me. Any help would be appreciated. Thanks

like image 332
Jagjit Singh Avatar asked Feb 20 '17 08:02

Jagjit Singh


People also ask

How we can add tabs at runtime in TabLayout?

To display the tab, you need to add it to the layout via one of the addTab(Tab) methods. For example: TabLayout tabLayout = ...; tabLayout. addTab(tabLayout.

Can we use TabLayout without ViewPager in Android?

It is possible to use a TabLayout without a ViewPager by using a TabLayout. OnTabSelectedListener . For navigation within an Activity , manually populate the UI based on the tab selected.

How do you use TabLayoutMediator?

Open the MainActivity class. Firstly, initialize ViewPager2 and TabLayout then set the adapter on ViewPager2. Then, create a TabLayoutMediator to link the TabLayout to the ViewPager2, and attach it.


3 Answers

In support library 28 you can use the app:tabIndicator to set your custome drawable shape.

So you can do the following:

Create you custom shape indicator with round corner and in addition to that you can set the margin from left, right and bottom of the shape so the rounding is present more properly (so the indicator is not touching to the edges of the screen or view)

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:end="2dp"
        android:start="2dp"
        android:bottom="2dp">
        <shape android:shape="rectangle">
            <corners android:radius="20dp" />
            <solid android:color="@color/colorAccent" />
        </shape>
    </item>
</layer-list>

Then in your TabLayout xml set the drawable app:tabIndicator="@drawable/shape_tab_indicator"

You can also set app:tabIndicatorFullWidth="false" instead of margin set to the shape item.

like image 69
FinalDark Avatar answered Oct 02 '22 15:10

FinalDark


You can try setting the tabIndicator for your TabLayout using a custom vector image.

<com.google.android.material.tabs.TabLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        app:tabIndicator="@drawable/custom_tab_indicator"
        app:tabTextAppearance="?textAppearanceH3"
        app:tabMode="auto">

And below is your custom_tab_indicator.xml:

<vector
    android:height="4dp"
    android:width="24dp"
    android:viewportHeight="4.0"
    android:viewportWidth="24.0"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <path
        android:strokeWidth="4"
        android:fillColor="@color/red"
        android:strokeColor="@color/red"
        android:strokeLineCap="round"
        android:pathData="M12,4 H12, 4 z"/>
</vector>
like image 43
Manju Mathew Avatar answered Oct 04 '22 15:10

Manju Mathew


Thats simple actually, all you got todo is make a custom shape with rounded corners and set it as your tabIndicator.

Here is the Rounded Corner shape called custom_tab_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorAccent" />
    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="0dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
</shape>

Then set it as a tabIndicator in the tabLayout like so.

<com.google.android.material.tabs.TabLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabIndicator="@drawable/custom_tab_indicator"
    app:tabIndicatorFullWidth="false"
    app:tabIndicatorHeight="3dp" />

And that should give you that rounded effect at the edges.

like image 25
Yonatan Dawit Avatar answered Oct 03 '22 15:10

Yonatan Dawit