CollapsingToolbarLayout arrow color

Question

I'm using CollapsingToolbarLayout in my Activity, but I need to change color of back arrow when it is expanded, is there any way to do this? What I have:

What I want to do:

Here is my layout, where i put "..." there is layout include with NestedScrollView in it.

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.primebitstudio.swiper.AboutCouponActivity"
    android:layout_marginTop="-1px">

    <android.support.design.widget.AppBarLayout android:id="@+id/app_bar"
        android:fitsSystemWindows="true"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/toolbar_layout"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutExpandedTextStyle"
            app:theme="@style/ThemeOverlay.AppCompat.Light"
            app:popupTheme="@style/ToolBarStyle">

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="-24dp">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:adjustViewBounds="true"
                    android:scaleType="fitCenter"
                    android:src="@drawable/test_image"
                    android:id="@+id/image"/>
            </RelativeLayout>

            <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
                android:layout_height="?attr/actionBarSize"
                android:layout_width="match_parent"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ToolBarStyle" />

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
...
...
</android.support.design.widget.CoordinatorLayout>

Answer 1

Here is the example how I change my drawer and options icons color when layout is expanded and collapsed:

protected void onCreate(Bundle savedInstanceState) {
            AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.app_bar_layout);
            appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
                @Override
                public void onOffsetChanged(AppBarLayout appBarLayout, int offset)
                {
                    Drawable upArrow = ResourcesCompat.getDrawable(getResources(), R.drawable.drawer_icon, null);
                    if (offset < -200)
                    {
                        upArrow.setColorFilter(Color.parseColor("#000000"), PorterDuff.Mode.SRC_ATOP);
                        getSupportActionBar().setHomeAsUpIndicator(upArrow);

                        Drawable drawable = ContextCompat.getDrawable(getApplicationContext(),R.drawable.option_menu_icon);
                        drawable.setColorFilter(Color.parseColor("#000000"), PorterDuff.Mode.SRC_ATOP);
                        toolbar.setOverflowIcon(drawable);
                    }
                    else
                    {

                        upArrow.setColorFilter(Color.parseColor("#ffffff"), PorterDuff.Mode.SRC_ATOP);
                        getSupportActionBar().setHomeAsUpIndicator(upArrow);
                        getSupportActionBar().setDisplayHomeAsUpEnabled(true);

                        Drawable drawable = ContextCompat.getDrawable(getApplicationContext(),R.drawable.option_menu_icon);
                        drawable.setColorFilter(Color.parseColor("#ffffff"), PorterDuff.Mode.SRC_ATOP);
                        toolbar.setOverflowIcon(drawable);
                    }
        }
});

Answer 2

From the documentation on ActionBarDrawerToggle:

You can customize the the animated toggle by defining the drawerArrowStyle in your ActionBar theme.

The drawerArrowStyle attribute lists the following attributes that can be configured:

• android.support.v7.appcompat:arrowHeadLength
  The length of the arrow head when formed to make an arrow
• android.support.v7.appcompat:arrowShaftLength
  The length of the shaft when formed to make an arrow
• android.support.v7.appcompat:barLength
  The length of the bars when they are parallel to each other
• android.support.v7.appcompat:color
  The drawing color for the bars
• android.support.v7.appcompat:drawableSize
  The total size of the drawable
• android.support.v7.appcompat:gapBetweenBars
  The max gap between the bars when they are parallel to each other
• android.support.v7.appcompat:spinBars
  Whether bars should rotate or not during transition
• android.support.v7.appcompat:thickness
  The thickness (stroke size) for the bar paint

I reckon android.support.v7.appcompat:color is what you're after.

---

In order to change the colour at runtime, you have multiple options.

Option 1
Get the navigation icon from your Toolbar and apply a colour filter to it. For example, to colour the icon red, one could do something like this:

Drawable navIcon = mToolbar.getNavigationIcon();
navIcon.setColorFilter(Color.RED, PorterDuff.Mode.SRC_IN);

The advantage of this approach is that you can play around with the various PorterDuff.Mode constants to achieve different effects. This approach will also work (and keep working) if you decide to supply your own navigation icon (instead of the default hamburger-turns-arrow-and-vice-versa drawable).

Option 2
If you're only interested in colouring the default navigation icon, you can leverage the fact that the navigation icon drawable is a DrawerArrowDrawable, which has a setColor() method:

DrawerArrowDrawable navIcon = (DrawerArrowDrawable) mToolbar.getNavigationIcon();
navIcon.setColor(Color.RED);

This second approach may be easier to use if you're planning on animating the colour gradually with the help of i.e. ObjectAnimator.ofArgb(...) or ValueAnimator.ofArgb(...) (rather than just setting it).