Create a gist now

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Android XML Layout for Parallax scrolling with header Tabs. Uses Design Support Library.
<?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/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:titleEnabled="false">
<ImageView
android:id="@+id/htab_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/header"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.3"
android:background="@android:color/black"
android:fitsSystemWindows="true"/>
<android.support.v7.widget.Toolbar
android:id="@+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:layout_marginBottom="48dp"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="@+id/htab_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabIndicatorColor="@android:color/white"
app:tabSelectedTextColor="@android:color/white"
app:tabTextColor="@color/white_70"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/htab_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
@sshnakamoto

This comment has been minimized.

Show comment
Hide comment
@sshnakamoto

sshnakamoto May 15, 2018

  1. The total height that we want our collapsible header View to have. 256dp is a good number.

  2. This is not the Flexible Space with Image pattern. We don’t want the Toolbar title to collapse. We want it fixed at the top. So we disable the ‘collapsible’ title.

  3. Flag which triggers the parallax effect upon scrolling.

36–41 A Scrim that makes Tab text more readable against the busy header background.

  1. Remember that CollapsingToolbarLayout is an extension of FrameLayout. This attribute ensures the Toolbar stays on top.

  2. TabLayout by default has a height of 48dp. Telling our Toolbar to have a bottom margin of the same, avoids the overlap issue that we saw above.

  3. Makes sure the Toolbar is consistently pinned to the top. Otherwise when you start scrolling, the Toolbar will scroll off-screen.

  4. Ensures the TabLayout sticks to the bottom of the header.

sshnakamoto commented May 15, 2018

  1. The total height that we want our collapsible header View to have. 256dp is a good number.

  2. This is not the Flexible Space with Image pattern. We don’t want the Toolbar title to collapse. We want it fixed at the top. So we disable the ‘collapsible’ title.

  3. Flag which triggers the parallax effect upon scrolling.

36–41 A Scrim that makes Tab text more readable against the busy header background.

  1. Remember that CollapsingToolbarLayout is an extension of FrameLayout. This attribute ensures the Toolbar stays on top.

  2. TabLayout by default has a height of 48dp. Telling our Toolbar to have a bottom margin of the same, avoids the overlap issue that we saw above.

  3. Makes sure the Toolbar is consistently pinned to the top. Otherwise when you start scrolling, the Toolbar will scroll off-screen.

  4. Ensures the TabLayout sticks to the bottom of the header.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment