Hi I'm trying to use Collapsing Toolbar but when the collapsing toolbar collapses the title of the toolbar moves outside the screen. I'm using right alignment for the text as i'm trying to build an app in Urdu language. I have searched on this and not no solution. Need help!
See the screenshot here
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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.mrvirk.urduapp.MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="350dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
android:fitsSystemWindows="true"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="350dp"
app:layout_collapseMode="parallax"
android:contentDescription="#string/app_name"
android:src="#drawable/quran"
android:scaleType="centerCrop"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/toolbar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:title="#string/Quran"
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.v7.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:cardElevation="6dp"
android:layout_marginBottom="16dp"
app:cardUseCompatPadding="true"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
<TextView
android:id="#+id/quranTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:padding="12dp"
android:textStyle="bold"
android:layout_marginTop="12dp"
android:text="#string/Quran"
android:textColor="#color/colorPrimary"
android:layout_gravity="right"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="12dp">
<TextView
android:id="#+id/quranIntro"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_weight="9"
android:padding="10dp"
android:text="#string/intro"
android:textColor="#color/colorPrimary"
android:textSize="22sp"
android:textStyle="bold" />
</LinearLayout>
<TextView
android:id="#+id/quranDesc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="17sp"
android:lineSpacingMultiplier="1.5"
android:padding="20dp"
android:layout_marginTop="12dp"
android:text="#string/description"
/>
</LinearLayout>
</android.support.v7.widget.CardView>
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="97dp"
android:elevation="6dp"
android:scaleType="fitCenter"
android:src="#drawable/fav"
app:layout_anchor="#id/appbar"
app:backgroundTint="#color/white"
app:layout_anchorGravity="bottom|left|end"
app:pressedTranslationZ="12dp" />
</android.support.design.widget.CoordinatorLayout>
Thanks in Advance :)
I could not find a better answer or solution to this problem. Now i have added a TextView at the right of the toolbar title. Which basically consume some space so the title comes at the required place. And i know its not the best practice. If someone has a better solution Please share.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/toolbar"
app:title="#string/Quran"
android:gravity="right"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark"
app:layout_collapseMode="pin" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:layout_gravity="right" />
</android.support.v7.widget.Toolbar>
in your CollapsingToolbarLayout try to add this app:layout_scrollFlags="scroll|exitUntilCollapsed"
like this
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="350dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
Related
I have the following code below on which I'm trying to make a collapsible toolbar that will make the toolbar which has a linearlayout inside, to stick to the bottom part of the layout when expanded.
I have been moving parts/layouts all around for several hours trying to make it stick to the bottom and still show at the appbar even when closed/pushed up but I cant make it show up as I intended.
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="#style/AppTheme.PopupOverlay">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView
android:id="#+id/ivProfileAvatar"
android:layout_width="160dp"
android:layout_height="160dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/profile_image" />
<Space
android:layout_width="match_parent"
android:layout_height="16dp" />
<TextView
android:id="#+id/tvUserUsername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="SomeName"
android:textColor="#android:color/white"
android:textSize="24dp"
android:textStyle="bold" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="UniversityName"
android:textColor="#android:color/white"
android:textSize="16dp" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="tvUserStatus"
android:textColor="#android:color/white"
android:textSize="16dp" />
<Space
android:layout_width="match_parent"
android:layout_height="16dp" />
<Button
android:id="#+id/btnEditProfile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/btn_gradient_blue"
android:paddingEnd="48dp"
android:paddingStart="48dp"
android:text="Edit Profile"
android:textAllCaps="false"
android:textColor="#android:color/white" />
</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.support.design.widget.TabLayout
android:id="#+id/tabsProfile"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tabBackground="#null"
app:tabGravity="center"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="2dp">
<android.support.design.widget.TabItem
android:id="#+id/tabProfileMyLikes"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:id="#+id/tabProfileMyPosts"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
You are using TabLayout inside Toolbar and that's not a good design and wrong (i should say).
Instead, try something like this:
<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.TabLayout
android:id="#+id/tabsProfile"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:tabBackground="#null"
app:tabGravity="center"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="2dp">
<android.support.design.widget.TabItem
android:id="#+id/tabProfileMyLikes"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<android.support.design.widget.TabItem
android:id="#+id/tabProfileMyPosts"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</android.support.design.widget.TabLayout>
To make a view pinned or stick somewhere, using app:layout_collapseMode="pin" will help or instead, add the view to CoordinatorLayout like FloatingActionButton position to make it stick in the bottom and set: android:gravity to bottom.
Use the below code I hope it will help you
<?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.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="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/TextAppearance.AppCompat.Title"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
app:titleEnabled="false">
<include layout="#layout/record_description_header" />
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="230dp"
android:layout_marginTop="50dp"
android:scaleType="centerCrop"
android:src="#drawable/bcslogo2"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
this is my xml
<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"
app:layout_scrollFlags="scroll|snap"
android:id="#+id/road_coordinator_id"
android:background="#color/primary_light"
android:fitsSystemWindows="true"
>
<android.support.design.widget.AppBarLayout
android:id="#+id/main.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/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
android:background="#color/primary_light"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
>
<android.support.v7.widget.Toolbar
android:id="#+id/maintoolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
/>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/viewpager_id"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
</android.support.v4.view.ViewPager>
</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:layout_gravity="fill_vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/road"
android:layout_below="#+id/mainbackdrop"
tools:context=".Fragments.road">
<ImageView
android:layout_width="120dp"
android:layout_height="120dp"
android:src="#drawable/cameraicon"
android:id="#+id/camera_road"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Location"
android:id="#+id/location"
android:layout_below="#+id/camera_road"
android:textSize="20sp"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/gps_icon"
android:layout_alignParentRight="true"
android:layout_below="#+id/camera_road"
android:id="#+id/road_gps_id"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/edit_loc_road"
android:layout_marginTop="45dp"
android:layout_below="#+id/camera_road"
android:layout_alignParentLeft="true"
android:hint="Location"
android:layout_alignParentStart="true" />
<EditText
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/road_landmark"
android:textSize="20sp"
android:layout_below="#+id/edit_loc_road"
android:hint="Landmark"/>
<EditText
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/road_desc"
android:textSize="20sp"
android:layout_below="#+id/road_landmark"
android:hint="Description"/>
<EditText
android:layout_width="match_parent"
android:layout_height="50dp"
android:id="#+id/user_road"
android:textSize="20dp"
android:layout_below="#+id/road_desc"
android:hint="Reporter"/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Phone number"
android:textSize="20dp"
android:layout_below="#+id/user_road"
android:id="#+id/phone_road_id"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"
android:layout_marginTop="57dp"
android:id="#+id/buttonroad"
android:background="#drawable/pressed"
android:layout_below="#+id/user_road"
android:layout_toStartOf="#+id/camera_road" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Cancel"
android:id="#+id/btncancel"
android:layout_alignTop="#+id/buttonroad"
android:background="#drawable/pressed"
android:layout_toEndOf="#+id/camera_road" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
////////////////////////////////////////////////////////////////////
So inside the collapsing toolbar layout i have a toolbar and its stuck at the top.There should be a toolbar below which there is a view pager .
I am not able to figure out why. If its a silly mistake forgive me. I am new to android.
My Activity xml file
///////////////////////////////////////////////////////////
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="65dp"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/frame_replace"
android:layout_below="#+id/toolbar">
</FrameLayout>
</android.support.design.widget.CoordinatorLayout>
///////////////////////////////////////////////////////////////
I am replacing the frame layout with fragment. The toolbar in my activity is getting replaced by the fragment toolbar once the fragment is back pressed. I hope this helps explain my problem more clearly.
android:fitsSystemWindows="true" add this line in your root view.
I am using Toolbar and more than one Textview with some text,but when i scroll i am trying to hide my toolbar but its not hiding,following is my xml code can anyone help me with this,Thanks in advance..
<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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<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.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:orientation="vertical"
android:paddingTop="24dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Product Name:"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_prodname"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:text="#string/cheese_ipsum"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Brand:"
android:layout_marginTop="10dp"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_brandnm"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:text="#string/cheese_ipsum"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Description:"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_description"
android:layout_marginLeft="5dp"
android:text="#string/cheese_ipsum"
android:layout_marginTop="5dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Price:"
android:layout_marginTop="10dp"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_price"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
android:text="#string/cheese_ipsum"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Category:"
android:layout_marginTop="10dp"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_catname"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Subcategory:"
android:layout_marginTop="10dp"
android:layout_marginLeft="5dp"
android:textAppearance="#style/TextAppearance.AppCompat.Title" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/desc_subcatname"
android:layout_marginTop="5dp"
android:layout_marginLeft="5dp"
/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
<!--<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_discuss"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"/>-->
</android.support.design.widget.CoordinatorLayout>
Put you toolbar inside "NestedScrollView"
Maybe this will help? https://github.com/ksoichiro/Android-ObservableScrollView
You can just observe the scrolled area and show/hide the toolbar when necessary.
Use this code for Toolbar:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"/>
Explanation :
The scroll flag used within the attribute app:layout_scrollFlags must be enabled for any scroll effects to take into effect.
For more information and different scrolling effects check Handling-Scrolls-with-CoordinatorLayout
If you want to achieve that without using any libraries, you have to put Toolbar inside the CollapsingToolbarLayout. Here is the working 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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
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"
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_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
// put your contents here..
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
I created a collapsing toolbar and placed a recyclerview below it but when I run the app the cardviews inside the recycleview overlaps the image of the collapsing toolbar .How can I fix this
MainActivity.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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
android:fitsSystemWindows="true">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
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.v7.widget.RecyclerView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/rv"
android:orientation="vertical"
android:clipToPadding="false"
android:layout_marginTop="?attr/actionBarSize"
android:layout_below="#+id/image"
/>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:layout_anchor="#id/app_bar_layout"
style="#style/fab"
app:theme="#style/ThemeOverlay.AppCompat.Light"
app:layout_anchorGravity="bottom|right|end"
/>
</android.support.design.widget.CoordinatorLayout>
Item.xml (layout containing the cardview inside the recyclerview)
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.co nbm/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
app:cardElevation="6dp"
android:padding="6dp"
android:id="#+id/cv">
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.co nbm/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="180dp"
android:background="#4682b4"
android:padding="16dp"
>
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="centerCrop"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_marginRight="16dp"
android:src="#drawable/li"
android:id="#+id/imageView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView"
android:text="Aayush Chaubey"
android:layout_alignParentTop="true"
android:layout_toRightOf="#+id/imageView"
android:textColor="#ffffff"
android:textSize="30sp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/textView2"
android:text="app developer"
android:textColor="#ffffff"
android:textSize="25sp"
android:layout_centerVertical="true"
android:layout_alignLeft="#+id/textView"
android:layout_alignStart="#+id/textView" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Show Capsule"
android:textColor="#00bfff"
android:textSize="20sp"
android:layout_marginBottom="10dp"
android:layout_marginRight="10dp"
android:id="#+id/textView3"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
</android.support.v7.widget.CardView>
Well, I think you need to add this line app:layout_behavior="#string/appbar_scrolling_view_behavior"
in your RecyclerView
Eg:
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Most importantly you will also need to add
xmlns:app="http://schemas.android.com/apk/res-auto"
in coordinatorLayout tag.
Another point: Make sure you're using com.android.support:recyclerview-v7:22.2.0 with prior version it might not work properly
Hope it helps.
I have create layout with combination of AppBarLayout > CollapsingToolbarLayout > RelativeLayout
<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/appBarLayout"
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/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="240dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<RelativeLayout
android:id="#+id/layoutHeader"
android:layout_width="match_parent"
android:layout_height="240dp"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/ivCoverImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY" />
<RelativeLayout
android:id="#+id/layoutImgWrapper"
android:layout_width="74dp"
android:layout_height="74dp"
android:layout_marginLeft="#dimen/app_normal_padding"
android:layout_marginRight="20dp"
android:layout_marginTop="100dp"
android:background="#drawable/rest_image_wrapper"
android:padding="3dp">
<ImageView
android:id="#+id/ivRestaurant"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
/>
</RelativeLayout>
<com.test.widget.CustomTextView
android:id="#+id/tvRestaurantName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/layoutImgWrapper"
android:layout_marginBottom="4dp"
android:layout_toEndOf="#+id/layoutImgWrapper"
android:layout_toRightOf="#+id/layoutImgWrapper"
android:text="Benjy's"
android:textColor="#color/white"
android:textSize="18sp"
app:typeface="fonts/proximanova_semibold.ttf" />
<RatingBar
android:id="#+id/ratingBar"
style="#style/CustomRatingBar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvRestaurantName"
android:layout_toEndOf="#+id/layoutImgWrapper"
android:layout_toRightOf="#+id/layoutImgWrapper"
/>
<com.test.widget.UnderlinedTextView
android:id="#+id/tvReviews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/ratingBar"
android:layout_marginLeft="10dp"
android:layout_toEndOf="#+id/ratingBar"
android:layout_toRightOf="#+id/ratingBar"
android:autoLink="web"
android:text="0 Review"
android:textColor="#color/white"
android:textSize="14sp"
app:underlineColor="#color/rest_review_underline_color"
app:underlineWidth="1dp" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginTop="50dp"
app:tabIndicatorColor="#color/primary_dark_color"
app:tabIndicatorHeight="#dimen/tab_indicator_height"
app:tabMode="scrollable" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
When I re-expanding layout, top part (toolbar, tab etc) is not working in ICS and jelly bean. I have tested, It was working above all versions. I think top part height is fixed after collapsing (it takes toolbar's height) in lower OS. Let me suggest any solution.
Thanks in advance.