Collapsing toolbar issue with RecyclerView - android

I have a CollapsingToolbarLayout in layout, below that I have placed a RecyclerView. it works perfect and the parallax effects comes smoothly when the RecyclerView scrolls, but the issue, is suppose if the RecyclerView has less items and there is nothing to scroll, still it scolls and an empty space shows at the bottom. what my requirment is it shouldn't scroll if the RecyclerView can accomodate all the views in the visible screen, is there any way to do this ?
layout
<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/container_id"
android:layout_width="match_parent"
android:layout_height="match_parent">
<include layout="#layout/toolbar"/>
<android.support.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/bg_color"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
toolbar.xml
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
app:layout_scrollFlags="scroll"
app:layout_collapseMode="parallax"
android:layout_below="#+id/toolbar"
android:minHeight="250dp"
android:layout_height="300dp"
android:layout_width="match_parent"/>
<android.support.v7.widget.Toolbar
app:layout_collapseMode="pin"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:gravity="center"
android:layout_gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ToggleButton
android:layout_centerVertical="true"
android:layout_margin="#dimen/dimen_xs"
android:layout_width="20dp"
android:layout_height="20dp"
android:gravity="center"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:textOff=""
android:textOn=""/>
</RelativeLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

Related

Nestedscroll view scrolls content inside it instead of expanding its layout size when touch to toolbar layout

In Coordinatorlayout inside Nestedscrollview I have RelativeLayout and inside RelativeLayout I have Textview. When Nestedscrollview touches to Toolbar bottom part it scrolls textview content instead to full Relativelayout card.
Here is my code.
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/product_bottom_layout"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="192dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#color/white"
app:expandedTitleTextAppearance="#style/TransparentText"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/product_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:fitsSystemWindows="true"
app:imageUrl="#{viewModel.imageUrl}"
android:scaleType="centerInside"
app:layout_collapseMode="parallax"
android:background="#color/white"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:elevation="4dp"
android:gravity="center_vertical"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/dimen_60"
android:layout_marginLeft="#dimen/dimen_7"
android:layout_marginRight="#dimen/dimen_7"
android:layout_marginTop="#dimen/dimen_7"
android:background="#drawable/card_bg"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/dimen_3"
android:layout_marginRight="#dimen/dimen_3"
android:layout_marginTop="#dimen/dimen_3"
android:background="#color/white">
<app.com.test.Views.CustomTextView
android:id="#+id/description_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/dimen_12"
android:layout_marginRight="#dimen/dimen_12"
android:layout_marginTop="#dimen/dimen_12"
android:lineSpacingExtra="8dp"
android:textColor="#color/title_color"
android:textSize="14sp"/>
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

I got the solution. It's actually NestedScrollView does not scroll its child, it actually scroll content inside its child so to scroll whole layout instead of text we need to add one more parent layout like this:
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:layout_marginBottom="#dimen/dimen_60"
android:scrollbars="none"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/dimen_10"
android:background="#color/bg_color"
android:orientation="vertical"
android:padding="#dimen/dimen_6">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/dimen_10"
android:layout_marginLeft="#dimen/dimen_3"
android:layout_marginRight="#dimen/dimen_3"
android:layout_marginTop="#dimen/dimen_3"
android:background="#drawable/card_bg">
<app.com.test.Views.CustomTextView
android:id="#+id/product_title_txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/dimen_12"
android:layout_marginRight="#dimen/dimen_12"
android:layout_marginTop="#dimen/dimen_12"
android:text=""
/>
</RelativeLayout>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>

RecyclerView: fill screen heigth when AppBarLayout scrolls up (hides)

I have AppBarLayout with toolbar and 2 buttons. It hides when I scroll RecyclerView up and shows when I scroll down.
The problem is that RecyclerView is set to be below AppBarLayout and preserves its position when AppBarLayout hides and I have condition shown on the picture. I need my RecyclerView to scroll up to the statusbar as well, and return to original position on scroll down. So far I could not even find an example of that.
Thank you.
This is mt layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="ru.skyeng.listening.AudioFiles.AudioListActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
>
<ImageButton
android:id="#+id/action_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/gear"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_gravity="end"/>
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button_category"
android:layout_width="158dp"
android:layout_height="36dp"
android:layout_margin="16dp"
android:background="#drawable/selector_button_category"
android:text="#string/categories"
android:textColor="#color/colorBlue2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
<Button
android:id="#+id/button_length"
android:layout_width="158dp"
android:layout_height="36dp"
android:layout_margin="16dp"
android:background="#drawable/selector_button_length"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:text="#string/length"
android:textColor="#color/colorBlue2"/>
<View
android:id="#+id/shadow"
android:layout_below="#+id/button_length"
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#drawable/shadow">
</View>
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_below="#+id/appBarLayout"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="24dp">
</FrameLayout>
</RelativeLayout>

If you want an image to show on bellow the toolbar. You should try CollpsingLayoutToolbar.
Here is an example. I hope this helps
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleGravity="left"
app:expandedTitleGravity="bottom|right"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/CollapsedAppBarStyle"
app:layout_scrollFlags="scroll"
app:title="#string/pod">
<ImageView
android:id="#+id/collapsing_ImageView"
android:layout_width="match_parent"
android:layout_height="256dp"
android:contentDescription="#string/app_name"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/bg_image"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

Why doesn't my RecyclerView show up when it's nested inside NestedScrollView?

I'm trying to implement a recycler view with a collapsing toolbar layout. I have followed this tutorial, but so far my RecyclerView does not show up. All the other views are visible, though.
Here's my layout file:
<?xml version="1.0" encoding="utf-8"?>
<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"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
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"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.widget.SwipeRefreshLayout
android:id="#+id/contentView"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="#+id/listing_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:listitem="#layout/item_post" />
</android.support.v4.widget.SwipeRefreshLayout>
</android.support.v4.widget.NestedScrollView>
<TextView
android:id="#+id/errorView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/listing_loading_error"
android:visibility="gone"
tools:text="Error" />
<ProgressBar
android:id="#+id/loadingView"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone" />
</android.support.design.widget.CoordinatorLayout>
The progress bar and the error textview do show up when I toggle them from the code, but the recycler view won't show up.

set recyclerview to actual dp height. It worked for me.
<android.support.v7.widget.RecyclerView
android:id="#+id/listing_recycler_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:listitem="#layout/item_post" />

slidingtab view pager not coming to full screen inside CollapsingToolbarLayout

I need to implement a CollapsingToolbarLayout containing a Relative layout and a tab with viewpager below that. I have achieved ,but View pager is not coming to full screen. This is my code.
`
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="400dp"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/White">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"
android:textSize="20sp"
android:textColor="#color/colorPrimaryDark"
android:textStyle="italic"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="2dp" />
</android.support.design.widget.CollapsingToolbarLayout>
<com.wodrob.tatco.wodrobcanvas.SlidingTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
android:background="#color/tabs_background"/>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:background="#color/White"
android:layout_height="fill_parent"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
>
</android.support.v4.view.ViewPager>
</android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout>
`
I tried to give view pager layout outside the Appbar layout, but at that time it is overlapping the CollapsingToolbarLayout and comming to full screen in background.Is there any other way for achieving this??

AppBarLayout / CollapsingToolbarLayout expands indefinitely

I'm trying to use the AppBarLayout + CollapsingToolbarLayout to have a collapsible toolbar with an image that fades away while scrolling up but the toolbar remains.
The problem is when I set both AppBarLayout & CollapsingToolbarLayout android:layout_height = "wrap_content", the toolbar fills the entire screen.
http://i.stack.imgur.com/be1m6.png
When I set android:layout_height = "200dp", the height is fixed, but it doesn't work with the NestedScrollView and resize.
http://i.stack.imgur.com/MTao2.png
Here's the 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/articleLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.gmail.senokt16.bosphoruschronicle.ArticleActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/articleCollapsingToolbar"
android:layout_width="match_parent"
android:layout_height="200dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:toolbarId="#+id/article_app_bar">
<ImageView
android:id="#+id/articleActivityImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:minHeight="100dp"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
android:fitsSystemWindows="true"/>
<include
android:id="#+id/article_app_bar"
android:fitsSystemWindows="true"
layout="#layout/article_app_bar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="300dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:id="#+id/articleActivityContents"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="30dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingTop="5dp" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/articleFAB"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="16dp"
android:src="#android:drawable/ic_menu_share" />
</android.support.design.widget.CoordinatorLayout>

This happened to me as well.
First, I removed <include> and added the toolbar manually.
It still happened, so after some fiddling I found that it happens because my toolbar had a minimumHeight, but layout_height=wrap_content. I changed it to layout_height=?attr/actionbarsize, and it worked. Here is my example. (The FrameLayout has a nestedscrollview like yours inside.)
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:src="#drawable/logo"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:background="#android:color/transparent"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

I did some changes on the code and fixed the issue somewhat. Now I have another problem:
CollapsingToolbarLayout & NestedScrollView don't work together

Categories

Resources