Make Toolbar Transparent when Scrolled Up and Make it Visible when Scrolled Down

Question

I just want to make the android.support.v7.widget.Toolbar transparent when we scroll down the RecyclerView and make clearly visible when we scroll up

This is my Code

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/coordinatorlayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
>

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbarlayout1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    >
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar1"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="#ae43ff"
        />
    <ImageView
        android:id="@+id/imageview1"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:src="@drawable/unnamed"
        android:scaleType="center"
        app:layout_scrollFlags="scroll"
        />

    <!--app:layout_scrollFlags="scroll|enterAlways"-->

    <!--app:layout_collapseMode="parallax"
    app:layout_collapseParallaxMultiplier="0.7"-->
</android.support.design.widget.AppBarLayout>

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerview1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:background="#6fffc6">

</android.support.v7.widget.RecyclerView>

And the Output I am Getting

I tried many different ways, but its not working as I want.

I dont want the effect which we get in android.support.design.widget.CollapsingToolbarLayout

I want the effect as shown in this Video

Answer 1

You can achieve it with setting layout_behavior to your Toolbar. Wrote an article that could help you understand how it works and how you can utilize the power of CoordinatorLayout.Behavior. Also here is the gist.

Basically, it computes the ratio between the total scroll range of the AppBarLayout and current AppBarLayout bottom. The ratio is used to set alpha to Toolbar background.

https://medium.com/@nullthemall/1-20f-behaviors-of-alpha-6f506c9cb6a7

Answer 2

I was also facing similar problem, which I have cracked in this way.

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/detail_backdrop_height"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="206dip"
        android:background="@android:color/transparent"
        app:expandedTitleTextAppearance="@android:color/transparent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:contentScrim="@android:color/transparent"
        app:expandedTitleMarginStart="48dp"
        app:titleEnabled="false">




        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/backdrop"
            android:src="@drawable/ss"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/backdrop"
            android:layout_marginBottom="20dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/txtSomeTextDisplay"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text Display1"
                android:textSize="16sp"
                android:textColor="#ffffff" />

            <TextView
                android:id="@+id/txtSomeOtherText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Text Display 2"
                android:textSize="12sp"
                android:textColor="#ffffff" />

        </LinearLayout>



        </RelativeLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:background="@color/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />



    </android.support.design.widget.CollapsingToolbarLayout>       
</android.support.design.widget.AppBarLayout>




<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_marginTop="10dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

And in the Activity class, OnCreate what I did was -

AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
    appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {


        int intColorCode=0;

        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {


           intColorCode=-(verticalOffset);
            if(intColorCode>255)
                intColorCode=255;

            toolbar.getBackground().setAlpha(intColorCode);
            toolbar.setAlpha(intColorCode);


        }
    });

I managed to get the desired effect for one of my projects. Let me know if you need any more assistance. Since I am still perfecting the code, the code can be made better, if anyone has suggestions, feel free to put in your comments.