Basic of Collapsing Toolbar Android

 

duggu

What is a Collapsing Toolbar?

A Collapsing Toolbar is a part of the Android Material Design UI components. It provides a way to implement a dynamically expanding or collapsing toolbar at the top of the screen. This toolbar can contain images, text, and other widgets, and it reacts to scrolling events in a coordinating layout.

Why Use a Collapsing Toolbar?

1. Aesthetic Appeal: Enhances the visual appeal of an app, especially when combined with images or graphics.
2. Space Efficiency: Maximizes the space for content by hiding less important elements during scrolling.
3. Improved UX: Offers a dynamic and interactive user experience.

Where to Use a Collapsing Toolbar?

Collapsing Toolbars are typically used in:

• Detail screens where large images are prominent (like in a travel app showing location details).
• Profiles or content screens where focus shifts from the image/header to the content.

To integrate a Collapsing Toolbar in an Android application, you’ll follow several key steps. Below, I provide a step-by-step guide along with code explanations. Additionally, I’ve already provided an illustrative image of what a Collapsing Toolbar looks like in an Android app.

Step 1: Add Dependencies

First, you need to ensure that your project includes the Material Design library.

• Edit your build.gradle (Module: app) file:

dependencies {
     implementation 'com.google.android.material:material:<latest_version>'
     implementation 'androidx.appcompat:appcompat:<latest_version>'
     implementation 'androidx.coordinatorlayout:coordinatorlayout:<latest_version>' 
}

Step 2: XML Layout

Create your layout with CoordinatorLayout as the root. Inside it, place an AppBarLayout, then the CollapsingToolbarLayout, and finally, a Toolbar.

• Example XML layout:

<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=".YourActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                android:src="@drawable/your_image" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <!-- Your scrolling content here -->

</androidx.coordinatorlayout.widget.CoordinatorLayout>

• CoordinatorLayout: A super-powered FrameLayout to coordinate the motion and transformation of its children.
• AppBarLayout: Works as a wrapper for the toolbar, providing elevation and scroll behaviors.
• CollapsingToolbarLayout: Allows the toolbar to expand and collapse.
• Toolbar: Acts as the actual toolbar within the collapsing layout.

Step 3: Setup in Activity

Configure the Toolbar in your Activity:

• Example in Java:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.appcompat.widget.Toolbar
import com.google.android.material.appbar.CollapsingToolbarLayout

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val toolbar: Toolbar = findViewById(R.id.toolbar)
        setSupportActionBar(toolbar)

        val collapsingToolbar: CollapsingToolbarLayout = findViewById(R.id.collapsingToolbar)
        collapsingToolbar.title = "Your Title"
    }
}

• setSupportActionBar(): Sets the toolbar as the app bar for the activity.
• setTitle(): Sets the title for the CollapsingToolbarLayout.

Step 4: Customize Behavior and Appearance

Customize the behavior and appearance of the Collapsing Toolbar in the XML layout or programmatically in your Java/Kotlin code.

• app:layout_scrollFlags: Defines the scroll behavior of the toolbar. "scroll|exitUntilCollapsed" makes it stay visible until it's fully scrolled off.
• app:layout_collapseMode: Defines how the child views of the CollapsingToolbarLayout will react when scrolling. "parallax" for background images and "pin" for the toolbar.

Step 5: Run and Test

Finally, run your application and test the collapsing behavior by scrolling your content.

This approach sets up a basic Collapsing Toolbar. You can enhance it further by adding more components, customising animations, and fine-tuning the layout to suit your app’s design needs.

Perhaps my article will offer some clarity. If you find it valuable, please consider following and applauding. Your support will inspire me to write more articles like this.

#kotlin #kotlindeveloper #android #androiddeveloper #softwaredevelopment #androiddevelopment #kotlinandroid #developers #developercommunity #softwareengineer #googledevs #googlegroups #androidgroups #googleandroid #gradle #gradleandroid #community #linkedinforcreators #creators #linkedin #linkedinlearning #linkedinfamily #linkedinconnections #tips #medium #mediumfamily