Home » Android » android – Customise TabLayout Indicator. Making Tab Indicator Round Corner?

android – Customise TabLayout Indicator. Making Tab Indicator Round Corner?

Posted by: admin June 15, 2020 Leave a comment

Questions:

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

How to&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.

Answer:

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);
    

Answer:

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>