Skip to content

Instantly share code, notes, and snippets.

@Suleiman19
Last active August 19, 2018 18:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Suleiman19/3b27ddb67d93f42957ad8b9e737cd7da to your computer and use it in GitHub Desktop.
Save Suleiman19/3b27ddb67d93f42957ad8b9e737cd7da to your computer and use it in GitHub Desktop.
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>
@seupedro
Copy link

  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