Change image on Tab in TabLayout when Selected

Question

I am using Design TabLayout,

<android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@color/ColorPrimary"
            app:tabIndicatorColor="@color/orange"
            app:tabIndicatorHeight="3dp"
            />

I have added customview to Tabs

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@null">

    <ImageView
        android:id="@+id/imgTab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/tab_image"
        android:layout_centerHorizontal="true"
        android:focusable="true"
        android:focusableInTouchMode="true"/>

    <TextView
        android:id="@+id/tabTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/imgTab"
        android:text="Home"
        android:background="@null"
        android:layout_centerHorizontal="true"
        android:textColor="@color/selector_tab_text"/>
</RelativeLayout>

tab.setCustomView(view);

I want to change image in the custom view when Tab is Selected. Tried using Selector on imageview it does not work. I cannot get view assigned to Tab in runtime, it only contains setCustomView methode. How to achieve it?

score 16 · Answer 1 · answered Nov 26 '17 at 12:05

add the setOnTabSelectedListener to the tabLayout object

i named mine navigation

navigation.setOnTabSelectedListener(
            new TabLayout.ViewPagerOnTabSelectedListener(mainView) {

                @Override
                public void onTabSelected(TabLayout.Tab tab) {
                    super.onTabSelected(tab);

                    // 1. get the custom View you've added
                    View tabView = tab.getCustomView();

                    // get inflated children Views the icon and the label by their id
                    TextView tab_label = (TextView) tabView.findViewById(R.id.nav_label);
                    ImageView tab_icon = (ImageView) tabView.findViewById(R.id.nav_icon);

                    // change the label color, by getting the color resource value
                    tab_label.setTextColor(getResources().getColor(R.color.active_color));
                    // change the image Resource
                    // i defined all icons in an array ordered in order of tabs appearances
                    // call tab.getPosition() to get active tab index.
                    tab_icon.setImageResource(navIconsActive[tab.getPosition()]);
                }

                // do as the above the opposite way to reset tab when state is changed 
                // as it not the active one any more
                @Override
                public void onTabUnselected(TabLayout.Tab tab) {
                    super.onTabUnselected(tab);
                    View tabView = tab.getCustomView();
                    TextView tab_label = (TextView) tabView.findViewById(R.id.nav_label);
                    ImageView tab_icon = (ImageView) tabView.findViewById(R.id.nav_icon);

                    // back to the black color
                    tab_label.setTextColor(getResources().getColor(R.color.dark_grey));
                    // and the icon resouce to the old black image 
                    // also via array that holds the icon resources in order 
                    // and get the one of this tab's position
                    tab_icon.setImageResource(navIcons[tab.getPosition()]);
                }

                @Override
                public void onTabReselected(TabLayout.Tab tab) {
                    super.onTabReselected(tab);
                }
            }
    );

that will do the job perfectly , and you can pad yourself in the back as i did myself :D

@HimanshuRawat .. yes it will work, [here is the steps from the beginning](https://stackoverflow.com/a/47495989/4846859) — Biskrem Muhammad, Nov 01 '18 at 19:39
setOnTabSelectedListener is deprecated, and its not working with addOnTabSelectedListener — user3792429, Nov 15 '18 at 02:52
Also you should select (set new color) the first tab and unselect others after creating `TabLayout`. — CoolMind, Jan 19 '19 at 15:35

score 0 · Answer 2 · answered Dec 06 '19 at 10:52

As setOnTabSelectedListener is deprecated, and there is no new answer, I'll update an updated answer

Should use addOnTabSelectedListener with OnTabSelectedListener

   tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabReselected(p0: TabLayout.Tab?) {
            }

            override fun onTabUnselected(p0: TabLayout.Tab?) {
                (p0?.customView?.findViewById(R.id.tab) as TextView).setTextColor(
                    context!!.resources.getColor(
                        R.color.v3_tint_tab_unselected_color
                    )
                )
            }

            override fun onTabSelected(tab: TabLayout.Tab?) {
                (tab?.customView?.findViewById(R.id.tab) as TextView).setTextColor(
                    context!!.resources.getColor(
                        R.color.v3_tint_tab_selected_color
                    )
     (tab?.customView?.findViewById(R.id.tab_img) as ImageView).setImageResource(R.drawable.custom_image)

    //for getting the posiiton if needed you can use
      tab.position or tab.getPosition()
                )
            }
        })

Custom tab xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:id="@+id/parent_layout">

<ImageView android:layout_width="@dimen/space_45"
           android:layout_height="@dimen/space_45"
           android:id="@+id/tab_img"
           android:gravity="center"
           android:layout_gravity="center"
           android:src="@drawable/hill_icon_blue"
/>

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:id="@+id/tab"
          android:gravity="center"
          android:layout_gravity="center"
          android:text=""
          android:textColor="@color/white"
          android:textSize="@dimen/text_size_14"
          android:fontFamily="@font/roboto_medium"/>
</LinearLayout>

score 0 · Answer 3 · answered Jan 15 '20 at 15:45

    ImageView imageView= (ImageView) findViewById(R.id.your_image_view);

    // On tab selected listener
    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            if (tab.getPosition() == YOUR_TAB_NUMBER)
                imageView.setBackground(getDrawable(R.drawable.ic_second_background));
        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            if (tab.getPosition() == YOUR_TAB_NUMBER)
                imageView.setBackground(getDrawable(R.drawable.ic_first_background));
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });

Change image on Tab in TabLayout when Selected

3 Answers3

Linked