How to scroll entire activity while scrolling tablayout android

Question

How do I scroll my entire activity while scrolling my tablayout.?

E.g - when I scroll my tabLayout - the entire activity should scroll...not just the viewpager portion of the tablayout..

Activity should only scroll when the tablayout is scolled.

This is what I want...(Notice how the entire activity scrolls....when the tablayout is scrolled)

This is what I have....(Notice how only the tablayout fragment portion scrolls when the tablayout is scrolled)

This is what I have tried..as I have read...

1. Add ScrollView to the layout activity containing the tablayout

2 Add NestedScrollView to the fragment layout.

photo_activity.xml - Activity containing the tablayout and viewpager

<ScrollView 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:fillViewport="true">

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

       <com.google.android.material.tabs.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/yearTabLayout"
            app:tabIndicatorColor="@android:color/black">

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/top"
                android:text="@string/top"/>

            <com.google.android.material.tabs.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/recent"
                android:text="@string/recent"/>

        </com.google.android.material.tabs.TabLayout>

        <androidx.viewpager2.widget.ViewPager2
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/yearTabLayout"
            android:id="@+id/year_view_pager" />

    </RelativeLayout>

 </ScrollView>  

fragment_photos.xml - Fragment of the current selected tab in the tablayout.

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

<data class="TopPhotosActivityBinding" />

   <androidx.core.widget.NestedScrollView
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:fillViewport="true">

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

        <ProgressBar
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:id="@+id/progressBar"/>

        <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/swipeRefreshTopPhotos">


            <androidx.recyclerview.widget.RecyclerView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/topPhotosRecyclerView"
                tools:listitem="@layout/top_photos_year">
            </androidx.recyclerview.widget.RecyclerView>

        </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

    </RelativeLayout>

   </androidx.core.widget.NestedScrollView>
</layout>

Answer 1

You can do something like this using CollapsingToolbarLayout

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="com.google.android.material.appbar.AppBarLayout$Behavior"
    xmlns:app="http://schemas.android.com/apk/res-auto">

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

       <com.google.android.material.appbar.CollapsingToolbarLayout
           android:id="@+id/collapsingToolbar"
           android:layout_width="match_parent"
           android:layout_height="match_parent"
           android:fitsSystemWindows="true"
           app:contentScrim="?attr/colorPrimary"
           app:expandedTitleMarginEnd="56dp"
           app:expandedTitleMarginStart="40dp"
           app:layout_scrollFlags="scroll|exitUntilCollapsed"
           app:title="Hello MindOrks!"
           >

           <!-- Put your top content here -->

           <LinearLayout
               android:id="@+id/toolbarImage"
               android:layout_width="match_parent"
               android:layout_height="match_parent"
               android:fitsSystemWindows="true"
               android:scaleType="centerCrop"
               android:src="@drawable/ic_android_black_24dp"
               app:layout_collapseMode="pin" >

               <TextView
                   android:layout_width="match_parent"
                   android:gravity="center"
                   android:text="Sample Top Content"
                   android:layout_gravity="center"
                   android:textSize="25dp"
                   android:textColor="@color/white"
                   android:layout_height="wrap_content"/>

           </LinearLayout>


       </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="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:layout_height="wrap_content">


            <com.google.android.material.tabs.TabLayout
                android:layout_width="match_parent"
                android:fitsSystemWindows="true"
                android:layout_height="wrap_content"
                android:id="@+id/yearTabLayout"
                app:tabIndicatorColor="@android:color/black">

                <com.google.android.material.tabs.TabItem
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/top"
                    android:text="Top"/>

                <com.google.android.material.tabs.TabItem
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/recent"
                    android:text="Recent"/>

            </com.google.android.material.tabs.TabLayout>

            <androidx.viewpager2.widget.ViewPager2
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/yearTabLayout"
                android:id="@+id/year_view_pager" />

        </LinearLayout>

    </androidx.core.widget.NestedScrollView>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

It will look something like this :