RecyclerView inside NestedScrollView is not scrolling up when Image is collapsed - android

Here is a link to the whole project so that you can reproduce the problem:
https://github.com/FaridArbai/TapExchange/tree/master/TapExchange
I would like to ask for help with an issue that I've been struggling with for about two days and yet found no solution in spite of the thorough research that I have done.
Basically, I have an AppBarLayout with a CollapsingToolbarLayout inside whose mission is to collapse a background image when the user scrolls down a RecyclerView of CardViews. The problem arises when I try to scroll down that RecyclerView once the Image is fully collapsed: It won't scroll if I touch one of the cardviews that compose the RecyclerView!
Here is the look with no collapse (here I can scroll with no problem):
Uncollapsed Image, able to scroll in any direction
And here is the look once the image is collapsed (here I cannot scroll down if my finger touches any cardview that compose the RecyclerView):
Collapsed Image, unable to scroll down if I touch one of the cardviews
The code for the whole layout:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".profiles.PersonalProfile"
android:background="#FCFCFC">
<android.support.design.widget.AppBarLayout
android:id="#+id/personal_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/personal_collapsing"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:contentScrim="?attr/colorPrimary"
app:title=""
app:titleEnabled="false">
<ImageView
android:id="#+id/personal_image_background"
android:layout_width="match_parent"
android:layout_height="340dp"
android:scaleType="centerCrop"
android:src="#drawable/profile_background"/>
<android.support.v7.widget.Toolbar
android:id="#+id/personal_toolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Space
android:id="#+id/avatar_collapsed_target"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginLeft="0dp"/>
<TextView
android:id="#+id/personal_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18dp"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:text="Unknown Username"/>
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/section_selection_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:srcCompat="#drawable/ic_action_add" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/personal_image_foreground"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="120dp"
android:layout_gravity="top|center_horizontal"
android:src="#drawable/executive"
app:collapsedTarget="#id/avatar_collapsed_target"
app:layout_behavior="com.faridarbai.tapexchange.graphical.CollapsingAvatarBehavior"
android:elevation="5dp"/>
<LinearLayout
android:id="#+id/personal_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_anchor="#id/personal_image_foreground"
app:layout_anchorGravity="bottom|center"
android:paddingTop="30dp">
<TextView
android:id="#+id/username_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Unknown Username"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</LinearLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/personal_nested_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:fillViewport="true">
<android.support.v7.widget.RecyclerView
android:id="#+id/personal_sections_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="0dp" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
I am building with the API 25 and using GUI utilities from version 25.4.0. I would be extremely grateful if anybody can help.
Thanks
EDIT
I tried with SDK nº 27 and 27.1.1 building tools, supressed both "snap" and the NestedScrollView and still got the same problem: Once the background image has collapsed the RecyclerView is unable to scroll up if I initially put my finger on a CardView from the RecyclerView. This is quite odd because WhatsApp, Facebook and Telegram use a very similar Layout and they don't have this problem so there should be a well accepted work around.
Anyone to help?

why you are using RecyclerView inside NestedScrollView?!. if yo have more items with different layouts you can use recyclerView With different ViewTypes but i won't recommend to use it inside NestedScrollView try to use it Directly and don't forget to put this app:layout_behavior="#string/appbar_scrolling_view_behavior" in the recylerView and it will work.

Related

AppBarLayout does not collapse/expand when scrolling vertically over horizontal RecyclerView inside vertical RecyclerView

When vertical RecyclerView has a horizontal RecyclerView and if user starts scrolling vertically with finger on horizontal RecyclerView then AppBarLayout does not move at all. If finger was on other list items then AppBarLayout does change its state.
Code of CollapsibleToolbar is taken from this article.
The problem is still there with CollapsingToolbarLayout inside AppBarLayout.
Is there any problem with my code or is it a library bug?
<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"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="76dp"
android:theme="#style/AppTheme.AppBarOverlay.Light">
<com.example.notcollapsingappbar.CollapsibleToolbar
android:id="#+id/motion_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="#dimen/actionBarSize"
app:layoutDescription="#xml/scene_header"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:popupTheme="#style/AppTheme.PopupOverlay" />
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="start|center_vertical"
android:text="Large title"
android:textColor="#android:color/white"
android:textSize="30sp"
app:autoSizeTextType="uniform" />
</com.example.notcollapsingappbar.CollapsibleToolbar>
</com.google.android.material.appbar.AppBarLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
android:paddingBottom="16dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
#potados's answer solves the issue. But doesn't explain why it works.
I created an issue on GitHub page of material components android with the same question. And I would like to post the answer I've received there.
try to set nestedScrollEnable of Horizontal RecyclerView to false
If NestedScrollingChild as a child View is enabled, NestedScrollingParent as a parent layout will not intercept scrolling events
You can add this line to the horizontal RecyclerView.
android:nestedScrollingEnabled="false"
Or programmatically:
recyclerView.setNestedScrollingEnabled(false);

AppBar Layout Expands Automatically when View visibility is changed from Gone to Visible on runtime

As we can see from the below sample, on changing the visibility of the view from gone to visible and vice versa, the appbar automatically expands and scrim drawn is shown as well.
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/crl_parent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
android:fillViewport="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/abl_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="#drawable/shape_rectangle_grdient_red_yellow"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax">
<FrameLayout
android:id="#+id/fl_class"
android:layout_width="match_parent"
android:layout_height="#dimen/d_280dp"
android:background="#color/colorPlaceholderBg">
<ImageView
android:id="#+id/iv_class"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="#color/colorPlaceholderBg" />
<ProgressBar
android:id="#+id/pb_dp_progress"
android:layout_width="#dimen/d_20dp"
android:layout_height="#dimen/d_20dp"
android:layout_gravity="center"
android:visibility="visible" />
</FrameLayout>
<RelativeLayout
android:id="#+id/rl_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_default_height"
android:background="#drawable/shape_rectangle_transparent_grey_gradient">
<ImageView
android:id="#+id/iv_back"
... />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/tl_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:minHeight="#dimen/toolbar_default_height"
android:visibility="visible"
app:contentInsetStart="#dimen/d_0dp"
app:layout_collapseMode="pin">
<include layout="#layout/view_toolbar" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/fragment_class_details_content" />
</android.support.design.widget.CoordinatorLayout>
This the code for the outer layout. As can be seen from the above layout that the pattern is mostly standard. I have tried replicating the bug in new sample but of no use. The initial problem seem to be changing the height of nested scroll view on runtime seems to be the problem but that is not the case. I tried to setExpand(false) on the click of the button but that is not working as well.
<img src="https://i.imgur.com/YGTT3oL.gif" title="source: imgur.com" />
Link to demo gif is here: https://i.imgur.com/YGTT3oL.gif
I bet the problem is caused by app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
You have to define the behavior you want when scrolling, check out this article: https://medium.com/martinomburajr/android-design-collapsing-toolbar-scrollflags-e1d8a05dcb02
Since I dont know what behaviour do you want, read the article and choose yourself. Hiding and showing the view is triggering those flags.
In your #layout/fragment_class_details_content check if
app:layout_behavior="#string/appbar_scrolling_view_behavior"
is present in the parent layout.
Also change app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" to
app:layout_scrollFlags="scroll|exitUntilCollapsed"
Add this attribute to the CollapsingToolbarLayout
app:toolbarId="#+id/tl_toolbar"
Add this attribute to Toolbar:
app:popupTheme="#style/AppTheme.PopupOverlay"
Extract your gone/visible layout from android.support.design.widget.CollapsingToolbarLayout.
Too much nesting you did so avoid nesting and Use constraint layout

CoordinatorLayout with NestedScrollView behavior

I am a Android newbie programmer and I am stuck with a UI problem. My goal is to achieve something closer to this:
desirable layout
I thought about it and I decided to do it with a CoordinatorLayout, AppBarLayout / CollapsingToolbarLayout and a NestedScrollView with a CardView. Sounds just fine for this problem, right?
With my actual XML I already have the toolbar, image and the scroll feature.
However, the scroll feature isn't 100% like I wanted. First of all, it's not possible to scroll down since around mid screen (probably because of android:layout_height="275dp"), it is only possible to scroll up. (and of course collapse the toolbar). My main goal is to "open" the image fullscreen. Do you have any idea how can I achieve this behaviour? Maybe controlling % in .java?
Also have one annoying bug, but I can leave with it for now, just try to help if it also gives you some OCD condition
I tried to add an transparent property to my LinearLayout but it didn't work.
Normal scroll:
Current scroll
Buggy 'panel' as it is close to collapse:
buggy panel image
My all XML:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/annonce.main.coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:ignore="RtlHardcoded"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/flexible.example.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/flexible_example_collapsing"
android:layout_width="match_parent"
android:layout_height="275dp"
app:title="Mosteiro dos Jerónimos"
app:expandedTitleMarginBottom="94dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleTextAppearance="#style/CollapsingTextAppearance.Inverse"
app:contentScrim="?attr/colorPrimary"
>
<ImageView
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:src="#drawable/mosteiro_dos_jeronimos"
android:scaleType="centerCrop"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/flexible.example.toolbar"
android:layout_width="match_parent"
android:layout_height="30dp"
android:background="#null"
app:layout_collapseMode="pin"
app:title="Mosteiro dos Jerónimos"
style="#style/ToolBarWithNavigationBack"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none"
app:behavior_overlapTop="78dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<android.support.v7.widget.CardView
android:id="#+id/flexible.example.cardview"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentPaddingBottom="16dp"
app:contentPaddingLeft="16dp"
app:contentPaddingRight="16dp"
app:cardCornerRadius="16dp"
app:cardBackgroundColor="#android:color/white"
app:cardElevation="4dp"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<View
android:id="#+id/myRectangleView"
android:layout_width="40dp"
android:layout_height="4dp"
android:layout_gravity="center"
android:layout_marginTop="4dp"
android:background="#drawable/rectangle"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lisboa"
android:textAppearance="#style/TextAppearance.Header"
style="#style/TextComponent.ItemRow"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="sans-serif-light"
android:lineSpacingExtra="8dp"
android:textSize="16sp"
android:text="#string/lorem"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/flexible.example.fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="32dp"
android:elevation="8dp"
android:src="#drawable/ic_adb_24dp"
app:layout_anchor="#id/flexible.example.cardview"
app:layout_anchorGravity="top|right|end"
tools:ignore="RtlHardcoded"
/>
</android.support.design.widget.CoordinatorLayout>
I think your layout is fine (works on my side), but maybe the behavior you want is more something like a Bottomsheet behavior.
Have you had a look at it?
Basically this will make you able something like google maps, so you would be able to scroll like you want.
Here is a tutorial to have a better understanding of what it is like.
Please let me know if this is what you're looking for.

Empty FrameLayout Blocks Button Behind

as you can see the backButton is behind the frame layout.
but i want to make this button clickable unless its visible.
im using scrollview, which means i cannot place BackButton Above.
because it will colapse when i scroll it up.
Heres the XML
<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="230dp"
android:src="#drawable/background"
android:scaleType="centerCrop">
</ImageView>
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/backButton"
android:clickable="true"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_alignParentTop="true"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:src="#drawable/ic_arrow_back_white"/>
</FrameLayout>
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="100dp"
android:scrollbars="none">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:weightSum="1">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="0.74"
android:descendantFocusability="blocksDescendants">
//SOME CONTENT HERE, REMOVED FOR READABILITY
</FrameLayout>
</LinearLayout>
</ScrollView>
</FrameLayout>
Simple question. How?
The problem here seems to be that neither you have only a single child inside your FrameLayout nor do you use the `android:layout_gravity" attribute. See the docs:
FrameLayout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other. You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.
From the image you have uploaded I can see that the whole layout can be easily implemented using new Support Libraries in Android.
And if that is your case the whole Layout can be converted changed to use a CoordinatorLayout instead of using the FrameLayout directly. Check the following image. If that is what you want then follow along and if it is not exactly what you want you can IGNORE this Answer:
If you want something like this then FrameLayout might be a hard way to go while there exist support design libraries that will make your job easier.
In this case its CoordinatorLayout and Collapsing Tool Bar but even if you do not want the Collapsing toolbar still Coordinator Layout is the best Alternative for this!
If you want to know more about support design Libraries then here is a post Android Developers Google Blog.
Coordinator Layout it is easily to make layout of the nature like yours and its a smart alternative, For the image I have uploaded the code will be something like this:
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="com.sample.foo.usingcoordinatorlayout.FabAndSnackbarActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
app:title="#string/collapsing_toolbar">
<ImageView
android:id="#+id/toolbarImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="#drawable/bg"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="28sp"
android:lineSpacingExtra="8dp"
android:text="#string/long_latin"
android:padding="#dimen/activity_horizontal_margin" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:src="#drawable/mascot_icon"
app:layout_anchor="#id/appBar"
app:layout_anchorGravity="bottom|end" />
</android.support.design.widget.CoordinatorLayout>
For Learning more about all this Support Library and more other interesting features, check this link its a good blog post about all these! Always remember you will always add support design in your app.gradle file just like appcompat. But the description from those links will consist all these information. Happy Coding!
Make your covering framework dont custom the touch event to let your underneath button be able to handle the touch event. So it is clickable.

How to use RecyclerView with NestedScrollView?

I want to make a scrolling at LinearLayout and disable scrolling from RecyclerView. I tried changing LinearLayout to NestedScrollView but it doesn't work and i don't know why.
I've tried this question but it doesn't work well. The content in RecyclerView can be loaded dynamically from WS and it's an endless scroll. The screen was freezing when content in RecyclerView updated.
I've seen this from Twitter, how can we do this https://drive.google.com/file/d/0B2JZggeoXKKFdG1ENmZEdWFIa0k/view?usp=sharing
Example
This is my simple screen of my app, i want scrolling at red currently, and it currently scrolls at 'blue'. Many thanks.
Code
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_margin="16dp"
android:background="#CCC"
android:id="#+id/imageView2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Image caption"
android:background="#cbffa3"
android:padding="16dp"
android:id="#+id/textView8" />
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Tried but not work, contents inside RecyclerView not showing
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="match_parent"
android:layout_height="160dp"
android:layout_margin="16dp"
android:background="#CCC"
android:id="#+id/imageView2" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Image caption"
android:background="#cbffa3"
android:padding="16dp"
android:id="#+id/textView8" />
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
Option 1: Use WRAP_CONTENT on RecyclerView and put it in a scroll view along with other widgets. WRAP_CONTENT on RecyclerView works only with 23.2 though. This is not a recommended way as if use WRAP_CONTENT your RecyclerView items won't get recycled and it slow down the UI when the content gets long.
Option 2: Use types for the recycler view adapter and render a different view for index 0. This answer shows how to do it.
Option 3: The best option of achieving this kind of experience is using CollapsingToolbarLayout. Your top content will collapse when you scroll up and you'll be able to scroll the RecyclerView.
Here is one way of replicating the Twitter page with CollapsingToolbarLayout.
<android.support.design.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"
android:layout_gravity="center"
android:fitsSystemWindows="false"
android:orientation="vertical"
app:statusBarBackground="#android:color/transparent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="?actionBarSize"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#android:drawable/btn_star_big_on"
app:layout_collapseMode="none"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#android:color/transparent"
android:elevation="5dp"
android:importantForAccessibility="yes"
app:layout_collapseMode="pin"
app:layout_scrollFlags="exitUntilCollapsed">
<TextView
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_centerHorizontal="true"
android:layout_gravity="center_horizontal"
android:background="#android:color/white"
android:text="Title Here"
/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
More about this is in the Android Blog - http://android-developers.blogspot.ca/2015/05/android-design-support-library.html (Scroll to "CoordinatorLayout and the app bar")
I recommend you to add a listener to the scroll view and detect if the user scrolls down, you "hide" the top. The easiest way is to use the default "Scroll Activity" that comes on the default menu when you create a new Activity in Android Studio using Material Design.

Categories

Resources