Tablayout: opacity of icons used on selection / deselection

Question

This is the whatsapp app. Notice that when you select a tab, the word 'CONTACTS' is white and the other words, CALLS and CHATS have probably alpha at 50%:

How did they manage to do this?

I want to do something similar but with icons instead of text but the principle should be the same. I have done the following with my TabLayout:

    TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs);
    tabLayout.setTabGravity(tabLayout.GRAVITY_FILL);
    tabLayout.setupWithViewPager(viewPager);
    tabLayout.getTabAt(0).setIcon(R.drawable.icon1);
    tabLayout.getTabAt(1).setIcon(R.drawable.icon2);
    tabLayout.getTabAt(2).setIcon(R.drawable.icon3);

This is my xml for my tabLayout:

<android.support.design.widget.TabLayout
    android:id="@+id/sliding_tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="#cccccc"
    app:tabPaddingStart="-1dp"
    app:tabPaddingEnd="-1dp" />

I also read this thread: How do I change a tab background color when using TabLayout? but it is not exactly what I want.

The thread says it would change the color of the entire tab when you select or unselect it. That would mean you would change the whole background behind the icon into a different color whereas I just want the icon to have a lower opacity, not the background AND icon to have a lower opacity.

Whatsapp didn't do this - you can see only the word "CALLS" is set to a lower opacity, not the background behind the word.

"How did they manage to do this?" -- [a `ColorStateList`](http://developer.android.com/reference/android/content/res/ColorStateList.html) for the text color would be my guess. "I just want the icon to have a lower opacity" -- a `StateListDrawable` would be the equivalent approach for an image. — CommonsWare, Jan 18 '16 at 18:07
I tried to use StateListDrawable but ended up being too complicated. I used Avinash's tip instead and it worked successfully. — Simon, Jan 18 '16 at 18:44
Of course, Whatsapp is using text, not icons, so they can use [setTabTextColors()](http://developer.android.com/reference/android/support/design/widget/TabLayout.html#setTabTextColors(int,%20int)) — ianhanniballake, Jan 18 '16 at 19:30

score 5 · Accepted Answer · answered Jan 18 '16 at 18:43

Similar to Avinash answer, you would have to do the following for icons:

   //on first open of app, the icons will be set to alpha of 50% for all other icons besides the current selected icon
    tabLayout.getTabAt(0).getIcon().setAlpha(128);
    tabLayout.getTabAt(2).getIcon().setAlpha(128);
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            switch (position) {
                case 0:
                    tabLayout.getTabAt(0).getIcon().setAlpha(255);
                    tabLayout.getTabAt(1).getIcon().setAlpha(128);
                    tabLayout.getTabAt(2).getIcon().setAlpha(128);
                    break;
                case 1:
                    tabLayout.getTabAt(0).getIcon().setAlpha(128);
                    tabLayout.getTabAt(1).getIcon().setAlpha(255);
                    tabLayout.getTabAt(2).getIcon().setAlpha(128);
                    break;
                case 2:
                    tabLayout.getTabAt(0).getIcon().setAlpha(128);
                    tabLayout.getTabAt(1).getIcon().setAlpha(128);
                    tabLayout.getTabAt(2).getIcon().setAlpha(255);
                    break;
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    });

@SahilShokeen If you are using then I have a solution for text and icon. — Milon, Jun 07 '16 at 18:11

score 2 · Answer 2 · answered Mar 08 '16 at 14:32

Define the following in your style.xml :

<style name="TabLayout" parent="Widget.Design.TabLayout">
    <item name="tabIndicatorColor">@color/white</item>
    <item name="tabSelectedTextColor">@color/white</item>
    <item name="tabTextColor">@color/whiteAlpha</item>
</style>

Or programmatically :

TablLayout.setTabTextColors(int normalColor, int selectedColor)

score 1 · Answer 3 · answered Aug 20 '17 at 09:50

For future reference, Avinash's answer for text is actually incorrect. tabLayout.getTabAt(0).getText() does not return the TextView of the Tab, it just returns its text as a String. So, calling setAlpha(float) will just give you a compilation error.

The correct way to do this is a bit messier. We obtain the TextView of the Tab like so:

LinearLayout tabLayout = (LinearLayout)((ViewGroup) 
            myTabLayout.getChildAt(0)).getChildAt(positionOfMyTab);
TextView tabTextView = (TextView) tabLayout.getChildAt(1);
tabTextView.setAlpha(myAlphaValue);

It is quite messy, but it works. I don't know why Google hasn't just provided a getTextView() or similar method for TabLayout.

Also, the value provided in setAlpha(float) is now, well, a float between 0.0f and 1.0f. Use 1.0f for full opacity (analagous to 255 before).

I actually found a MUCH better way than this: simply set the TabLayout_tabTextColor and TabLayout_tabSelectedTextColor attributes as desired. Remember that colors in android can have a specified alpha. So, for example, the tabTextColor (the tab color for all non-selected tabs) could be "#80FFFFFF" for 50% white and tabSelectedTextColor could be 100% white with "#FFFFFF" — Quantum Dot, Mar 18 '18 at 05:24

score 0 · Answer 4 · answered Jan 18 '16 at 18:30

0

do this in your tabLayout.getTabAt(0).getText().setAlpha(88);

answered Jan 18 '16 at 18:30

Avinash Joshi

1,307
8
25

Thanks - your answer lead me to the ultimate answer for setting alpha's for icons. +1 – Simon Jan 18 '16 at 18:44

score 0 · Answer 5 · answered Apr 13 '19 at 17:40

Here is a better version of Simon's answer

private fun setCurrentTab(position: Int) {
    val values = arrayListOf(0, 1, 2)
    tabs_vp_pocha.getTabAt(position)?.icon?.alpha = 225
    values.remove(position)
    tabs_vp_pocha.getTabAt(values[0])?.icon?.alpha = 128
    tabs_vp_pocha.getTabAt(values[1])?.icon?.alpha = 128

}

And call above method from your ChangePageListener

vp_pocha.addOnPageChangeListener(object : ViewPager.OnPageChangeListener{
    override fun onPageScrollStateChanged(state: Int) {
    }

    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
    }

    override fun onPageSelected(position: Int) {
        setCurrentTab(position)
    }
})

Tablayout: opacity of icons used on selection / deselection

5 Answers5