Skip to content Skip to sidebar Skip to footer

Collapsing Toolbar Like Google Play Store

I want to implement a collapsing toolbar like google Play Store. I have achieved functionality somewhat but that is only working for portrait Screen. Here is a sample of screenshot

Solution 1:

In this pretty similar issue: collapsing toolbar layout like google play store, you would find an answer as below:

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.CoordinatorLayoutxmlns: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.AppBarLayoutandroid:id="@+id/appBarLayout"android:layout_width="match_parent"android:layout_height="wrap_content"android:fitsSystemWindows="true"><android.support.design.widget.CollapsingToolbarLayoutandroid: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"><ImageViewandroid: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.Toolbarandroid: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.RecyclerViewandroid: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" />

In the comment to that post, you would find also a hint:

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

EDIT: Here you would find an interview with a guy responsible for Google Play Store, he's talking about how he build design in Play Store App:

[UDACITY] Interview with Kirill Grouchnikov, part 1

[UDACITY] Interview with Kirill Grouchnikov, part 2

Hope it help

Post a Comment for "Collapsing Toolbar Like Google Play Store"