I have a RecyclerView with a fixed height inside a NestedScrollView with a few other layouts inside it. The recycler view won't scroll, but it scrolls fine if I set its height to wrap_content.
I cannot make the RecyclerView use wrap_content because there is an issue with EndlessRecyclerViewScrollListener that it keeps loading data from the server and pushing it into my Adapter even if the user has not scrolled down at all.
Most are suggesting to set nested scrolling to false, but if I disable nested scrolling, the NestedScrollView does not allow me to scroll my RecyclerView. But if I leave nested scrolling enabled, the scroll view does not scroll unless I start touching from outside the RecyclerView.
My layout code:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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:background="#color/scoop_background"
tools:context=".module.scoop.timeline.ScoopTimelineFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="92dp">
<ImageView
android:id="#+id/ivTimelineBanner"
android:layout_width="match_parent"
android:layout_height="92dp"
android:layout_margin="0dp"
android:clickable="true"
android:padding="0dp"
android:scaleType="fitXY"
android:src="#drawable/banner_placeholder" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:orientation="vertical"
android:paddingLeft="92dp">
<TextView
android:id="#+id/tvGroupMembership"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="#dimen/text_content" />
<TextView
android:id="#+id/tvGroupName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="#dimen/text_header"
android:textStyle="bold" />
<TextView
android:id="#+id/tvGroupMemberCount"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#android:color/white"
android:textSize="#dimen/text_content" />
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="#null"
android:paddingStart="#dimen/divider_normal"
android:paddingEnd="#dimen/divider_normal"
android:src="#drawable/ic_chevron_right_white_24dp" />
</LinearLayout>
</FrameLayout>
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/swipeRefreshLayoutTimeline"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:overScrollMode="never"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingTop="4dp">
<android.support.v7.widget.CardView
android:id="#+id/cvCreateScoop"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/divider_small"
android:layout_marginRight="#dimen/divider_small"
android:clickable="true"
android:focusable="true"
android:foreground="?attr/selectableItemBackground"
app:cardCornerRadius="8dp"
app:cardUseCompatPadding="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="#dimen/divider_normal">
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:src="#drawable/svg_nav_create_scoop" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_vertical"
android:paddingStart="#dimen/divider_normal"
android:text="What's on your mind?"
android:textSize="#dimen/text_content" />
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:padding="#dimen/divider_xsmall"
android:src="#drawable/svg_insert_image" />
</LinearLayout>
</android.support.v7.widget.CardView>
<RelativeLayout
android:id="#+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:overScrollMode="never"
android:nestedScrollingEnabled="false"
android:paddingLeft="8dp"
android:paddingRight="8dp"
android:paddingBottom="4dp">
</android.support.v7.widget.RecyclerView>
</RelativeLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>
What do I have to modify so that the RecyclerView is scrollable, but the whole NestedScrollView also scrolls along with it, so that if the user is scrolling back up (swiping from top to bottom), the RecyclerView will scroll along with the NestedScrollView, which will bring the layouts above RecyclerView.
To visualize:
The layout I'm trying to achieve is similar to that of facebook's. When you scroll down, the timeline will scroll down, and the search bar with the messenger icon at the top is also scrolled so that it is hidden when scrolling down. When you scroll up, the timeline is being scrolled back up, and showing the search bar again.
I decided to do it differently because I wasn't able to solve it with this method. Instead, I used a CollapsingToolbar and put the other layouts inside it, then removing its background so it does not look like a toolbar, and it seamlessly does what I wanted to, just with a different implementation.
Related
I have created 2 recycleviews in one activity. One scrolls horizontally while other scrolls vertically. I can scroll correctly inside each RecyclerView but the page as a whole won't scroll i.e. top RecyclerView stays at the top always and bottom one stays at the bottom like both are fixed in position.
<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:orientation="vertical"
tools:context="com.shakeelnawaz.recipes.AllRecipesFragmet">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:text="#string/trending_recipes"
android:textSize="18sp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/horizontaltrendingrecycleview"
android:layout_width="match_parent"
android:layout_height="240dp"
android:layout_marginStart="15dp"
android:orientation="horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="#string/all_recipes"
android:textSize="18sp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recycleView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v7.widget.RecyclerView>
</LinearLayout>
</ScrollView>
I read this post "Scolling with multiple RecyclerViews in Layout" and set vertical recycleview's height programmatically. like this
LinearLayout.LayoutParams params = new
LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
// calculate height of RecyclerView based on child count
params.height=1150;
// set height of RecyclerView
recyclerView.setLayoutParams(params);
But the problem is that how I can calculate the height of RecyclerView based on child count?
Use NestedScrollView instead of ScrollView
and use this below line in your Fragment in Activity.
ViewCompat.setNestedScrollingEnabled(mYourRecycleView, false);
This will be work on all your Android API level.
Replace ScrollView with NestedScrollView
Then add: horizontaltrendingrecycleview.isNestedScrollingEnabled = false
Your XML should look like below:
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:context="com.shakeelnawaz.recipes.AllRecipesFragmet">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginStart="20dp"
android:layout_marginTop="20dp"
android:text="#string/trending_recipes"
android:textSize="18sp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/horizontaltrendingrecycleview"
android:layout_width="match_parent"
android:layout_height="240dp"
android:layout_marginStart="15dp"
android:orientation="horizontal"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="20dp"
android:text="#string/all_recipes"
android:textSize="18sp" />
<android.support.v7.widget.RecyclerView
android:id="#+id/recycleView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
My app uses the SlidingUpPanel library. The main sliding up panel holds a RelativeLayout and a LinearLayout as its two children. The TabLayout is in the LinearLayout. Two of the tabs contain scrollable views and the third does not. All of the tabs are fragments.
The sliding up panel works as expected for the non-scrollable view and handles the first scrollable event on the scrollable views. However, the moment I release my finger, the scroll capability goes away and the view sticks.
Looking at other stackoverflow questions, I have tried setting the drag view and setting the scrollview as the documentation suggests but no dice. The view still sticks after the first scroll event.
I also implemented a ScrollableViewHelper as the documentation recommended but that didn't seem to help at all.
Here is a video of the behavior I am describing
SlidingUpPanel documentation on scrollable views
https://github.com/umano/AndroidSlidingUpPanel#scrollable-sliding-views
SlidingUpPanel Layout
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:sothree="http://schemas.android.com/apk/res-auto"
android:id="#+id/eventDetailsFullLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.sothree.slidinguppanel.SlidingUpPanelLayout
android:id="#+id/eventDetailsSlidingUpPanel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
sothree:umanoShadowHeight="4dp">
<RelativeLayout
android:id="#+id/eventDetailsHeaderLayout"
android:paddingTop="8dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="#+id/eventDetailsEventImageLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatImageView
android:id="#+id/eventDetailsEventBanner"
android:layout_width="match_parent"
android:layout_height="120dp"
android:background="#color/gray"
android:scaleType="fitXY" />
<LinearLayout
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_centerInParent="true"
android:background="#drawable/grey_circle"
android:gravity="center">
<android.support.v7.widget.AppCompatImageView
android:id="#+id/eventDetailsEventLogo"
android:layout_width="56dp"
android:layout_height="56dp"
android:gravity="center"
app:srcCompat="#drawable/ic_storefront" />
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/eventDetailsEventImageLayout"
android:layout_margin="16dp"
android:orientation="vertical">
<TextView
android:id="#+id/eventDetailsEventName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/darkDarkGray"
android:textSize="18sp"
app:fontFamily="sans-serif-medium" />
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/eventDetailsTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorColor="#color/teal"
app:tabSelectedTextColor="#color/teal"
app:tabTextColor="#color/gray" />
<android.support.v4.view.ViewPager
android:id="#+id/eventDetailsViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</com.sothree.slidinguppanel.SlidingUpPanelLayout>
</LinearLayout>
I have this activity design, which shows a card view inside a scrollView, But under that cardview I need to put a listview or recyclerview. The problem is that I need the scroll of that list to coordinate with the main scroll. Osea that when lower in the content the cardview will disappear and the list of the recyclerview or listview will be crossed.
I need all the content to respond to the main scroll to show up and disappear after titlebar, Which should I change or redesign?
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.CardView
app:cardElevation="5dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/post_coordinator"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/post_bg"
android:layout_width="match_parent"
android:layout_height="150dp"
android:scaleType="fitXY"
android:src="#drawable/default_profile" />
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabSize="normal"
android:src="#drawable/ic_hot_black"
app:layout_anchorGravity="bottom"
android:layout_marginLeft="16dp"
app:layout_anchor="#id/post_bg"
android:tint="#FFF"
/>
<com.mikhaellopez.circularimageview.CircularImageView
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_anchor="#id/post_bg"
app:layout_anchorGravity="center_horizontal|bottom"
android:src="#drawable/profile"
app:civ_border_color="#FFF"
app:civ_border_width="3dp"
/>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:fabSize="normal"
android:src="#drawable/ic_hot_black"
app:layout_anchorGravity="bottom|end"
android:layout_marginRight="16dp"
app:layout_anchor="#id/post_bg"
android:tint="#FFF"
/>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_marginTop="205dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingBottom="50dp"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Prepare your Anus Cersei Lanister, You Gonna Die"
android:textAppearance="#style/Base.TextAppearance.AppCompat.Large"
android:textColor="#2d2d2d"
android:textAlignment="center"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:text="#string/emilia"
android:textColor="#color/secondary_text"
android:layout_marginTop="10dp"
/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
</android.support.v7.widget.CardView>
<ListView
android:id="#+id/post_comments"
android:layout_marginTop="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</ListView>
</LinearLayout>
</ScrollView>
Add your recyclerview inside NestedScrollview.
Also add recyclerview.setNestedScrollingEnabled(false);
Use android:fillViewport="true" to your ScrollView. ListView that located inside ScrollView works properly.
<ScrollView
android:id="#+id/scrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
I'd recommend putting the CardView inside the RecyclerView as a header, and then you don't need the top ScrollView, the card and the list items would all be scrollable within the RecyclerView.
There are many ways to add a header to a RecyclerView, see here:
Is there an addHeaderView equivalent for RecyclerView?
I have a RecyclerView and I use top padding and while initially it is displayed when I get the data from the network and I add them to the adapter, RecyclerView scrolls to top and the padding is changed to zero.
Is there a way I can keep the top padding while I add new items ?
Xml layout :
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:background="#color/main_bg" android:clickable="true">
<FrameLayout
android:layout_width="match_parent" android:layout_height="wrap_content">
<ImageView
android:id="#+id/iv_profile_cover"
android:scaleType="fitXY"
android:layout_width="match_parent" android:layout_height="#dimen/profile_cover_height"
android:contentDescription="Cover image" />
<ImageView
android:src="#color/light_grey_with_alpha"
android:contentDescription="Gray Overlay"
android:layout_width="match_parent" android:layout_height="#dimen/profile_cover_height" />
</FrameLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_profile_photo_list"
android:clipToPadding="false" android:clipChildren="false" android:paddingTop="#dimen/profile_content_height"
android:layout_marginTop="?attr/actionBarSize"
android:layout_marginLeft="16dp" android:layout_marginRight="16dp"
android:layout_width="match_parent" android:layout_height="wrap_content" />
</FrameLayout>
I want to implement view anchoring, I have a Horizontal ScrollView which I want to anchor to a button, the button files the screen width, in the ScrollView is a linearlayout with images, I want the Images to be looking like they are pass on the Button, I want to make something like how a Fab manages to anchor between view except I do not know where to start, Fab has attributes like app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end"
which make it very easy to anchor it, I once tried implementing anchoring but on Big screens it was cutting off from the anchor, below is my XML layout
<FrameLayout
style="#style/commonListItemStyle"
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:background="#android:color/transparent">
<FrameLayout
android:id="#+id/container"
android:paddingTop="4dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clickable="true"
android:paddingBottom="4dp"
android:foreground="?attr/selectableItemBackground">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<HorizontalScrollView
android:layout_width="match_parent"
android:scrollbars="none"
android:id="#+id/scrollView"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/imageHolder"
android:orientation="horizontal">
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src="#drawable/clothes"/>
</LinearLayout>
</HorizontalScrollView>
<android.support.v7.widget.CardView
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="wrap_content"
app:cardCornerRadius="2dp"
app:cardElevation="1dp"
android:layout_below="#+id/scrollView"
app:cardMaxElevation="2dp"
app:cardUseCompatPadding="true"
android:id="#+id/relativeLayout">
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content">
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Add New Item"
android:textStyle="bold"
android:id="#+id/addNewItem"
android:textSize="16sp"
style="?android:buttonBarButtonStyle"
android:textColor="#color/google_darkblue"
android:layout_weight="1"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
</RelativeLayout>
</FrameLayout>
</FrameLayout>
So I will give an example of Gem Player here https://android-arsenal.com/details/3/2679 I want the HorizontalScrollview to act like the Fab and the Button to act like the red view anchoring the fab, I want when Images are being scrolled within the Horizontal scrollview to look like they are halfway on the Button, I want the user to feel like the image is on the button.