Develop Reference

Content with multiple RecyclerView and a ViewPager not scrolling inside NestedScrollView

I'm facing a strange problem. I have a xml with two RecyclerView and a ViewPager with circle page indicator inside a NestedScrollview. I have used layout_weight and weightSum to show widget on screen. One of RecyclerView has horizontal layout which is scrolling horizontally fine. I want to achieve single vertical scrolling but unfortunately it is not working.
I have used "app:layout_behavior="#string/appbar_scrolling_view_behavior" in xml and "recyclerview.setNestedScrollingEnabled(false)" in java code.
here is my fragment_home.xml
<android.support.v4.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:id="#+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.e2e.qnamo.fragment.HomeFragment">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:weightSum="10"
android:descendantFocusability="blocksDescendants">
<include
layout="#layout/layout_pager_indicator"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="3"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_hot_topic"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="20dp"
android:layout_weight="2"
tools:listitem="#layout/hot_topic_row" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_category"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="20dp"
android:layout_weight="5"
tools:listitem="#layout/category_row"/>
</LinearLayout>
here is my layout_pager_indicator.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="#+id/bannerViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:listitem="#layout/viewpager_indicator_single_item" />
<com.e2e.qnamo.widget.CirclePageIndicator
android:id="#+id/pager_indicator"
style="#style/CustomCirclePageIndicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_gravity="center|bottom"/>

Seems like every one was busy else where :) Anyway I managed to find solution by myself.
There were three potential problem which causing problem:
Using "weightSum" in parent layout and
ViewPager in layout
ViewPager takes whole screen by default.
I have used "weightSum" to control size of ViewPager and showing other two Recyclerview. To remove "weightSum" I customised ViewPager so that it only takes height of its biggest children. Below are the customised ViewPager code:
public class CustomViewPager extends ViewPager
{
private int mCurrentPagePosition = 0;
public CustomViewPager(Context context) {
super(context);
}
public CustomViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int height = 0;
for(int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);
child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
int h = child.getMeasuredHeight();
if(h > height) height = h;
}
heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
public void reMeasureCurrentPage(int position) {
mCurrentPagePosition = position;
requestLayout();
}
}
Second step I did that I removed "layout_weight" from both of RecyclerView and set it "layout_height" to "wrap_content" and work done.
Below are the updated layout code:
fragment_home.xml
<android.support.v4.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:id="#+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:fillViewport="true"
tools:context="com.e2e.qnamo.fragment.HomeFragment">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/main_container_margin"
android:layout_marginTop="#dimen/main_container_margin"
android:layout_marginRight="#dimen/main_container_margin"
android:layout_marginBottom="#dimen/main_container_margin"
android:orientation="vertical">
<include
layout="#layout/layout_pager_indicator"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_hot_topic"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/recycler_margin_top"
tools:listitem="#layout/hot_topic_row" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_category"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/recycler_margin_top"
android:layout_marginBottom="10dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:listitem="#layout/category_row"/>
</LinearLayout>
layout_pager_indicator.xml
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.e2e.qnamo.widget.CustomViewPager
android:id="#+id/bannerViewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:listitem="#layout/viewpager_indicator_single_item" />
<com.e2e.qnamo.widget.CirclePageIndicator
android:id="#+id/pager_indicator"
style="#style/CustomCirclePageIndicator"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
android:layout_gravity="center|bottom"/>
Thats it!!!

RecyclerView does not Recycling Views when use it inside NestedScrollView

I'm using RecyclerView inside NestedScrollView. Also i set setNestedScrollingEnabled to false for recyclerview
to support lower API
ViewCompat.setNestedScrollingEnabled(mRecyclerView, false);
Now! When user scrolled the view every thing seems okay, but!!! views in recyclerview does not recycled!!! and Heap size grows swiftly!!
Update:
RecyclerView layout manager is StaggeredLayoutManager
fragment_profile.xml:
<android.support.design.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:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" >
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/profileSwipeRefreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<!-- RecyclerView and NestedScrollView -->
<include layout="#layout/fragment_profile_details" />
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>
fragment_profile_details.xml:
<LinearLayout
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:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="vertical" >
<android.support.v4.widget.NestedScrollView
android:id="#+id/nested_scrollbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true"
android:scrollbars="none" >
<LinearLayout
android:id="#+id/nested_scrollbar_linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:descendantFocusability="blocksDescendants"
android:orientation="vertical" >
<android.support.v7.widget.CardView
android:id="#+id/profileCardview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardBackgroundColor="#color/card_backgroind"
app:cardCornerRadius="0dp"
app:cardElevation="0dp" >
<!-- Profile related stuff like avatar and etc. --->
</android.support.v7.widget.CardView>
<android.support.v7.widget.RecyclerView
android:id="#+id/list_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/four"
android:layout_marginEnd="#dimen/four"
android:layout_marginLeft="#dimen/four"
android:layout_marginRight="#dimen/four"
android:layout_marginStart="#dimen/four"
android:layout_marginTop="#dimen/four"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:clipToPadding="false" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</LinearLayout>
ProfileFragment.java:
mAdapter = new MainAdapter(getActivity(), glide, Data);
listView = (RecyclerView) view.findViewById(R.id.list_view);
ViewCompat.setNestedScrollingEnabled(listView, false);
listView.setAdapter(mAdapter);
mStaggeredLM = new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL);
mStaggeredLM.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_MOVE_ITEMS_BETWEEN_SPANS);
listView.setLayoutManager(mStaggeredLM);
mScroll.setOnScrollChangeListener(new OnScrollChangeListener() {
#Override
public void onScrollChange(NestedScrollView arg0, int arg1, int arg2, int arg3, int arg4) {
View view = (View) mScroll.getChildAt(mScroll.getChildCount() - 1);
int diff = (view.getBottom() - ( mScroll.getHeight() + mScroll.getScrollY()));
if(diff == 0){
int visibleItemCount = mStaggeredLM.getChildCount();
int totalItemCount = mStaggeredLM.getItemCount();
int[] lastVisibleItemPositions = mStaggeredLM.findLastVisibleItemPositions(null);
int lastVisibleItemPos = getLastVisibleItem(lastVisibleItemPositions);
Log.e("getChildCount", String.valueOf(visibleItemCount));
Log.e("getItemCount", String.valueOf(totalItemCount));
Log.e("lastVisibleItemPos", String.valueOf(lastVisibleItemPos));
if ((visibleItemCount + 5) >= totalItemCount) {
mLoadMore.setVisibility(View.VISIBLE);
Log.e("LOG", "Last Item Reached!");
}
mMore = true;
mFresh = false;
mRefresh = false;
getPosts();
}
}
});
P.s : I've set load more to scroll view, because recyclerview do it continuously and none stoppable!
Any help is appreciated

This is because we have a recycler view which has scroll behaviour inside a scroll view. (scroll inside a scroll)
I think the best way to resolve this issue is to your profileCardview as a header in your recycler view and then remove the nested scroll view.
If it were a listview then it was as simple as listView.addHeaderView(profileCardView) but for the Recycler view there is no addheadview equivalent. Hence you could refer the below link to change your implementation.
Is there an addHeaderView equivalent for RecyclerView?

For a RecyclerView or ListView the height should be constant, because if it will not a constant size then how it will manage the maximum number of visible rows in memory. Try by changing RecyclerView attribute android:layout_height="match_parent" or a fixed height(e.g. "300dp" - as needed), instead of "wrap_content". It should improve your memory management.

Android Translate ScrollView and Views in sync (Programmatically)

I have a FrameLayout at top
and ViewPager at bottom
FrameLayout has PagerTabStrips
ViewPager has ScrollView in it.
What I am trying to achieve is that on the scroll of ViewPager's ScrollView, I want to translate Y position of ViewPager and FrameLayout together in sync smoothly.
And at some point I have to fix the position of FrameLayout and stop its further scrolling to top.
Below is my xml code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.example"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:id="#+id/parentRelativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/black"
android:clickable="true"
android:clipToPadding="false"
android:fitsSystemWindows="true" >
<FrameLayout
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.sticky.pager.PagerSlidingTabStrip
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="48dip"
android:layout_gravity="bottom"
android:layout_marginTop="2dp" />
</FrameLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/header"
android:background="#color/blue" />
</RelativeLayout>
How can I achieve this programmatically:
#Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount, int pagePosition) {
float scrollY=getScrollY(view);
mViewPager.setTranslationY(-scrollY);
mHeader.setTranslationY(-scrollY);
//What to write here??? This does not work

You should change the top and bottom of that view instead of moving it. You can synchronize the scroll via the scroll offset
override fun onScrollChange(v: NestedScrollView?, scrollX: Int, scrollY: Int, oldScrollX: Int, oldScrollY: Int) {
view.bottom = valueBottomTranslate.toInt()
view.top = valueTopTranslate.toInt()
}

How to disable child(RecyclerView) scrolling before parent(ScrollView) has completely scrolled

I have a RecyclerView inside a ScrollView. When I try to scroll to bottom, the RecyclerView(child element) scrolls to bottom before the parent starts scrolling. But what I want it, the parent should scroll completely before child starts scrolling. Here is my layout file. Can someone please guide me how can I achieve this?
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:id="#+id/user_activity_linear_layout">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="400dp"
android:id="#+id/blank_layout"
android:orientation="vertical">
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/recently_watched_recycler_view"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="400dp"
android:id="#+id/blank_layout"
android:orientation="vertical">
</LinearLayout>
</LinearLayout>
</ScrollView>
</RelativeLayout>

Just use NestedScrollView - it supports having nested scrolling enabled views (such as RecyclerView) inside of it. Make sure you are using Support Library 23.2, which allows RecyclerView to measure itself based on its contents.

Disable RecyclerView. Extend scrollview so that you will know when ot has reached bottom as bellow.
public class myScrollView extends ScrollView
{
public myScrollView(Context context)
{
super(context);
}
public myScrollView(Context context, AttributeSet attributeSet)
{
super(context,attributeSet);
}
#Override
protected void onScrollChanged(int l, int t, int oldl, int oldt)
{
View view = (View)getChildAt(getChildCount()-1);
int d = view.getBottom();
d -= (getHeight()+getScrollY());
if(d==0)
{
//you are at the end of the list in scrollview
//do what you wanna do here
}
else
super.onScrollChanged(l,t,oldl,oldt);
}
}
Once your scrollViewReaches bottom enable recyclerView. Give it a go. If you are not able to achieve what you desire using this method let me know.

Second fragment in ViewPager consumes scroll events

I have a SwipeRefreshLayout that hosts ViewPager in my Activity.
I am adding two fragments to the ViewPager. The first fragment has RecyclerView and the second fragment has a ScrollView.
On the first fragment, SwipeRefreshLayout was consuming scroll event. I added OnScrollListener and I am disabling refreshing if the view is not on the top.
I have same the problem with ScrollView in the second fragment, and I added ViewTreeObserver.OnScrollChangedListener() to ScrollView.
However, when I am on the first page, the scroll event passes to second page.
I tried to set android:clickable="true" on parent view of the first fragment and it didn't work.
Any recommendation would be helpful.
my_activity.xml
<include android:id="#+id/toolbar" layout="#layout/include_toolbar" />
<FrameLayout
android:id="#id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/toolbar">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/login_background"
android:fillViewport="true"
android:fitsSystemWindows="true"
android:layout_below="#id/tab_layout">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/last_update"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="#dimen/normal_padding"
android:paddingTop="#dimen/small_padding"
android:textColor="#color/gray"
android:paddingBottom="#dimen/small_padding"
android:textSize="#dimen/caption"
android:textStyle="bold" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_below="#id/last_update"
android:layout_width="match_parent"
android:layout_height="fill_parent"/>
</RelativeLayout>
</android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
</FrameLayout>
first_fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="16dp"
android:background="#android:color/transparent"
android:clickable="true">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
</LinearLayout>
second_fragment.xml
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/container"
android:background="#android:color/transparent"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true">
There are some child views here.
</ScrollView
SecondFragment
onScrollChangedListener = new ViewTreeObserver.OnScrollChangedListener() {
#Override
public void onScrollChanged() {
SwipeRefreshLayout swipeRefreshLayout = (SwipeRefreshLayout) getActivity().findViewById(R.id.swipe_container);
int scrollY = scrollView.getScrollY();
if (scrollY == 0) swipeRefreshLayout.setEnabled(true);
else swipeRefreshLayout.setEnabled(false);
}
};
scrollView.getViewTreeObserver().addOnScrollChangedListener(onScrollChangedListener);

This is because the second Fragment is created along with the first Fragment and it gains focus. I had this issue when I had used a Depth Page Transformer. The second Fragment was rendered under the first Fragment and was thus consuming touches.
Try using the following Page Transformer:
viewPager.setPageTransformer(false, new CustomViewPager.PageTransformer() {
#Override
public void transformPage(View view, float position) {
// TODO Auto-generated method stub
int pageWidth = view.getWidth();
int pageHeight=view.getHeight();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
}
else if (position <= 1) { // [-1,1]
float scaleFactor = Math.max(min_scale, 1 -Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
view.setTranslationX(horzMargin - vertMargin / 2);
} else {
view.setTranslationX(-horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// Fade the page relative to its size.
view.setAlpha((float) (0.2 +
(scaleFactor - min_scale) /
(1 - min_scale) * (1 - 0.2)));
}
else {
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
});
The second Fragment is now rendered way off to the right and thus the touch events are passed to the first Fragment.

Try to add separate SwipeRefreshLayout instead of declaring commonly, for example.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="16dp"
android:background="#android:color/transparent"
android:clickable="true">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipe_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/login_background"
android:fillViewport="true"
android:fitsSystemWindows="true"
android:layout_below="#id/tab_layout">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>

If we add the fragment instead of replace, the fragment underneath can consume the click/touch events in case the fragment on top is not consuming it. To avoid that, we can set the root view of the top fragment clickable as shown below (not in XML):
private var binding: FragmentFragment1Binding? = null
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
binding = FragmentFragment1Binding.inflate(inflater, container, false)
binding?.root?.isClickable = true
return binding?.root
}