20609

How to use viewpager inside nestedScrollView with a view top of viewpager

Question:

I am unable to scroll nestedScrollView because of viewpager. So let me explain here is layout design that i want to create:

<a href="https://i.stack.imgur.com/BgQNK.jpg" rel="nofollow"><img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/BgQNK.jpg" data-original="https://i.stack.imgur.com/BgQNK.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" /></a>

There is FrameLayout inside NestedScrollView and a viewpager with tab layout. Viewpager load three fragments with endless recylerview (Pagination).

Here is layout xml code :

<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/background" tools:context="com.plowns.droidapp.activites.HomeActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appBarLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> </RelativeLayout> </android.support.v7.widget.Toolbar> </android.support.design.widget.AppBarLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="100dp" android:layout_marginTop="50dp" android:background="@color/colorPrimary" /> <android.support.v4.widget.NestedScrollView android:id="@+id/nestedscrollview" android:layout_width="match_parent" android:layout_height="match_parent" android:fillViewport="true" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <FrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:background="@color/trans"> <FrameLayout android:layout_width="match_parent" android:layout_height="260dp"> <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="55dp" app:cardCornerRadius="5dp"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/txt_edit_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:src="@drawable/ic_mode_edit" android:tint="@color/blue_plowns" /> <TextView android:id="@+id/txt_child_name" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="50dp" android:ellipsize="end" android:gravity="center_vertical" android:minHeight="5dp" android:text="Satwinder Singh" android:textAppearance="?android:attr/textAppearanceListItemSmall" android:textColor="@android:color/black" android:textSize="18sp" android:textStyle="bold" /> <LinearLayout android:id="@+id/ll_points_class" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/txt_child_name" android:layout_centerHorizontal="true" android:orientation="horizontal"> <TextView android:id="@+id/txt_child_points" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="10038" android:textAppearance="?android:attr/textAppearanceListItemSmall" android:textColor="@color/gray" android:textSize="14sp" /> <View android:id="@+id/point_class_sapretor" android:layout_width="1dp" android:layout_height="10dp" android:layout_gravity="center" android:layout_marginLeft="5dp" android:background="@color/gray" /> <TextView android:id="@+id/txt_child_class" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:text="Collage" android:textAppearance="?android:attr/textAppearanceListItemSmall" android:textColor="@color/gray" android:textSize="13sp" /> </LinearLayout> <LinearLayout android:id="@+id/ll_title" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@+id/ll_points_class" android:layout_centerHorizontal="true" android:orientation="horizontal" android:visibility="gone"> <TextView android:id="@+id/txt_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:ellipsize="end" android:maxLines="1" android:singleLine="true" android:text="" android:textAppearance="?android:attr/textAppearanceListItemSmall" android:textColor="@android:color/white" android:textSize="14sp" /> </LinearLayout> <android.support.v7.widget.CardView android:id="@+id/card_badge" android:layout_width="100dp" android:layout_height="20dp" android:layout_below="@+id/ll_title" android:layout_centerHorizontal="true" android:layout_marginTop="5dp" android:backgroundTint="@color/yellow_plowns" app:cardCornerRadius="5dp"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="BADGE WALL" android:textColor="@color/white" android:textSize="12sp" android:textStyle="bold" /> </android.support.v7.widget.CardView> <LinearLayout android:layout_width="match_parent" android:layout_height="50dp" android:layout_below="@+id/card_badge" android:layout_centerHorizontal="true" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_marginTop="5dp" android:baselineAligned="false" android:gravity="center" android:orientation="horizontal" android:weightSum="3"> <RelativeLayout android:id="@+id/rl_upload" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:paddingTop="5dp"> <TextView android:id="@+id/txt_upload_count" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:text="13" android:textAppearance="?android:attr/textAppearanceListItemSmall" android:textColor="@color/black" android:textSize="15sp" android:textStyle="bold" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/txt_upload_count" android:layout_centerHorizontal="true" android:layout_marginTop="5dp" android:text="@string/profile_title_uploads" android:textAppearance="?android:attr/textAppearanceListItemSmall" android:textColor="@color/gray" android:textSize="13sp" /> <View android:layout_width="1dp" android:layout_height="40dp" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:background="@color/gray" /> </RelativeLayout> <RelativeLayout android:id="@+id/rl_followers" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:paddingTop="5dp"> <TextView android:id="@+id/txt_follower_count" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:text="13" android:textAppearance="?android:attr/textAppearanceListItemSmall" android:textColor="@color/black" android:textSize="15sp" android:textStyle="bold" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/txt_follower_count" android:layout_centerHorizontal="true" android:layout_marginTop="5dp" android:text="@string/profile_title_followers" android:textAppearance="?android:attr/textAppearanceListItemSmall" android:textColor="@color/gray" android:textSize="13sp" /> <View android:layout_width="1dp" android:layout_height="40dp" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:background="@color/gray" /> </RelativeLayout> <LinearLayout android:id="@+id/ll_following" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical"> <TextView android:id="@+id/txt_following_count" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="47" android:textAppearance="?android:attr/textAppearanceListItemSmall" android:textColor="@color/black" android:textSize="15sp" android:textStyle="bold" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:text="@string/profile_title_following" android:textAppearance="?android:attr/textAppearanceListItemSmall" android:textColor="@color/gray" android:textSize="13sp" /> </LinearLayout> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="25dp" android:layout_alignParentBottom="true" android:background="@color/colorPrimary" android:orientation="horizontal"> <LinearLayout android:id="@+id/ll_share" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.5" android:gravity="center" android:orientation="horizontal"> <TextView android:id="@+id/txt_share_icon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:text="&#xf0c0;" android:textColor="@color/pink" android:textSize="15sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:gravity="center" android:text="Invite friends" android:textAppearance="?android:attr/textAppearanceListItemSmall" android:textColor="@android:color/white" android:textSize="14sp" /> </LinearLayout> <LinearLayout android:id="@+id/ll_switch_child" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.5" android:gravity="center" android:orientation="horizontal"> <ImageView android:id="@+id/txt_switch_child_icon" android:layout_width="22dp" android:layout_height="22dp" android:background="@drawable/ic_switch" android:textAllCaps="false" android:textColor="@color/white" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="10dp" android:gravity="center" android:text="Switch profile" android:textAppearance="?android:attr/textAppearanceListItemSmall" android:textColor="@android:color/white" android:textSize="14sp" /> </LinearLayout> </LinearLayout> </RelativeLayout> </android.support.v7.widget.CardView> </FrameLayout> <de.hdodenhof.circleimageview.CircleImageView xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/img_child_profile" android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="top|center_horizontal" android:layout_marginTop="5dp" android:src="@drawable/blank_profile" app:border_color="@color/colorPrimary" app:border_width="2dp" /> </FrameLayout> <android.support.v7.widget.CardView android:id="@+id/card_bottom" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginLeft="15dp" android:layout_marginRight="15dp" android:layout_marginTop="10dp" app:cardCornerRadius="5dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/white" app:tabGravity="fill" app:tabIndicatorColor="@color/colorPrimary" app:tabIndicatorHeight="0dp" app:tabMode="fixed" app:tabSelectedTextColor="@color/white" app:tabTextColor="@color/white" /> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="@color/gray" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </LinearLayout> </android.support.v7.widget.CardView> </LinearLayout> </android.support.v4.widget.NestedScrollView>

Now when i scroll outside of viewpager nothing happened (view not scroll). And on viewpager scroll only recyclerview scroll. But I want to scroll the whole view on outside frame layout scroll and on recylerview also.

<strong>What I have tried :</strong>

<strong>1)</strong> Set fixed height for Viewpager(700dp). <strong>Result:</strong> Scroll on Framelayout smoothly worked but Scroll on Recyclerview is not worked correctly and smooth. I have to scroll many time to scroll.

<strong>2)</strong> Set Framelayout & Tablayout inside AppBarLayout. <strong>Result:</strong> Scroll Up worked smoothly but On Scroll down Recylerview(Viewpager), first Appbarlayout is fully scrolled down and then Recyclerview content scrolled that was behind Appbarlayout. So I have to scroll down the whole list to see first contents it is a bad experience.

<strong>3.)</strong> Created custom Viewpager as suggested here like <a href="https://stackoverflow.com/a/41587367/6219121" rel="nofollow">enter link description here</a> <strong>Result :</strong> Same as 1st case:

<strong>4)</strong> Disabled Touch on Viewpager and use custom Viewpager. <strong>Result:</strong> Smoothly scrolled whole view but due to touch disabled on Viewpager I am unable to paginate Recyclerview means have to check every touch type and detect the end of the scroll to load next data in Recyclerview. I do not want to do this.

So here is my problem. Please if anybody has solution or cretaed somthing like this please help. Thanks in advance.

Answer1:

So I have finally resolved this problem by just creating Custom Viewpager as mentioned here: <a href="https://stackoverflow.com/a/41587367/6219121" rel="nofollow">Custom ViewPager</a> that calculate ViewPager height and <strong>setNestedScrollingEnable(false)</strong> to <strong>RecyclerView inside Viewpager</strong>. By setting NestedScrollingEnalbe = false Recyclerview does set parent NestedScrollView's scroll. So Parent NestedScrollView works with inside Viewpager.

Recommend