What is collapsing toolbar in android? CollapsingToolbarLayout in android.

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 –

  1. CoordinatorLayout – A coordinator layout is like an enhanced frame layout. It is responsible for coordinating animations and transitions between different views.
  2. CollapsingToolbarLayout – We use CollapsingToolbarLayout Inside an AppBarLayout and Inside the CollapsingToolbarLayout, we use the Toolbar.
  3. 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: