Change Collapsing toolbar menu icons color on scroll

Question

How to create Toolbar like Google trips application Trip Screen [Please check the image in the below link]. https://i.stack.imgur.com/kZVnC.jpg ,

Before scroll toolbar menu icons will be in white colour. After scroll toolbar is collapsed menu icons will be changed to grey colour.

score 1 · Answer 1 · answered Jan 26 '18 at 09:03

1

if you want to use library see this link, i have used it: https://github.com/codepath/android_guides/wiki/Handling-Scrolls-with-CoordinatorLayout also check this link it may be useful : How do you change the color of collapsing toolbar when it's collapsed?

answered Jan 26 '18 at 09:03

oo7

109
10

@Sanjay Thanks for your reply , I want to change the color of all views in toolbar. Currently , I am inflating menu_white.xml when toolbar is normal and inflating menu_black.xml when toolbar is collapsed. Though I can achieve the effect I wanted. I am not happy with inflating two menus and duplicating menu icons (black and white resources). Looking for better approach. – pop Jan 26 '18 at 16:43

score 0 · Accepted Answer · answered Jun 18 '18 at 15:05

To change toolbar icons color on scroll, I used ToolbarColorizeHelper .[https://gist.github.com/chomi3/7e088760ef7bca10430e][1]

i added the addOnOffsetChangedListener to collapsing toolbar to observe the toolbar scroll offset. Below is the code I used to achieve the expected UI attached in the above question.

addOnOffsetChangedListener((appBarLayout, verticalOffset) -> { //Check if the view is collapsed

       if (scrollOffset <= toolbar.getHeight()) {
                ToolBarColourizer.colorizeToolbar(toolbar, Color.BLACK);             
        } else {
                ToolBarColourizer.colorizeToolbar(toolbar, Color.WHITE);
            }
        }
    });

Change Collapsing toolbar menu icons color on scroll

2 Answers2