fix toolbar top and header below - android

I have a header and a toolbar after it.
When scroll up the header the toolbar will be fix on top.
The problem is, I want the toolbar before header, on top of my activity, and when I scroll the header up the toolbar will only change its color.
toolbar
header (when scroll, change toolbar color)
any ideas how can I add the toolbar before header, on top of my activity and change its color when scroll up header?
<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: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:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout android:id="#+id/header"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="160dp"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:padding="0dp"
android:id="#+id/imageViewProfile"
android:adjustViewBounds="true"
android:cropToPadding="false" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="?attr/colorPrimaryDark" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:scrollbars="none"
android:layout_alignParentLeft="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

Try this:
<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: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"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="220dp"
android:background="#color/colorAccent"
app:layout_collapseMode="parallax">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:padding="0dp"
android:id="#+id/imageViewProfile"
android:adjustViewBounds="true"
android:cropToPadding="false"
android:layout_centerHorizontal="true"
android:src="#mipmap/ic_launcher"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="?attr/colorPrimaryDark" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<!--
<android.support.v7.widget.RecyclerView
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:scrollbars="none"
android:layout_alignParentLeft="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
-->
<include layout="#layout/content_scrolling"></include>
</android.support.design.widget.CoordinatorLayout>
OUTPUT
Hope this will help~

Related

Implementing RecyclerView with collapsing toolbar layout

I'm trying to implement RecyclerView with collapsing toolbar,but i'm facing the problem as RecyclerView comes upward on collapsing toolbar.What i want to acheive that it should be down and comes up with collapsing toolbar.
please help? Below is the image what i'm currently getting the result.
here my code
<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="sccs.android.com.userinformation.HomeScreen">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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="325dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#mipmap/nature2"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/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"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:layout_below="#+id/appbar"
android:padding="10dp"
android:id="#+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>
As #shijil showed.
You need to add this attribute to the RecyclerView (or any frame you want to have as the parent in your content):
app:layout_behavior="#string/appbar_scrolling_view_behavior"
This would be your RecyclerView's code (You don't need to add anything else besides the app:layout_behavior attribute):
<android.support.v7.widget.RecyclerView
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_below="#+id/appbar"
android:padding="10dp"
android:id="#+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
try this 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">
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/appbar"
android:padding="10dp"
android:scrollbars="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_height="325dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?colorPrimary"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#mipmap/nature2"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_flexible_space"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
The Toolbar widget should be the last child of the CollapsingToolbarLayout in order
Use this 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:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context="sccs.android.com.userinformation.HomeScreen">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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="325dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#mipmap/nature2"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/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"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:padding="10dp"
android:id="#+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</android.support.design.widget.CoordinatorLayout>

NestedScrollView in CoordinatorLayout not showing overscroll

I have NestedScrollView with some texts and because that is in
CoordinatorLayout, when i scroll it to end of the NestedScrollView does not show overscroll effect, my guess is that when i reach end and try to scroll more i don't scroll nestedScrollView but i scroll CoordinatorLayout.
<android.support.design.widget.CoordinatorLayout
android:id="#+id/activity_news_main_content"
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/activity_news_appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/activity_news_background_height"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/activity_news_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:background="#color/activity_news_collapsing_toolbar_background_color"
app:contentScrim="#color/colorPrimary"
app:expandedTitleMarginBottom="#dimen/activity_news_title_margin_bottom"
app:expandedTitleMarginStart="#dimen/activity_news_title_margin_start"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/activity_news_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
<View
android:layout_width="match_parent"
android:layout_height="#dimen/activity_news_view_height"
android:layout_gravity="bottom"
android:background="#color/activity_news_collapsing_toolbar_background_color"/>
<include
android:id="#+id/app_bar"
layout="#layout/news_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="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="#dimen/activity_news_padding">
<TextView
android:id="#+id/activity_news_subtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="#dimen/activity_news_subtitle_bottom_padding"/>
<TextView
android:id="#+id/activity_news_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
That design is wrong.
See:
<include
android:id="#+id/app_bar"
layout="#layout/news_app_bar"/>
You were including the layout in the CollapsingToolbarLayout which that should be in the NestedScrollView and not that CollapsingToolbarLayout.
Just do your stuffs in the NestedScrollView 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"
android:id="#+id/activity_news_main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<!--Here is the contents-->
<!--<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/activity_news_subtitle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<TextView
android:id="#+id/activity_news_description"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>-->
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.AppBarLayout
android:id="#+id/activity_news_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbarmain"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/colorPrimary"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/activity_news_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
app:contentScrim="#color/colorPrimary"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/activity_news_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"
app:layout_scrollFlags="scroll|exitUntilCollapsed" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
And read this: CollapsingToolbarLayout
CollapsingToolbarLayout is a wrapper for Toolbar which implements a
collapsing app bar.

Android Coordinator layout problems

I am using coordinator layout with a custom collapsing view and tablayout.
Here is 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:fresco="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.Light">
<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:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:id="#+id/cardParentLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax">
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/profilePicOverlay"
android:layout_width="match_parent"
android:layout_height="match_parent"
fresco:actualImageScaleType="centerCrop"
fresco:overlayImage="#drawable/profile_overlay" />
<RelativeLayout
android:id="#+id/childParentToAnimate"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="invisible">
<include
android:id="#+id/cardLayout"
layout="#layout/layout_profile_card"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
<com.facebook.drawee.view.SimpleDraweeView
android:id="#+id/profilePicCard"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
fresco:actualImageScaleType="centerCrop"
fresco:backgroundImage="#drawable/profile_placeholder"
fresco:roundAsCircle="true"
fresco:roundingBorderColor="#color/white"
fresco:roundingBorderWidth="2dp" />
</RelativeLayout>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="51dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="fill_vertical"
android:fillViewport="true"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#color/blue_primary"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
The problem is that when collapsed, the toolbar is appearing white (default gray color) as you can see in this image.
If I add background attribute to toolbar in xml, the toolbar is appearing even when not collapsed

CollapsingToolbar with different toolbar color

I am creating an activity with collapsing toolbar layout.
My toolbar has different color and with a parralax image.
What i want is to get I have different color of toolbar and when collpased,
the toolbar color will be change to another color.
Here's 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"
xmlns:fab="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorWhite"
android:fitsSystemWindows="true"
tools:context="com.toweelo.activity.ViewReviews">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="310dp"
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="match_parent"
android:background="#color/colorPrimaryDark"
app:contentScrim="#color/colorPrimaryDark"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/img_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/toweelo_2"
android:fitsSystemWindows="false"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="64dp"
android:background="#color/colorWhite"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<TextView
android:id="#+id/toolbarTitle"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:ellipsize="end"
android:gravity="center_vertical"
android:maxLines="2"
android:text=""
android:textColor="#color/colorBlack"
android:textSize="18dp"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_view_reviews"/>
ATM, i only getting this result.
The white is my toolbar. And it should be white at start,
and then after collapsing it would be chnage to other color.
I want the image to be under the toolbar.
Here is the sample of what am i doing..
In the first image, its not yet collpased.
And when the user scroll, the result will be the image 2
This is what you need, check the implementation and replace your things in it:
<?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/fab_coordinator_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EEEEEE"
android:fitsSystemWindows="true">
<android.support.v4.widget.NestedScrollView
android:id="#+id/scroll"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<include layout="#layout/activityusrlayout" />
</android.support.v4.widget.NestedScrollView>
<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:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/image"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_alignParentStart="true"
android:background="#drawable/header"
android:contentDescription="#string/imghd"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/tbbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/profile_image"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginBottom="30dp"
android:clickable="true"
android:src="#drawable/ic_acc"
app:layout_anchor="#id/app_bar_layout"
app:layout_anchorGravity="bottom|center" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:src="#drawable/ic_remove_acc"
app:backgroundTint="#DD2C00"
app:fabSize="normal"
app:layout_anchor="#id/fab_coordinator_layout"
app:layout_anchorGravity="right|bottom" />
</android.support.design.widget.CoordinatorLayout>
Here is the important code inside CollapsingToolbarLayout:
app:contentScrim="?attr/colorPrimary"

android Whatsapp like profile interface

I am looking for a way to create a profile interface like whatsapp:
I used collapsing toolbar and a recyclerView with inside CardView but my interface had a lot of problems.
When I scoll the recyclerView the items inside start scrolling when the toolbar is collapsed and the space of scrolling turn in the same space where before (when the toolbar was open) there was the image.
When the toolbar is collapsed there is the shadow.
This is the code:
<?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/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f1f1f1"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f1f1f1"
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="?attr/colorPrimary"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<org.test.myapp.objects.SquareImageView_OBJ
android:id="#+id/avatar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffff336c"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/anim_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.v7.widget.RecyclerView
android:id="#+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:cacheColorHint="#android:color/transparent"
android:clipToPadding="false"
android:fadeScrollbars="true"
android:paddingTop="?attr/actionBarSize"
android:scrollbars="vertical"
android:scrollbarThumbVertical="#drawable/scrollbar_color"
/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
This is what happen:
Recycler view must be moved outside to AppBarLayout. and Try this way
<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:background="#f1f1f1"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#f1f1f1"
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="?attr/colorPrimary"
app:expandedTitleMarginBottom="20dp"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<org.test.myapp.objects.SquareImageView_OBJ
android:id="#+id/avatar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffff336c"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/anim_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.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:cacheColorHint="#android:color/transparent"
android:clipToPadding="false"
android:fadeScrollbars="true"
android:paddingTop="?attr/actionBarSize"
android:scrollbars="vertical"
android:scrollbarThumbVertical="#drawable/scrollbar_color"
/>
</android.support.design.widget.CoordinatorLayout>
Move your RecyclerView out of the AppBarLayout.
you could use NestedScrollView with CoordinatorLayout like this
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/profile_header_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<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="16dp"
app:expandedTitleMarginStart="20dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainView"
android:layout_width="match_parent"
android:layout_height="#dimen/profile_header_height"
android:background="#color/colorPrimary"
>
<ImageView
android:id="#+id/ivAvatar"
android:layout_width="#dimen/appbar_profile_pic_height_width"
android:layout_height="#dimen/appbar_profile_pic_height_width"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/profile_header_margin_top"
android:layout_marginLeft="?android:attr/listPreferredItemPaddingLeft"
android:contentDescription="#string/userPictureDes"
android:src="#drawable/ic_user_circle_white" />
<TextView
android:id="#+id/text_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="#string/example_user_name"
android:layout_centerHorizontal="true"
android:layout_below="#+id/ivAvatar"
android:layout_marginBottom="#dimen/list_text_padding_top"
android:layout_marginTop="5dp"
android:textColor="#android:color/white"
android:textSize="#dimen/profile_name_text_size" />
</RelativeLayout>
</FrameLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/container_scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
>
<!-- your view code here -->
</android.support.v4.widget.NestedScrollView>

Categories

Resources