Toolbar Alpha Behavior

Nikola Despotoski · 4K views · 2015 · 0:15

Open on YouTube

Software (other)UX & UI designdemodated

Why Stack Overflow recommends it

Stack Overflow users link it as a visual example of the target effect when asking how to build a toolbar that fades in on scroll with CoordinatorLayout.

Recommended by 0 people across 0 different months, 2015 to 2017.

What it is

A 15-second screen recording by Android developer Nikola Despotoski showing a toolbar that fades from transparent to opaque as the content scrolls. It is a short demo of the CoordinatorLayout toolbar alpha behavior with no narration.

What people said

Cites Nikola Despotoski · 2015-10 · Stack Overflow · on “Hide TabLayout on Scroll of Content instead of ToolBar”

You need to move the Toolbar as top view in the layout and replace it with View that will placehold previous Toolbar space and will scroll as TabLayout does, inside your AppBarLayout . Here is how you need to set your layout. <android.support.design.widget.CoordinatorLayout xmlns:android=" [LINK] " xmlns:app=" [LINK] " android:id="@+id/preview_top_parent" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout...> <android.support.v4.view.ViewPager...> <android.support.v7.widget.Toolbar/> <-!--- Toolbar is direct child of CooridnatorLayout and z-order above all views --!-> </android.support.design.

Cites mithrop · 2016-08 · Stack Overflow · on “Changing toolbar background alpha value when scrolling with CoordinatorLayout”

I am currently trying to use the CoordinatorLayout class to adapt a Toolbar opacity depending on a ScrollView scroll position. I succeed doing this "manually linking" the two views, listening to the ScrollView scroll events and reporting them on the alpha value of my Toolbar background. The wanted behavior is : The toolbar is starting in a transparent state (both text and background) and end up totally white background and black text when one view is totally scrolled. The behavior is roughly this one : [this video] . Current implementation layout file (simplified) <RelativeLayout xmlns:android=" [LINK] " android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWi

Cites Gowsik · 2017-08 · Stack Overflow · on “ToolbarAlphaScrollBehavior CoordinatorLayout”

Hi I've been following this link [LINK] to accomplish the opacity effect on the toolbar My Layout File : <?xml version="1.0" encoding="utf-8"?> <layout> <android.support.design.widget.CoordinatorLayout android:id="@+id/coordinator_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context=".ProductDetailActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="@android:color/transparent" android:theme="@style/AppTheme.AppBarOverlay" app:elevation="0dp" /> <android.support.v4.widget.NestedScrollView android:layout_width="match_pa