Transparent color change effect of a Toolbar

Question

Transparent color change effect of a Toolbar

Navigation

#1 by (3 votes)
#2 by (0 votes)

3

I've been trying to get the effect of changing the color of a toolbar as it moves, initially I have it in transparent and as soon as it starts to move down it changes color little by little until it reaches its established color. It would be much less so

This is the code you try with the app attribute: contentScrim="@ color / colorAccent" but it does not come out exactly as you would like, 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" />

android

asked by Gunnar 12.06.2016 в 16:30

source

2 answers

0

Toolbars on some occasions can be treated as a view, try:

toolbar.getBackground().setAlpha(0);

answered by 12.06.2016 в 17:40

how to wait for 2 AJAX requests to finish before processing with the answer of 2? Without JQuery Error "no such table: tablename (code 1):, while compiling: Query", code: 0

score 3 · Accepted Answer

First of all, you have to know how to approach your problem by separating it in small steps. This I do not say to you to bad, it is simply a good advice that I would have liked that they gave it to me in his moment, for that reason I am going to give you an example of how to approach this problem.

If as you say, you need that when the user moves down in the activity, the toolbar disappears and the opposite happens when the user goes up, you have to do the following steps:

See how to detect the movement of the screen.

Know how to link the effect in Toolbar .

If you separate them like this it will be easier to find a solution, because unfortunately Android has no function or solution for everything.

DETECT THE MOTION

As you have implemented a RecyclerView this solution is very good, because this way we can add a listener to this element to detect the displacement, for example:

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener(){
    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy){
        if (dy > 0){ 
            // Se detecta un desplazamiento hacia abajo 
        } else if (dy == 0) { 
            // Se detecta que esta arriba del todo                
    }
});

I leave you on this link the guide of Android Developer on 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 display the Toolbar :

AlphaAnimation animation = new AlphaAnimation(0.0f, 1.0f);
animation.setDuration(1000); // Durará un segundo
toolbar.startAnimation(animation);

To make it disappear:

AlphaAnimation animation = new AlphaAnimation(1.0f, 0.0f);
animation.setDuration(1000); // Durará un segundo
toolbar.startAnimation(animation);

I hope it was clear, if you do not tell me 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 updated. In anything, please let me know.

Good luck !!