info@androidpaper.co.in

How to work with Scrolling Activity in Android?

In Android app development, implementing a scrolling activity is a common requirement when you have a layout that exceeds the screen's visible area. Scrolling activities allow users to scroll through content vertically or horizontally, ensuring that all information is accessible within a confined space.
In this tutorial, we will explore how to create a scrolling activity in Android. We'll cover the necessary steps to set up a scrolling layout, enable scrolling behavior, and customize the scrolling experience. Additionally, we'll discuss different types of scrolling, such as vertical and horizontal scrolling, and demonstrate how to implement them.

Open the XML layout file for the activity and ensure that the root layout is a CoordinatorLayout. This layout is essential for implementing scrolling behavior and coordinating various components within the layout.

<androidx.coordinatorlayout.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">

    <!-- Add your content here -->

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Add a AppBarLayout within the CoordinatorLayout. This component provides the collapsing behavior for the toolbar.

<androidx.coordinatorlayout.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">

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

        <!-- Add your toolbar and other app bar components here -->

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

    <!-- Add your content here -->

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Within the AppBarLayout, add a Toolbar and a CollapsingToolbarLayout as its child. Customize the appearance and behavior of the toolbar and the collapsing toolbar as desired.

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

    <Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_collapseMode="pin"
        app:title="Title" />

    <!-- Add other views or content within the CollapsingToolbarLayout -->

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

Now it is easy to create Scrolling Activity,
In Android Studio, Click New Scrolling View Activity,
activity_scrolling.xml created

<?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"
    android:fitsSystemWindows="true"
    tools:context=".ScrollingActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/Theme.HelloWorld.AppBarOverlay">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            style="@style/Widget.MaterialComponents.Toolbar.Primary"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:toolbarId="@+id/toolbar">

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

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

    <include layout="@layout/content_scrolling" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

In "content_scrolling.xml"

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.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=".ScrollingActivity"
    tools:showIn="@layout/activity_scrolling">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/text_margin"
        android:text="@string/large_text" />

</androidx.core.widget.NestedScrollView>

Another Written Description

In Activity page

 Toolbar toolbar = binding.toolbar;
        setSupportActionBar(toolbar);
        CollapsingToolbarLayout toolBarLayout = binding.toolbarLayout;
        toolBarLayout.setTitle(getTitle());

        FloatingActionButton fab = binding.fab;
        fab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
                        .setAction("Action", null).show();
            }
        });

Run your app on an emulator or a physical device to see the scrolling activity in action. Test the scrolling behavior by swiping or dragging the content vertically or horizontally, depending on your layout.
By following these steps, you can create a scrolling activity in your Android app using the CollapsingToolbarLayout from the Material Design components. The CoordinatorLayout and AppBarLayout provide the foundation for scrolling behavior, while the CollapsingToolbarLayout adds the collapsing effect to the toolbar. Customize the content, appearance, and behavior as per your requirements to create an engaging and interactive scrolling activity.