collapsing toolbar layout like google play store

Question

i want to make a collapsing toolbar layout like google play store. like this: https://sendvid.com/ugjspx8r

and here is my layout: http://sendvid.com/s4mx3xem

how can i do that with new android support library?

here is my layout xml file:

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/seffafCollapsingToolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="240dp"
            app:expandedTitleMarginEnd="164dp"
            app:expandedTitleMarginStart="148dp"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

            <ImageView
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
                android:src="@drawable/haber_icerik_resim"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/haber_toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:theme="@style/ToolbarColoredBackArrow"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll|enterAlways"/>

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



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


    <android.support.v7.widget.RecyclerView
        android:id="@+id/newsRecyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        android:clickable="true"
        android:background="@color/mainBackground"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

Underbodice

Possible duplicate of Overlap scrolling view with AppBarLayout – Hellkite

Answer 1

Here is working code, what you need.

<?xml version="1.0" encoding="utf-8"?>
<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:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

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

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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

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

    <fragment
        android:name="com.support.android.designlibdemo.CheeseListFragment"
        class="com.support.android.designlibdemo.CheeseListFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

And here is Activity

public class SampleActivity extends AppCompatActivity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_sample);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}

I hope this will solve your problem. Please let me know, if you need further help!!!

Shaer

Okay, your code is working, but the only thing that doesn't work - statusbar. Google Play Store has in transparent until toolbar collapsed, how to achieve this behaviour? – Clipfed

And how can I make text visible when Im scrolling down only? – Clipfed

Answer 2

View inside CollapsingToolbarLayout no need to set app:layout_scrollFlags. No effect. Base on my code, change app:layout_scrollFlags in CollapsingToolbarLayout to "app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" and set minHeight for it.

As your toolbar is "pin", so enterAlwaysCollapsed will call it when you scroll down.

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

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/seffafCollapsingToolbarLayout"
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:minHeight="?attr/actionBarSize"
        app:expandedTitleMarginEnd="164dp"
        app:expandedTitleMarginStart="148dp"
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/haber_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:theme="@style/ToolbarColoredBackArrow"
            app:layout_collapseMode="pin"/>

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

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


<android.support.v7.widget.RecyclerView
    android:id="@+id/newsRecyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical"
    android:clickable="true"
    android:background="@color/mainBackground"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Sharp

i did you said : sendvid.com/1k8ukqse but it is not properly i want. i want just like google play store's toolbar. in my app the toolbar is part of the image but in google play the toolbar isn't part of image, it is green. i think there should be two toolbars: the transparent one; will show when image is shown. and the second one(the green one); will show when image isn't shown and scroll down. but i don't know how to do that. – Underbodice

add app:contentScrim="?attr/colorPrimary" to your collapsingtoolbarlayout. It is no need two toolbar to implement this effect. – Sharp

@tongluencheah with contentscrim the colorprimary takes height more than the toolbar height. I am too looking for behaviour exactly like playstore. The height of colorprimary should be exactly as height of toolbar and then if further scrolled down the image should be seen. – Prestissimo

i am having tab layout..so it is overlapping the toolbar title and hamburger icon.Any suggestion? – Bookworm

Answer 3

I implemented this as shown below. I couldn't find any better solution.

public enum State {
    EXPANDED,
    COLLAPSED,
}
mCurrentState = State.EXPANDED; 
 Boolean toolbarIsTransparent = true;
// Calculate ActionBar height
    TypedValue tv = new TypedValue();
    int actionBarHeight = 0;
    if (mContext.getTheme().resolveAttribute(android.R.attr.actionBarSize, tv, true)) {
        actionBarHeight = TypedValue.complexToDimensionPixelSize(tv.data, getResources().getDisplayMetrics());
    }

    AppBarLayout appBarLayout = (AppBarLayout) rootView.findViewById(R.id.appbar_layout);
    final CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout) rootView.findViewById(R.id.collapsible_toolbar);
    if (appBarLayout != null) {
        final int finalActionBarHeight = actionBarHeight;
        appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int i) {
                if (i == 0) {
                    mCurrentState = State.EXPANDED;
                } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) {
                    mCurrentState = State.COLLAPSED;
                }
                if ((collapsingToolbarLayout.getHeight() + i <= finalActionBarHeight) && mCurrentState.equals(State.COLLAPSED)) {
                    toolbar.setBackgroundColor(ContextCompat.getColor(mContext, R.color.colorPrimary));
                    toolbarIsTransparent = false;
                } else if (!toolbarIsTransparent) {
                    mCurrentState = State.EXPANDED;
                    toolbar.setBackgroundColor(ContextCompat.getColor(mContext, android.R.color.transparent));
                    toolbarIsTransparent = true;
                }
            }
        });
    }

and xml code is `

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsible_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:orientation="vertical"
        android:src="@drawable/image"
        app:layout_collapseMode="parallax" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_collapseMode="pin"/>
</android.support.design.widget.CollapsingToolbarLayout>

`

Prestissimo

This works exactly as expected scrolling functionality of Play store. If someone is expecting the exact functionality then this answer should be accepted Thanks @Prestissimo – Kathernkatheryn

is there any way to add scroll through status bar? – Mcminn

Answer 4

I tried almost all the answers to get the same functionality but got it working after a little tweaking.

It works similar to PlayStore where the Toolbar title appears only when it is collapsed and hidden otherwise.

Here is the layout

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

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            app:titleEnabled="false">

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

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <!--Add your views here-->
    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        android:fadeScrollbars="true"
        android:paddingTop="10dp"
        android:scrollbarStyle="insideOverlay"
        android:scrollbars="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

Add this code to the onCreate method of your Activity

private Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
private AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
    appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            if (verticalOffset <= -appBarLayout.getTotalScrollRange() + toolbar.getHeight()) {
                //Toolbar Collapsed
                toolbar.setTitle("Your title here");
            } else {
                //Toolbar Expanded
                toolbar.setTitle(" ");
            }
        }
    });

Few things to note

• Do not set any background to Toolbar else it will overlap your view
• contentScrim attribute will take care of the Toolbar color on collapse
• titleEnabled attribute is set to false to disable collapsing title effect

I hope this will be useful to people looking for the same behaviour.

Please let me know how it works out. Cheers!

Indistinguishable

Answer 5

Here is my implementation

Layout Code

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

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingToolbarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">


        <ImageView
            android:id="@+id/img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:scaleType="centerCrop"
            android:layout_gravity="center_horizontal|top"
            app:layout_collapseMode="parallax" />

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

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

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

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <!-- YOUR LAYOUT CODE --->

</android.support.v4.widget.NestedScrollView>


</android.support.design.widget.CoordinatorLayout>

Java Code

inside onCreateView

if (toolbar != null) {
            ((AppCompatActivity)getActivity()).setSupportActionBar(toolbar);
            ((AppCompatActivity)getActivity()).getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        }

// in your code

img.setImageResource(R.drawable.img1);
collapsingToolbarLayout.setTitle("<TITLE>");

Uraeus

Answer 6

Just add the bellow tag in CollapsingToolbarLayout

app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"

and remove the above same tag in ImageView, its not required there.

And it works exaclty like you see in google play

Hope this helps to someone :)

Supinator