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

score 5 · Answer 1 · answered Nov 21 '15 at 12:32

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.

It's almost perfect, thanks. Except that `setAlpha` method gets a float. So you should change your code to `*.setAlpha(intColorCode/256f)` — Orabîg, Nov 22 '15 at 22:35
i have used your code, but it is not as transparent background. I wants like snapchat is doing in discover screen — Rakesh, Sep 08 '19 at 17:20
Note that there is a bug in SDK and when you change alpha of background from code you also change alpha of all views that use that color as background. So I would recomment use ColorUtils.setAlphaComponent(color, alpha). It will generate new color with alpha every time, but we avoid the bug. — LIFED, Jan 22 '21 at 02:38

Nikola Despotoski · Answer 2 · 2015-11-21T12:56:37.797

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

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

2 Answers2