In this post, we will learn about creating a collapsing toolbar in android. We will learn about coordinator layout and NestedScrollView in android. So, let’s begin.
To create a collapsing toolbar we need three things –
- CoordinatorLayout – A coordinator layout is like an enhanced frame layout. It is responsible for coordinating animations and transitions between different views.
- CollapsingToolbarLayout – We use CollapsingToolbarLayout Inside an AppBarLayout and Inside the CollapsingToolbarLayout, we use the Toolbar.
- NestedScrollView – We can not use a normal scroll view with the coordinator layout because the coordinator layout only listens for nested scroll events. If we use a normal scroll view then the toolbar won’t scroll.
Now let’s see the code and then I will explain about the attributes used in the layout –
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/landscape"
app:layout_collapseMode="parallax" />
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="@+id/toolbar"
app:layout_collapseMode="pin"/>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="25dp"
android:text="@string/text"
android:textSize="22sp" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
Notice the following attributes in the above xml –
app:layout_scrollFlags – we use this attribute to control the scrolling behavior of the Toolbar when the user scrolls the content.
app:layout_behavior – It is used to mark the view the user will scroll.
MainActivity.java
package com.example.amazingtoolbar;
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
import android.graphics.Color;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
}
Strings.xml
<resources>
<string name="app_name">Amazing toolbar</string>
<string name="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus sed blandit arcu. Nunc quis porttitor nulla, vitae commodo arcu.
Nam maximus leo ac sagittis volutpat. Nam vitae augue consectetur,
dignissim metus et, congue ex. Duis blandit, leo in pharetra laoreet,
libero nunc congue leo, ut bibendum sapien turpis a mi.
Phasellus molestie imperdiet bibendum. Suspendisse quis arcu ullamcorper,
posuere augue ut, blandit neque. Duis ac ligula quis erat consectetur
porta id a justo. Nunc accumsan, est quis dictum scelerisque,
odio libero pellentesque turpis, nec efficitur urna leo eu
ex. Aliquam molestie justo sed augue consequat, nec dictum dui
consectetur. Suspendisse luctus arcu sapien, vel mollis sem
venenatis nec. Donec ullamcorper ac nunc sit amet gravida.</string>
</resources>
You can get this code here – GitHub.
In short, whenever you want to use a collapsing toolbar, just create an XML file that contains a CoordinatorLayout and an AppBarLayout(A CollapsingToolbarLayout inside the AppBarLayout) and a NestedScrollView inside this CoordinatorLayout.
That’s all about collapsing toolbar.
Goodbye.
DeveloperXon 
Leave a Reply