# Toolbar Delight

DevFeed: [Toolbar Delight](<https://devfeed.tech/articles/toolbar-delight-22708.md>)

Original publisher: [Read original article](<https://medium.com/android-ui-patterns/toolbar-delight-8c5e4500b899?source=rss----75dfb6474397---4>)

Author: Juhani Lehtimäki

Published: 2017-09-27T17:06:38Z

Content type: tutorial

Language: en

Sources: [Android UI Patterns - Medium](<https://devfeed.tech/sources/android-ui-patterns-medium.md>)

Topics: [Android](<https://devfeed.tech/topics/android.md>), [ui](<https://devfeed.tech/topics/ui.md>), [Framework](<https://devfeed.tech/topics/framework.md>), [implementation](<https://devfeed.tech/topics/implementation.md>)

Tags: [android](<https://devfeed.tech/tags/android.md>), [arc](<https://devfeed.tech/tags/arc.md>), [components](<https://devfeed.tech/tags/components.md>), [containers](<https://devfeed.tech/tags/containers.md>), [design](<https://devfeed.tech/tags/design.md>), [feature](<https://devfeed.tech/tags/feature.md>), [layout](<https://devfeed.tech/tags/layout.md>), [toolbar](<https://devfeed.tech/tags/toolbar.md>), [ui](<https://devfeed.tech/tags/ui.md>), [ui-framework](<https://devfeed.tech/tags/ui-framework.md>), [ux](<https://devfeed.tech/tags/ux.md>)

## AI overview

This tutorial explains the design and implementation of a custom Android toolbar for the Social Steps app. It covers playful animations and state changes, scrolling behavior with AppBarLayout and CollapsingToolbarLayout, offset tracking, toolbar elevation, and a custom ToolbarArcBackground view.

## Source excerpt

In this article we explain how and why we did our Social Steps app custom toolbar from implementation point of view. Design Adding delightful details to your user interface is a great way to push your app above competition (assuming, of course, that all the important functionality exists and is well designed). Toolbar is a playground on Android. We decided to fully utilise it in playful but meaningful animations and state changes. The design for this feature, like for the rest of the Social Steps app, was done by Pierluigi Rufo. Pier has promissed to write about the design side in much more detail soon. Stay tuned! Implementation Android's UI framework is extremely powerful and flexible. If you take the time to learn what you can do with it you'll be adding a very powerful tool to your toolbox. Personally, I believe native Android UI being the most powerful prototyping tool currently available. Nearly everything your designer comes up with you can implement in matter of hours (or at least create an approximation of the intended feature). This flexibility extends to proper, scalable, implementations of production-ready features. In our Social Steps app the toolbar was the obvious place where to push the brand and user delight aspects of the app. To maintain scalability, scrolling containers are very commonplace in Android screens. So much so that Google introduces special components for developers to be able to add interesting and useful behaviour to the Android toolbar: AppBarLayout and CollapsingToolbarLayout. With the two above components and a small custom view it's possible to work magic on your toolbar design. Tracking scrolling eventshttps://medium.com/media/cbcccefeb5031bb6f4e8b840e61f1c66/href AppBarLayout.OnOffsetChangedListener This is the tool you can use to get a handle to events when user scrolls your main view (collapses your toolbar). This code is in my main Activity but it works as well in a Fragment if your toolbar is defined in one. appbarLayout.ad