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
Related
I have a bottom sheet in my app and I want to use of Collapsing Toolbar Layout in it. but when I open bottom sheet Collapsing Toolbar Layout will disappear and I have to scroll down to see it.
And another problem is about pin mode that doesn't work for my Linear layout that I want to be the pin in scroll mode.
and when I add Collapsing Toolbar Layout my bottom sheet will not open full screen too.
This is my XML:
<?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"
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="360dp"
android:background="#ffffff"
app:elevation="5dp"
app:expanded="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expanded="true">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="252dp"
app:layout_constraintBottom_toTopOf="#+id/indicator"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<me.relex.circleindicator.CircleIndicator
android:id="#+id/indicator"
android:layout_width="match_parent"
app:ci_drawable="#drawable/circleindicator_round"
android:layout_height="48dp"
android:layout_gravity="bottom"
android:gravity="bottom"
android:visibility="visible"/>
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:layout_gravity="bottom"
android:visibility="visible"
app:titleTextColor="#color/black">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedScrollView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e9e7e7"
android:fillViewport="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Thank you for your answer.
add android:fitsSystemWindows="true" in CoordinatorLayout and CollapsingToolbarLayout. app:elevation="5dp" app:expanded="true" is not necessary . remove LinearLayout and place a FrameLayout
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:title="ASDASD">
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="252dp"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_gravity="bottom"
android:layout_marginTop="230dp"
android:layout_height="wrap_content">
<me.relex.circleindicator.CircleIndicator
android:id="#+id/indicator"
android:layout_width="match_parent"
app:ci_drawable="#drawable/circleindicator_round"
android:layout_height="48dp"
android:layout_gravity="bottom"
android:gravity="bottom"
android:visibility="visible"/>
</FrameLayout>
<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.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
and remove android:fillViewport="false" in NestedScrollView
I found my mistake.
I used my code in normal Activity and it works fine. It doesn't work correctly in the BottomSheet.
The promblem is about the BottomSheet but I don't know how to fix that. Anyway, This problem is solved by using a Simple Activity.
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>
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>
I use CollapsingToolbarLayout in an AppBarLayout only for its parallax effect while scrolling, so I need to collapse the layout completely. I mean set its height to zero after scrolling down. I set the layout minHeight to 0dp but doesn't work, and still have some part of layout visible.
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="40dp"
android:paddingRight="40dp"
android:paddingLeft="40dp"
android:background="#e91e63"
android:fitsSystemWindows="true"
android:minHeight="0dp"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="0dp"
android:fitsSystemWindows="true"
app:titleEnabled="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/index_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/suitcase"
android:padding="20dp"
android:background="#drawable/index_page_icon_bg"
android:layout_margin="5dp"
app:layout_collapseMode="parallax"/>
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="0dp"
android:minHeight="0dp"
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">
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
General Rule: If you think this is not a good Q, declare at comments then do whatever you like!
Change the AppBarLayout like this .
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#e91e63"
android:fitsSystemWindows="true"
android:minHeight="0dp"
android:theme="#style/AppTheme.AppBarOverlay">
an the ImageView will be like this .
<LinearLayout
android:paddingTop="40dp"
android:paddingRight="40dp"
android:paddingLeft="40dp"
android:scaleType="fitXY"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.4"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/index_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/suitcase"
android:padding="20dp"
android:background="#drawable/index_page_icon_bg"
android:layout_margin="5dp" />
</LinearLayout>
The problem was, you make a padding top in the AppBarLayout , so when it collapse it still make the 40dp padding , so the layout can't make Full collapse.
I'm trying to implement Coordinator Layout with collapsing toolbar layout and has recycler view into the nestedScrollView when run the app the toolbar collapse is working but the recycler view doesn't show up
and here's my xml code :
<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.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:background="#444"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<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:text="Hello Wolrd" />
<android.support.v7.widget.RecyclerView
android:id="#+id/rec"
android:layout_width="match_parent"
android:background="#00FFCC"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<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="?attr/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_scrollFlags="scroll|enterAlways"/>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="100dp"
android:scaleType="centerCrop"
android:src="#drawable/pic"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
In my opinion you do not need a NestedScrollView at all.
Try to set LinearLayout's height (parent of yours RecyclerView) to match_parent insteadof wrap_content