Chage the background color of tab

Question

please help me i am in new in android and i am implementing tab with view pager and i want to change the background color of selected tab but i done get.

This is my code of XML file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@color/colortab"
            app:tabMode="scrollable"/>
    <!--app:tabSelectedTextColor="@color/colortab"-->

     <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1"
        />
   </LinearLayout>

This is my Fragment code where i change the color of current tab.

public class mainfragment extends Fragment {
    private TabLayout tabLayout;
    private ViewPager viewPager;

    FragmentTabHost tabhost;
    Fragment fragment;
    int position;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View  v = inflater.inflate(R.layout.main_fragment, container, false);

        viewPager = (ViewPager) v.findViewById(R.id.viewpager);
        viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
        tabLayout = (TabLayout) v.findViewById(R.id.tabs);
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

                for (int i = 0; i < tabLayout.getTabCount(); i++) {

                    if (i == position) {

                        tabLayout.getTabAt(i).getCustomView()
                                .setBackgroundColor(Color.parseColor("#198C19"));
                    }
                    else {

                        tabLayout.getTabAt(i).getCustomView()
                                .setBackgroundColor(Color.parseColor("#f4f4f4"));
                    }
                }

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });





        setupViewPager(viewPager);

        // change the tab in run time  working here


        tabLayout.post(new Runnable() {
            @Override
            public void run() {

                tabLayout.setupWithViewPager(viewPager);


                ViewPagerAdapter adapter = new ViewPagerAdapter(getFragmentManager());



                adapter.addFragment(new One(), "One");
                adapter.addFragment(new Two(), "Two");

                viewPager.setAdapter(adapter);

            }
        });
        // end here


        tabLayout.setupWithViewPager(viewPager);
        return v;
    }

    // This method call ViewPagerAdapter which have added two fragments
    private void setupViewPager(ViewPager viewPager) {


        ViewPagerAdapter adapter = new ViewPagerAdapter(getFragmentManager());

        Toast.makeText(getActivity(),"Main Fragment in setupViewPager",Toast.LENGTH_LONG).show();

        adapter.addFragment(new One(), "One");
                adapter.addFragment(new Two(), "Two");

        viewPager.setAdapter(adapter);
    }


    class ViewPagerAdapter extends FragmentPagerAdapter {


       private final List<Fragment> mFragmentList = new ArrayList<>();
        private final List<String> mFragmentTitleList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager manager) {

            super(manager);
        }

        @Override
        public Fragment getItem(int position) {

            return mFragmentList.get(position);
        }

        @Override
        public int getCount() {

            return mFragmentList.size();
        }

        public void addFragment(Fragment fragment, String title) {

            mFragmentList.add(fragment);
            mFragmentTitleList.add(title);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mFragmentTitleList.get(position);
        }
    }
}

Actually i want to change the current tab background color but i am not getting . so please help me for solve this problem.thanks in advance.

I have a tabLayout which is used viewpager containing two tabs. I have been trying to change the background color of the currently selected tab.

score 0 · Answer 1 · edited May 23 '17 at 10:28

0

For change the selected tab background color You need to define a selector as a drawable, and also have a drawable for the selected/unselected states.as well you can also set customView as a tab Read this

First, the selector, tab_background.xml in the drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/tab_background_selected" android:state_selected="true" />
<item android:drawable="@drawable/tab_background_unselected" android:state_selected="false" android:state_focused="false" android:state_pressed="false" />
</selector>

Then, tab_background_selected.xml in the drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#d13fdd1a" />
</shape>

Then, tab_background_unselected.xml in the drawable folder:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#3F51B5" />
</shape>

Finally, in your styles.xml, specify the selector to use:

<style name="Base.Widget.Design.TabLayout" parent="android:Widget">
<item name="tabBackground">@drawable/tab_background</item>
</style>

Here is the link i'm pasting important code if link is unavailable

edited May 23 '17 at 10:28

Community

1
1

answered Mar 02 '16 at 08:18

Ajay Pandya

2,417
4
29
65

but how we will give the reference of – student Mar 02 '16 at 08:29
– student Mar 02 '16 at 08:29
ypu can define it in TabLayoutstyle="@style/name of your style" – Ajay Pandya Mar 02 '16 at 09:45
i have define but crash – student Mar 02 '16 at 09:52
– student Mar 02 '16 at 09:52
This is my styles xml – student Mar 02 '16 at 09:53
– student Mar 02 '16 at 09:54
i want the logcat means error log what error showing on crash – Ajay Pandya Mar 02 '16 at 09:54

Chage the background color of tab

1 Answers1