Create a Scrolling Activity with a Collapsing Toolbar

## Introduction

Before you start this tutorial, you must be already proficient in creating Toolbars and Activities. This tutorial is a continuation of the tutorial Create a Toolbar. If your Activity still doesn't have a Toolbar with a CoordinatorView, follow the previous tutorial before continue.

In this tutorial, you will learn how to create a Nested ScrollView combined with a Collapsing Toolbar. In addition, you will learn how to place a Floating Action Button between the two views and make it disappear when you start scrolling. If you don't know how to place a Floating Action Button, follow the tutorial Create a Floating Action Button before continue.

## Creating a Nested ScrollView

Replace the LinearLayout or whichever layout current holds your main content. Your code should look like this:

```
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView 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"
 app:layout\_behavior="@string/appbar\_scrolling\_view\_behavior"
 tools:context="br.com.jeanknapp.helloworld.MainActivity"
 tools:showIn="@layout/activity\_main">

 <!-- Content -->

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

```

Insert all the content of your activity inside the NestedScrollView. Remember the NestedScrollView will be placed inside a CoordinatorLayout, just as the other layouts were placed, so it will work together with the Toolbar, Floating Action Button and other elements you include.

## Creating the Collapsing Toolbar

Inside your activity\_main.xml, you already have an AppBarLayout, and inside it, a Toolbar. Create a CollapsingToolBar layout and set it as a child of AppBarLayout, and as a the parent of the Toolbar.

```
<android.support.design.widget.CollapsingToolbarLayout
 android:id="@+id/toolbar\_layout"
 android:layout\_width="match\_parent"
 android:layout\_height="match\_parent"
 android:fitsSystemWindows="true"
 app:contentScrim="?attr/colorPrimary"
 app:layout\_scrollFlags="scroll|exitUntilCollapsed">

```

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

Then, add the following tag to your Toobar:

```
app:layout_collapseMode="pin"

```

By now, your layout file should look like this:

```
<?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="br.com.jeanknapp.helloworld.MainActivity">

 <android.support.design.widget.AppBarLayout
 android:id="@+id/app\_bar"
 android:layout\_width="match\_parent"
 android:layout\_height="@dimen/app\_bar\_height"
 android:fitsSystemWindows="true"
 android:theme="@style/AppTheme.AppBarOverlay">

 <android.support.design.widget.CollapsingToolbarLayout
 android:id="@+id/toolbar\_layout"
 android:layout\_width="match\_parent"
 android:layout\_height="match\_parent"
 android:fitsSystemWindows="true"
 app:contentScrim="?attr/colorPrimary"
 app:layout\_scrollFlags="scroll|exitUntilCollapsed">

 <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>

```

## Placing a Floating Action Button between the two views

If you already have a Floating Action Button in your activity, you can follow the steps bellow. If not, follow the Create a Floating Action Button tutorial.

Anchor your Floating Action Button to the AppBarLayout by using the following tag:

```
app:layout_anchor="@id/app_bar"

```

It will now be shown between the Expanded Toolbar and the Nested Scrollview. When you start scrolling, it will disappear and reappear when you reach the top again.

When you finish, your layout file should look like this:

```
<?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="br.com.jeanknapp.helloworld.MainActivity">

 <android.support.design.widget.AppBarLayout
 android:id="@+id/app\_bar"
 android:layout\_width="match\_parent"
 android:layout\_height="@dimen/app\_bar\_height"
 android:fitsSystemWindows="true"
 android:theme="@style/AppTheme.AppBarOverlay">

 <android.support.design.widget.CollapsingToolbarLayout
 android:id="@+id/toolbar\_layout"
 android:layout\_width="match\_parent"
 android:layout\_height="match\_parent"
 android:fitsSystemWindows="true"
 app:contentScrim="?attr/colorPrimary"
 app:layout\_scrollFlags="scroll|exitUntilCollapsed">

 <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.FloatingActionButton
 android:id="@+id/fab"
 android:layout\_width="wrap\_content"
 android:layout\_height="wrap\_content"
 android:layout\_margin="@dimen/fab\_margin"
 android:src="@drawable/ic\_add\_white\_24dp"
 app:layout\_anchor="@id/app\_bar"
 app:layout\_anchorGravity="bottom|end" />

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

```

## Conclusion

Your activity now has a working Collapsion Toolbar, a Nested Scrollview and a Floating Action Button.

You now know how to create Nested Scrollviews to display an amount of content bigger than the screen, and how to make the Toolbar animate to a smaller or bigger size. You also know how to place an FAB between the views and how to make it only appear when the Toolbar is big.