Android Change Tab Icon/Text/Background Color/Text Color When Selected

Android change tab icon when selected tutorial with example is tonight’s hot topic.

In this tutorial, you will learn how to change tab icon, tab text, tab icon color, tab text color, tab background color, indicator color programmatically when user selects the tab.

Developers use these features to indicate the current working tab to the user.

Output

What will be the final output at the end of this example?

Check it out in the below video.

Step 1. Update colors.xml file

Add some necessary colors in the colors.xml file which is located at the values->colors.xml path.

Step 2. Necessary strings

A file which is available at values->strings.xml needed to be replaced with following source code

Step 3. Various Icons

As we want to change the color or may be the whole icon when the user clicks on the tab, we need to add different icons for every situation.

There should be different icons for both events, when the tab is selected and when it is deselected.

Click on below link to download necessary icons for this practical example tutorial.

Now copy all these icons in the mipmap folder.

Step 4. Making Drawable resource files

In the drawable folder, make one new resource file and name it like roundback.xml

Copy the following code in it

Create another resource file named roundleft.xml and add the below code

Step 5. Four Fragments for Four Tabs

There are four tabs in this android studio example so we have to create separate fragments for each tab.

Make first fragment with name IntroFragment.

Add below code in IntroFragment.java file

Code for fragment_intro.xml 

Now second fragment’s name is Location.

LocationFragment.java

fragment_location.xml

Third fragment is Login Fragment

LoginFragment.java

fragment_login.xml

Product Fragment is the last one.

ProductFragment.java

fragment_product.xml

Step 6. Main Activity

In the last step, you need to add required code in Main Activity’s both files.

In the activity_main.xml, add following code

I have designed four Linear Layouts, which represents the four tabs.

Each Linear layout includes one imageview and one textview.

ImageView represnts the tab icon and Textview represents the tab text.

You can add other UI elements as per your requirement.

After four linear layouts, there is a frame layout in which fragment for each tab will be loaded.

Update Main Activity java file

Finally, time to update MainActivity.java file

Step 7. Explanation of Main Activity

In the main activity, I have defined four linear layouts which are representing four tabs as per below.

Now, I have set onclick listeners for each above linear layout.

It will work when the user clicks on any tab.

Now you might have noticed that two methods are present in each click listener.

  1. unselectElse()
  2. removeAllFragment()

Both these methods are described below.

unselectElse

This method will deselect the current selected tab.

For example, user first clicks on Login fragment, so the icon color and text color for login tab is changes to white.

Now user selects or clicks on the product fragment, so the icon and text color for product is changed to white but here, login tab is also white.

If we do not change icon and text color of login tab back to black, there will be two selected tabs which is not ideal condition.

so unselectElse method will make the look and feel of selected tab back to the deselected.

Code for this method

removeAllFragment()

This method will simply empty the fragment backstack.

Whenever new fragment is loaded in the frame layout, it is added into the backstack also.

This method will be helpful to overcome this issue.

The second parameter of this method will decide whether to add newly loaded fragment into the backstack or not.

Checkout it’s implementation

That was all the details about android change tab icon when selected.

Useful thread : https://github.com/astuetz/PagerSlidingTabStrip/pull/62/files

Download Source Code For Android Change Tab Icon

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *