I have been trying to get the effect of changing the color of a toolbar as it scrolls, initially I have it in transparent and as soon as it starts to scroll down it changes color little by little until it reaches its established color. it would be more or less like that
This is the code I tried with the attribute app:contentScrim="@color/colorAccent" but it doesn't come out exactly as I wanted, Thank you very much in advance.
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.design.widget.AppBarLayout
android:id="@+id/my_appbar_container"
android:layout_width="match_parent"
android:layout_height="192dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="@color/colorAccent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbarMore"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"
android:background="@android:color/transparent"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
app:behavior_overlapTop="64dp" />
First of all, you have to know how to approach your problem by breaking it down into small steps. I'm not telling you this harshly, it's simply good advice that I would have liked to have been given to me at the time, so I'm going to give you an example of how to approach this problem.
If, as you expose, you need that when the user scrolls down in the activity, the toolbar disappears and the opposite happens when the user goes up, you have to perform the following steps:
Toolbar
.If you separate them like this, it will be easier to find a solution, because unfortunately Android does not have a function or a solution for everything.
DETECT MOTION
Since you have implemented one
RecyclerView
, this solution comes in handy, because in this way we can add a listener to this element to detect the displacement, for example:I leave you in this link the guide on
Android Developer
the above.CREATE THE EFFECT ON THE TOOLBAR
After knowing when it moves or not, we will only have to add the effect of disappearing to the previous example. You can do this with AlphaAnimation(float fromAlpha, float toAlpha) :
To make appear the
Toolbar
:To make it disappear:
I hope this is clear, if not let me know and I will try to help you. Anyway I have to warn you that I have not been able to test the code since I have Android Studio updating. In anything, let me know please.
Luck!!
Toolbars can sometimes be treated as a view, try: