Collapsing Toolbar Android

CollapsingToolbarLayout is a newly introduced layout of android in Lolipop version.It is a wrapper for toolbar which implements a collapsing action bar. While implementing we need to use it as the direct child of AppBarLayout. With the help of CollapsingToolbarLayout you can collapse the header image when the below layout scrolls up, and it can fit into the normal toolbar size with certain animation effects.

Here in this tutorial  we will create an example for collapsing toolbar which will help us to learn how to implement a collapsing toolbar in android

1.Creating New Project

  1. Create a new project in Android Studio from File -> New Project
  2. Fill the required fields like Application name and package name and click Next
  3.  Select Basic activity and click Next, and click  Finish Button.A default activity will be created as
  4. MainActivity.java with layouts activity_main.xml and content_main.xml

2. Here is the code for your activity_main.xml

activity_main.xml

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">

<ImageView
android:id="@+id/im_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/collapse_back"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
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/ThemeOverlay.AppCompat.Light" />

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

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

<android.support.v4.widget.NestedScrollView
android:id="@+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="@string/appbar_scrolling_view_behavior">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="This is a scroll layout" />

</RelativeLayout>

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

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

You can give your contents inside your NestedScrollView Layout

Important: Put the Header image you need to disaplay into your res/drawable folder , and set that image name as background in the ImageView of above Layout.

Now Run the code , you will get the following Output.

androidcollapsetoolbar1

3. Now if you want to customize the view , you need to refer the layout in your Activity.

Use the below code in your MainActivity.java. It can explain how to change text of collapse toolbar dynamically and

how to change the color of toolbar while collapsing.

public class MainActivity extends AppCompatActivity {

Toolbar toolbar;
private CollapsingToolbarLayout collapsingToolbar;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

init();

}

private void init() {

toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
collapsingToolbar.setTitle("CollapseTitle");

collapsingToolbar.setContentScrimColor(getResources().getColor(R.color.collapse_toolbar_color));
collapsingToolbar.setStatusBarScrimColor(getResources().getColor(R.color.collapse_status_color));

}

}

4. Add the following colors in your colors.xml file

<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="collapse_status_color">#F57C00</color>
<color name="collapse_toolbar_color">#F57C00</color>
</resources>

Run the app ,you will get the following output

collapsetoobar

About the author

Hi guys, i am the author of codesfor. I am a B.Tech graduate currently working as an App developer. Apart from job i am a blogger and a freelancer.

Add a Comment

Your email address will not be published. Required fields are marked *