An overview of the

I’ve seen a collapsible top navigation bar on many apps. Google Support V7 provides CollapsingToolbarLayout to achieve this effect. The renderings are as follows:

Implementation steps

CollapsingToolbarLayout CollapsingToolbarLayout CollapsingToolbarLayout has two child views, the Imageview as shown in the image above and toobar 2 as the top navigation bar. Specify attributes for CollapsingToolbarLayout

app:layout_scrollFlags="scroll|exitUntilCollapsed"
Copy the code

3. Specify attributes for ImageView that declare it collapsible

app:layout_collapseMode="parallax"
Copy the code

4. Specify properties for toobar and declare it fixed

app:layout_collapseMode="pin"
Copy the code

5. Specify properties in the view where the CollapsingToolbarLayout is located to declare that it fits the current form

android:fitsSystemWindows="true"
Copy the code

code

The layout XML is as follows

<? The 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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="zhangyf.vir56k.app2.MainActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="400dp" android:fitsSystemWindows="true" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="@color/colorPrimary" app:expandedTitleMarginStart="100dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/img1" 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> <include layout="@layout/content_main" /> </android.support.design.widget.CoordinatorLayout>Copy the code

The activity code

There’s nothing really special here, okay

<? The 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" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:context="zhangyf.vir56k.app2.MainActivity"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="400dp" android:fitsSystemWindows="true" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" android:layout_height="match_parent" app:contentScrim="@color/colorPrimary" app:expandedTitleMarginStart="100dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/img1" 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> <include layout="@layout/content_main" /> </android.support.design.widget.CoordinatorLayout>Copy the code

Github demo code download

Github.com/vir56k/demo…