How to default set a tab on starting and set the icon color on selection of a tab

849 Views Asked by At

I am using a tablayout and a frame layout.

  • I have five tabs.
  • I am loading my fragments to this frame layouts.
  • i want my second tab to defaultly get selected always.

Also when i select a perticular tab, the icon should change the color to red(I am using png icons, which are black , is their any way to change them to red to indicate that it is selected)

xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.TabLayout
    android:id="@+id/simple_tab_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabBackground="@color/colorWhite"
    app:tabIndicatorColor="#f00"
    app:tabSelectedTextColor="#f00"
    app:tabTextColor="#000"
    />


<FrameLayout
    android:id="@+id/fl_home"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</FrameLayout>

</LinearLayout>

This is my MainActivity

     pb.setIcon(R.drawable.p_icon); // pb is my  TabLayout.Tab
    mb.setIcon(R.drawable.view_p_icon);
    gb.setIcon(R.drawable.c_icon);
    ptTab.setIcon(R.drawable.c_icon);


    tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

        @Override
        public void onTabSelected(TabLayout.Tab tab)
        {
            switch (tab.getPosition()) {
                case 0:
                    getSupportFragmentManager().beginTransaction().replace(R.id.fl_home, new UF()).commit();
                    break;
                case 1:
                    //getSupportFragmentManager().beginTransaction().replace(R.id.fl_home, new DF()).commit();
                    showAlertDialog("Logout?");
                    break;
                case 2:
                    //getSupportFragmentManager().beginTransaction().replace(R.id.fl_home, new SF()).commit();
                    showAlertDialog("Logout?");
                    break;
                case 3:
                    //getSupportFragmentManager().beginTransaction().replace(R.id.fl_home, new SF()).commit();
                    showAlertDialog("Logout?");
                    break;
                case 4:
                    getSupportFragmentManager().beginTransaction().replace(R.id.fl_home, new SF()).commit();
                    break;
            }
        }

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

        }

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

        }
    });


}
1

There are 1 best solutions below

7
Dharmishtha On

Add code for setColorFilter method in onTabSelected() method. It will change color for image .

tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            int tabPosition = tab.getPosition();

            if (tabPosition == 0) {
                // active tabName
                imageOne.setColorFilter(getResources().getColor(R.color.redColor));
                // other deactive tabName
                imageTwo.setColorFilter(getResources().getColor(R.color.blackcolor));
                imageThree.setColorFilter(getResources().getColor(R.color.blackcolor));
                imageFour.setColorFilter(getResources().getColor(R.color.blackcolor));
            } else if (tabPosition == 1) {
                // active tabName
                imageTwo.setColorFilter(getResources().getColor(R.color.redColor));
                // other deactive tabName
                imageOne.setColorFilter(getResources().getColor(R.color.blackcolor));
                imageThree.setColorFilter(getResources().getColor(R.color.blackcolor));
                imageFour.setColorFilter(getResources().getColor(R.color.blackcolor));
            } else if (tabPosition == 2) {
                // active tabName
                imageThree.setColorFilter(getResources().getColor(R.color.redColor));
                // other deactive tabName
                imageTwo.setColorFilter(getResources().getColor(R.color.blackcolor));
                imageOne.setColorFilter(getResources().getColor(R.color.blackcolor));
                imageFour.setColorFilter(getResources().getColor(R.color.blackcolor));
            } else if (tabPosition == 3) {
                // active tabName
                imageFour.setColorFilter(getResources().getColor(R.color.redColor));
                // other deactive tabName
                imageTwo.setColorFilter(getResources().getColor(R.color.blackcolor));
                imageThree.setColorFilter(getResources().getColor(R.color.blackcolor));
                imageOne.setColorFilter(getResources().getColor(R.color.blackcolor));
            }

        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            int tabPosition = tab.getPosition();
        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {
            int tabPosition = tab.getPosition();
        }
    });

To select tab as default .

If use with viewPager then ,

tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.setupWithViewPager(viewpager);
viewpager.setCurrentItem(0);  // set any number of tab which you want to select by default.

If use without viewPager then ,

tabLayout = (TabLayout) findViewById(R.id.tablayout);
TabLayout.Tab tab = tabLayout.getTabAt(someIndex);  // which you want to select.
tab.select(); 

Hope it Helps.