Pin tablayout in Scrollview with appbarlayout

Question

My android app want to have a page like Facebook page which pin the tablayout on top of the screen when scroll below the tablayout.

I have found a few answers on this topic.

pin TabLayout to top and below the toolbar Scrollview

How to make tablayout fixed below action bar?

However, they don't want my app situation because I want to keep my cardview and tablayout in the scrollview. My xml template is as below. Any insight or solution can share?


<?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"
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"
app:liftOnScroll="true">

<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|snap">

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

<androidx.core.widget.NestedScrollView
android:id="@+id/scrollview"
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:layout_height="wrap_content"
android:orientation="vertical">

<androidx.cardview.widget.CardView
android:id="@+id/checkinhome"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Content card1"
android:textAppearance="@style/TextAppearance.AppCompat.Display3" />
</androidx.cardview.widget.CardView>

<androidx.cardview.widget.CardView
android:id="@+id/checkinhome"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Content card2"
android:textAppearance="@style/TextAppearance.AppCompat.Display3" />
</androidx.cardview.widget.CardView>
<com.google.android.material.tabs.TabLayout

android:layout_width="match_parent"
android:layout_height="match_parent">


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


<androidx.viewpager2.widget.ViewPager2
android:layout_width="match_parent"
android:layout_height="match_parent"
/>

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

</androidx.coordinatorlayout.widget.CoordinatorLayout>

could you post an image with desired result ? – Nikhil Sharma Aug 09 '20 at 14:18 — Nikhil Sharma, Aug 09 '20 at 14:18

Nikhil Sharma · Answer 1 · 2020-08-10T07:18:26.737

I believe you are using unnecessary layouts, try following code for guidance -

MainLayout File

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

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

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

<!--         you can put any content you want to hide after scroll in header-->
<!--         as example in putting this image view-->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:padding="20dp"
                android:scaleType="fitCenter"
                android:src="@drawable/default_img"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.25" />

            <com.google.android.material.tabs.TabLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_collapseMode="pin"
                android:layout_gravity="bottom" />

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

        <!--            put content of scroll view here -->
        <include layout="scroll_content_layout" />

    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Above layout file will result in following result-

File scroll_content_layout.xml will have content you want as part of your scroll view.

ScrollContentFile

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <androidx.viewpager2.widget.ViewPager2
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    
<!--    some other layout as part of scroll view -->
        
</LinearLayout>

Edit

Content inside CollapsingToolbarLayout will collaps on scroll. Any View you want to KEEP on TOP on a scroll or any other customization you need to use layout_collapseMode flag.

CollapseMode Parallax: The content will scroll but a bit slower than nested scroll view. You can control scroll speed with layout_collapseParallaxMultiplier flag.

CollapseMode Pin: The content will stay in the same place while this place is still inside the collapsing toolbar.

Please check Collapse modes of CollapsingToolbarLayout

Happy coding -

Thanks for your reply. Is it possible to keep my cardviews and tablayout inside the scrollview? — Howard Lau, Aug 10 '20 at 01:20
well certainly possible but then `tabayout` and `cardview` will both scroll along with the other contents of scroll view, they will not be fixed at the top on scroll, you can check out [this](https://stackoverflow.com/questions/31039074/overlap-scrolling-view-with-appbarlayout) to get more info on scrolling view with app bar — Nikhil Sharma, Aug 10 '20 at 02:29
if you want to take controll of each view, then I believe you should use [MotionLayout](https://developer.android.com/training/constraint-layout/motionlayout/examples#coordinatorlayout_12) .. — Nikhil Sharma, Aug 10 '20 at 02:48
Thanks, you mean i need to use "MotionLayout" somehow keep the tablayout always on the screen? For example, I keep tablayout move downward in the same speed as scrolling such that it keep showing on the screen. — Howard Lau, Aug 10 '20 at 05:34
`MotionLayout` will give you control on each view upon scroll or any motion. What you want to achieve can be easily obtain by `CollapsingToolbarLayout`, you can check my edit on answer. Please understand there is not a specific way to get desired result in coding. There could be efficient or more efficient way, but the best way is the one YOU will understand and accomplish by your own for now. You will learn as you go down and will be coming up with new and more effective ways by your own. — Nikhil Sharma, Aug 10 '20 at 07:25

Pin tablayout in Scrollview with appbarlayout

1 Answers1