Customise TabLayout Indicator. Making Tab Indicator Round Corner?

Question

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

Answer 1

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.

Answer 2

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>

Answer 3

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.

Answer 4

Here's my code:

<com.google.android.material.tabs.TabLayout
        android:id="@+id/viewPagerTab"
        android:layout_width="wrap_content"
        android:layout_height="@dimen/_10sdp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="@dimen/_25sdp"
        android:minWidth="@dimen/_16sdp"
        android:backgroundTint="@color/white_40"
        android:translationZ="@dimen/_80sdp"
        app:layout_constraintBottom_toTopOf="@id/tvAnswerLater"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginBottom="@dimen/_5sdp"
        app:tabBackground="@drawable/tab_selector"
        app:tabGravity="center"
        app:tabIndicatorFullWidth="true"
        app:tabIndicatorHeight="0sp"
        app:tabMaxWidth="@dimen/_18sdp"
        app:tabMode="fixed"
        app:tabPaddingEnd="@dimen/_15sdp"
        app:tabPaddingStart="@dimen/_15sdp" />

To attach the tablayout with your viewpager:

TabLayoutMediator(binding.viewPagerTab, binding.vQuizPager) { _, _ ->
    }.attach()

Tab selector:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/selected_tab_indicator"
    android:state_selected="true"/>

<item android:drawable="@drawable/default_tab_indicator"/>

The default indicator may look like:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:start="@dimen/_1sdp"
    android:end="@dimen/_7sdp">
    <shape android:shape="oval">
        <solid android:color="@color/tab_color" />
    </shape>
</item>

Answer 5

You can use this library CircularIndicatorTabLayout.

Installation

• You can download the library's aar file from here
• Move circular-idicator-tab-layout-1.0.0.aar to app/libs
• In project build.gradle file add repositories { flatDir { dirs 'libs' } }
• In app build.gradle file add compile(name: 'circular-idicator-tab-layout-1.0.0', ext: 'aar')

Example

• In your layout file add

  <np.com.ngimasherpa.citablayout.CircularIndicatorTabLayout
      android:id="@+id/tab_monitoring_criteria"
      android:layout_width="match_parent"
      android:layout_height="@dimen/spacing_72"
      app:iconColor="@color/colorPrimaryDark"
      app:indicatorColor="@color/colorAccent"
      app:indicatorPosition="bottom"
      app:lineColor="@android:color/holo_red_dark"
      app:lineEnabled="true"
      app:mode="fixed"
      app:selectedIconColor="@color/colorAccent"
      app:tabViewIconId="@+id/iconTabViewLayout"
      app:tabViewLayoutId="@layout/tab_layout"
      app:tabViewTextViewColor="@color/colorPrimaryDark"
      app:tabViewTextViewId="@+id/textTabViewLayout"
      app:tabViewTextViewSelectedColor="@color/colorAccent"
      app:tab_gravity="fill" />
  

• In your java file

  SectionPagerAdapter mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());
  ViewPager mViewPager = (ViewPager) findViewById(R.id.container);
  CircularIndicatorTabLayout tabLayout = (CircularIndicatorTabLayout) findViewById(R.id.tab_monitoring_criteria);  
  mViewPager.setAdapter(mSectionsPagerAdapter);
  tabLayout.setupWithViewPager(mViewPager);
  tabLayout.setIcons(R.drawable.ic_arrow_drop_down, R.drawable.ic_audiotrack, R.drawable.ic_beach);