NestedScrollView fix the view top inside NestedScrollView

Question

I want to fix the TabLayout on top when scroll-like Instagram. Is there a way to do this in the NestedScrollView ?

NestedScrollView
-- ConstraintLayout
---- OtherViews
---- TabLayout
---- ViewPager

https://i.imgur.com/G5QcqaW.png

https://gist.github.com/buraktabn/c73cd04bed6a223471834756d6f32773

Answer 1

Could you do something like:

ConstraintLayout
-- OtherViews
-- TabLayout
-- NestedScrollView
---- ViewPager

That way the content of the ViewPager will scroll? FYI It may also be worth looking at the CoordinatorLayout and CollapsingToolbarLayout ( https://material.io/develop/android/components/collapsing-toolbar-layout/ ) which will allow users to regain some of their screen back when scrolling up.

Answer 2

You can't do this directly within the NestedScrollView because the view itself is supposed to scroll content.

If you're looking for a fixed TabLayout at the top that doesn't move, you can pull the TabLayout out of the NestedScrollView and encompass both of these views under another layout type (eg. LinearLayout , ConstraintLayout , etc).

If you want the a TabLayout that expands and contracts as the user scrolls, your best bet is a CoordinatorLayout which can encompass a NestedScrollView and then implement your TabLayout under the CoordinatorLayout 's AppBarLayout / CollapsingtoolbarLayout . The structure would look similar to:

CoordinatorLayout
- AppBarLayout
-- CollapsingToolbarLayout
--- [Your implementation of the `TabLayout`]
-- NestedScrollView

You can find more information on CoordinatorLayout and CollapsingToolbarLayout here:

• https://developer.android.com/reference/com/google/android/material/appbar/CollapsingToolbarLayout

• https://material.io/develop/android/components/collapsing-toolbar-layout/

• (a simplified intro) https://antonioleiva.com/collapsing-toolbar-layout/