AndroidPub
Published in

AndroidPub

Custom TabLayout Indicator in — Android.

Make your Indicator with your choice.

Photo by Hal Gatewood on Unsplash

This article belongs to what I have learned today, so basically I need to Implement a custom TabLayout Indicator, with rounded corners and with some extra spacing like the below example.

Custom TabLayout Indicator

Visit my website at https://danishamjad.com/

Basic TabLayout Indicator Color:

If we need to set the Indicator color, without any custom Indicator, so in that case, we only need to set the app:tabIndicatorColor as you can from the below XML file:

<com.google.android.material.tabs.TabLayout
android:id="@+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:backgroundTint="@color/white"
app:tabIndicatorColor="#DCDCDC"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/smoke_black"
app:tabTextColor="@color/warm_grey" />

From the above XML, you will see the normal TabLayout Indicator color, without any custom view.

Result:

TabLayout Indicator Color

More Attributes:

You can also play with other attributes of TabLayout some of them are listed below.

app:tabIndicatorColor="@color/azul"
app:tabIndicatorHeight="3dp"
app:tabMaxWidth="0dp"

Custom TabLayout Indicator Implementation:

Now, let’s start with the custom TabLayout Indicator Implementation, Let’s break into steps:

Step1

Make a drawable of layer-list, with the name tab_indicator, Like below code snippet.

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

In the above code, I added a rectangle shape tag, with a corner radius of 5dp ànd with a solid color.

Step2

We need to add a drawable to our TabLayout, Like below code snippet.

app:tabIndicator="@drawable/tab_indicator"
Custom TabLayout Indicator

Now what we achieved is half of our requirements, currently showing a custom TabLayout Indicator, but now we need some spacing from the bottom and as well as from left, right Indicator.

Step3

For bottom padding, we need to addandroid:paddingBottom to TabLayout, Like the below code snippet, and we will see the result.

android:paddingBottom="6dp"
TabLayout Custom Indicator with Bottom Padding

Step4

For Left/Right Indicator Margins, we need to add margin in our drawable file <item> tag, which we created earlier.

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

In the above code, what I did is to add an end and `margin to the <item> tag, and we will see the result.

Custom TabLayout Indicator

Finally, we achieved our goal, everything is perfectly fine, what I noticed is it’s working fine on all versions of Android except Android 9.0 which is Pie. Let me show you how it look on Android 9.0

Custom TabLayout Indicator on Android 9.0

The issue was it’s not picked up the color which I defined in my drawable, now let’s directly move towards the solution.

Solution:

The Solution for the above issue is to define the app:tabIndicatorColor the color which I defined on my drawable, the same color I defined in the app:tabIndicatorColor

That’s it after defining the app:tabIndicatorColor it's working fine in all the android versions.

Conclusion

This article described to you how you can create a custom TabLayout Indicator, also described to you how you can be fixed the Android 9.0 color issue.

I hope this article is helpful. If you think something is missing, have questions, or would like to give feedback, go ahead and leave a comment below. I’d appreciate the feedback.

I’ve written some other Android-related content, and if you liked what you read here, you’ll probably also enjoy this:

Sharing (knowledge) is caring 😊 Thanks for reading this article. Be sure to clap or recommend this article if you found it helpful. It means a lot to me.

If you need any help, join me on Twitter, LinkedIn, GitHub, and Subscribe to my Youtube Channel.

--

--

--

The (retired) Pub(lication) for Android & Tech, focused on Development

Recommended from Medium

How to use a Different google-services.json file with multiple Product flavors — Android

Flutter — Error: FileNotFoundException: AndroidManifest.xml

Link C/C++ library dependencies to your own C/C++ code in an Android application using CMake

Demystifying DiffUtil.ItemCallback Class

Metrus

How to Remote Debug Websites on Android Devices With Chrome

Surah Yasin

How to add adaptive banner ads in your flutter app using google mobile ads?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Danish Amjad

Danish Amjad

Senior Software Engineer(Android). Open Source Contributor, Technical Writer, Email: Dani.amjad12@gmail.com check my website at https://danishamjad.com/

More from Medium

How to Intercepter HTTPS on Android With Requestly SDK

App Storage Options

Create Upload Service for Amazon S3 in Android

TDD — Part III, Hilt and Robolectric (Android)