Simon Simon - 1 month ago 5
Android Question

Tablayout: opacity of icons used on selection / deselection

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%:

whatsapp

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.

Answer Source

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

        }
    });