Android Custom Tab Material Layout With Dynamic Padding

Hello, actually this is my first article so, hope you enjoy. 🫡

Introduction :

TabLayout is used to implement horizontal tabs. TabLayout is released by Android after the deprecation of ActionBar.TabListener (API level 21).

TabLayout is introduced in design support library to implement tabs, and TabLayout provides a horizontal layout to display tabs. 😀

But, we know that Android’s phone have many different screen size and resolution, 🤨

picture from stackoverflow thread

For example, we have a screen size like the image above, we can see that there is still free space left on the tab view, as far as I know the design given by the designer usually looks very symmetrical when there are many or few items on the tab, no free space left, and that would make the designer probably feel sad.🥲😢😭

picture from stackoverflow thread

or when there is a tab item that exceeds the screen but we want the width of the tab to be made fixed not scrollable like the image above.😣

then how we reach that things like this?

same padding, and with layout tabs that have the ability to be reused but with a dynamic number of tab items

from what i tried to try by reading the documentation and reading some articles i found the answer. 🤫😱🤩

First, you have to create custom class and extend it to TabLayout like this📝

ScalableTabLayout(context: Context) : TabLayout(context)

and then override the onMeasure function like this,📝

val tabLayout = getChildAt(0) as ViewGroup
val childCount = tabLayout.childCount

After that we need to define the tabLayout and the childCount (the total number of items), and then

For sure this function is for items > 0, 😗

if (childCount > 0) {
    var widthPixels = MeasureSpec.getSize(widthMeasureSpec)
    widthPixels -= 16 * childCount
    val tabMinWidth = widthPixels / childCount
    var remainderPixels = widthPixels % childCount
    tabLayout.forEach {
        if (remainderPixels > 0) {
            it.minimumWidth = tabMinWidth + 1
            remainderPixels--
        } else {
            it.minimumWidth = tabMinWidth
        }
    }
}

• The widthPixels is to measure the screen size with dp size, and
• Then it’s just my personal measure of tab size it needs to decrease by 16 because there is a default padding size of the tab layout per item 🤯, and
• The tabMinWidth is to set the width size of each item, divided by the total of the items, and
• We also need to calculate the remaining pixels because there may be a quotient of the widthPixel divided by the total items, and
• We can set the tab items with tab.minimumWidth = tabMinWidth, and
• On the xml just call the class.

<ScalableTabLayout

and these are the full code :

class ScalableTabLayout(context: Context) : TabLayout(context) {

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        val tabLayout = getChildAt(0) as ViewGroup
        val childCount = tabLayout.childCount
        if (childCount > 0) {
            var widthPixels = MeasureSpec.getSize(widthMeasureSpec)
            widthPixels -= 16 * childCount
            val tabMinWidth = widthPixels / childCount
            var remainderPixels = widthPixels % childCount
            tabLayout.forEach {
                if (remainderPixels > 0) {
                    it.minimumWidth = tabMinWidth + 1
                    remainderPixels--
                } else {
                    it.minimumWidth = tabMinWidth
                }
            }
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    }
}

By with that, we can create tab layouts with reusability and with a dynamic number of items.🤩

Hope you enjoy reading this article, looks simple but very useful because of the current Android trend which is completely dynamic and reusable.🥳

Don’t forget to hit the clap button and if you have any question don’t hesitate to write it in the comments column, and I really appreciate it for those of you who read this article to the end🥰.

Reference :

Android ViewPager2 & TabLayout. ViewPager2 is introduced in this year… | by Myrick Chow | ITNEXT

Android Material TabLayout using Fragments | Badges in TabLayout | Android Studio | Java | by Golap Gunjan Barman | Nerd For Tech | Medium

TabLayout | Android Developers