Changing color of tabs and toolbar on swiping

Question

I am new to material design and thus I am asking a very basic question.

I have implemented a Tab Layout using View Pager. My activity_main.xml is as below:

<android.support.design.widget.CoordinatorLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabGravity="fill"
                app:tabMode="scrollable"
                app:tabTextAppearance="@style/TabTextAppearance"/>
        </android.support.design.widget.AppBarLayout>
        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    </android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/navheader"
        app:menu="@menu/menu_navigation" />

I have also implemented a drawer layout. I want to set different color for action bars and tabs. Thus as we swipe, color of everything must change including navigation drawer's as done in this app

Screenshot 1] [1

Screenshot 2] [2

Let me how can I achieve this. Thanks in advance.

Possible duplicate of [How do I change a tab background color when using TabLayout?](http://stackoverflow.com/questions/31640563/how-do-i-change-a-tab-background-color-when-using-tablayout) — Ankita Shah, Mar 28 '17 at 07:28

Jd Prajapati · Accepted Answer · 2017-03-28T07:30:57.223

1

  mViewPagerCategory.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                switch (position) {
                    case 0:
                        toolbar.setBackgroundColor(Color.YELLOW);
                        break;
                    case 1:
                        toolbar.setBackgroundColor(Color.GREEN);
                        break;
                    case 2:
                        toolbar.setBackgroundColor(Color.RED);
                        break;
                    default:
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

edited Mar 28 '17 at 07:30

answered Mar 28 '17 at 07:28

Jd Prajapati

1,953
13
24

setontabselectedlistener is deprecated! – rafsanahmad007 Mar 28 '17 at 07:29
Jd Prajapati, thanks for the answer. But I have just one requirement. In the image I have attached, you can see that on the top, there is a bar displaying Wifi Icon and time. How can I change its color with respect to tool bar and tab color? – The AV Mar 28 '17 at 07:55
which layout you have used in parent view? – Jd Prajapati Mar 28 '17 at 08:12
Jd, I have used Coordinator layout. – The AV Mar 28 '17 at 08:52
try to set attribute android:fitsSystemWindows="true" in parent view – Jd Prajapati Mar 28 '17 at 09:10
No its working working. I have set my tab layouts to grey and still my top bar is remaining blue and not changing to blue – The AV Mar 28 '17 at 09:13
Prajapati, what is the solution for that? If we take Whatsapp, the color of the top bar changes on opening the app. However, its not working my case. – The AV Mar 28 '17 at 09:22
My device runs on Lollipop. So what should I put anything in values_21 ? – The AV Mar 28 '17 at 09:28

Changing color of tabs and toolbar on swiping

1 Answers1