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>

score 2 · Answer 1 · answered Oct 22 '16 at 20:49

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);
                    }
        }
});

MH. · Answer 2 · 2016-02-19T10:08:48.897

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).

How do I need to use this? With your answer I founded this answer [link](http://stackoverflow.com/questions/26439572/how-to-style-the-drawerarrowtoggle-from-android-appcompat-v7-21-library) but it makes my toolbar dark and arrow says white what it is collapsed — tarasmorskyi, Feb 19 '16 at 09:35
@tarasmorskyi: My bad. I misinterpreted your question initially. Styles aren't really meant to be swapped out on-the-fly (at runtime) and hence not very suitable for solving your problem. I've updated my answer with two ways to colour the navigation icon at runtime. — MH., Feb 19 '16 at 10:08

score 0 · Answer 3 · answered Jun 04 '21 at 07:34

appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        int scrollRange = -1;

        @Override
        public void onOffsetChanged(final AppBarLayout appBarLayout, int verticalOffset) {
            //Initialize the size of the scroll
            if (scrollRange == -1) {
                scrollRange = appBarLayout.getTotalScrollRange();
            }
            //Check if the view is collapsed
            if (scrollRange + verticalOffset == 0) {
                @SuppressLint("UseCompatLoadingForDrawables") final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_material);
                upArrow.setColorFilter(getResources().getColor(R.color.black), PorterDuff.Mode.SRC_ATOP);
                Objects.requireNonNull(getSupportActionBar()).setHomeAsUpIndicator(upArrow);
            } else {
                @SuppressLint("UseCompatLoadingForDrawables") final Drawable upArrow = getResources().getDrawable(R.drawable.abc_ic_ab_back_material);
                upArrow.setColorFilter(getResources().getColor(R.color.white), PorterDuff.Mode.SRC_ATOP);
                Objects.requireNonNull(getSupportActionBar()).setHomeAsUpIndicator(upArrow);
            }
        }
    });

if you want to change the color of the back-button of the toolbar when using collapsingtoolbarlayout in android. this is the condition when you want to show different color of back-button when appbarlayout is collapsed or when it is expanded.

CollapsingToolbarLayout arrow color

3 Answers3