I decided I wanted to add a collapsible toolbar to a part of my app today. I followed a guide (as I really knew nothing about collapsible toolbars) and it totally went south. Everything is showing incorrectly. Please excuse my lack of experience with these types of layouts. Thanks in advance you wonderful people of StackOverflow
Here is my layout:
<?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:id="#+id/list_coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="#+id/list_bar_layout"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/list_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">
<ImageView
android:id="#+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
tools:ignore="ContentDescription" />
<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.v7.widget.RecyclerView
android:id="#+id/list_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="12dp">
</android.support.v7.widget.RecyclerView>
<android.support.design.widget.FloatingActionButton
android:id="#+id/list_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:onClick="addItem"
android:visibility="gone"
app:fabSize="normal"
app:layout_anchor="#+id/list_main"
app:layout_anchorGravity="bottom|end" />
<LinearLayout
android:id="#+id/list_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<TextView
android:id="#+id/list_sheet_share"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:drawablePadding="10dp"
android:drawableStart="#drawable/ic_share"
android:gravity="center_vertical"
android:padding="10dp"
android:text="#string/share" />
<TextView
android:id="#+id/list_sheet_copy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:drawablePadding="10dp"
android:drawableStart="#drawable/ic_content_copy"
android:gravity="center_vertical"
android:padding="10dp"
android:text="#string/copy" />
<TextView
android:id="#+id/list_sheet_edit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:drawablePadding="10dp"
android:drawableStart="#drawable/ic_mode_edit"
android:gravity="center_vertical"
android:padding="10dp"
android:text="#string/edit_literal" />
<TextView
android:id="#+id/list_sheet_delete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:drawablePadding="10dp"
android:drawableStart="#drawable/ic_delete"
android:gravity="center_vertical"
android:padding="10dp"
android:text="#string/delete" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Here is what it looks like:
Ok, I figured it out. It is because I (stupidly) didn't have the appbar layout as the parent for the collapsing toolbar, instead it was itself. Correct layout looks like:
<?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:id="#+id/list_coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".ui.ListCollapseActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/list_bar_layout"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/list_collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/toolbar_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
tools:ignore="ContentDescription" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="parallax" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/list_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/list_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:onClick="addItem"
android:visibility="gone"
app:fabSize="normal"
app:layout_anchor="#+id/list_main"
app:layout_anchorGravity="bottom|end" />
<LinearLayout
android:id="#+id/list_sheet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<TextView
android:id="#+id/list_sheet_share"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:drawablePadding="10dp"
android:drawableStart="#drawable/ic_share"
android:gravity="center_vertical"
android:padding="10dp"
android:text="#string/share" />
<TextView
android:id="#+id/list_sheet_copy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:drawablePadding="10dp"
android:drawableStart="#drawable/ic_content_copy"
android:gravity="center_vertical"
android:padding="10dp"
android:text="#string/copy" />
<TextView
android:id="#+id/list_sheet_edit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:drawablePadding="10dp"
android:drawableStart="#drawable/ic_mode_edit"
android:gravity="center_vertical"
android:padding="10dp"
android:text="#string/edit_literal" />
<TextView
android:id="#+id/list_sheet_delete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?android:selectableItemBackground"
android:drawablePadding="10dp"
android:drawableStart="#drawable/ic_delete"
android:gravity="center_vertical"
android:padding="10dp"
android:text="#string/delete" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Related
I am trying to create a Tablayout with ViewPager that collapse at the top on scroll but the scrolling is not smooth and the tab swiping as well. This is my layout
<?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/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
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="256dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
android:background="#drawable/profile_gradient"
app:titleEnabled="false">
<RelativeLayout
android:id="#+id/htab_header2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<LinearLayout
android:id="#+id/profile_background"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_alignParentTop="true"
android:background="#drawable/girl"
android:orientation="vertical"/>
<LinearLayout
android:id="#+id/profile_gradient"
android:layout_width="match_parent"
android:layout_height="250dp"
android:layout_alignParentTop="true"
android:background="#drawable/profile_gradient"
android:orientation="vertical"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentTop="true"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="#numerouno"
android:textColor="#color/white"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_marginEnd="10dp"
android:background="#drawable/ic_settings_black_24dp" />
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignStart="#id/profile_image"
android:layout_centerVertical="true"
android:layout_marginStart="30dp"
android:orientation="vertical">
<TextView
android:id="#+id/followers_count_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="200K"
style="#style/follower_following_count"
android:textAlignment="center" />
<TextView
android:id="#+id/followers_text"
style="#style/follower_following"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Followers" />
</LinearLayout>
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_gravity="center"
android:layout_marginTop="10dp"
android:src="#drawable/girl" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignEnd="#id/profile_image"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="30dp"
android:orientation="vertical">
<TextView
android:id="#+id/following_count_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="200K"
style="#style/follower_following_count"
android:textAlignment="center" />
<TextView
android:id="#+id/following_text"
style="#style/follower_following"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Following" />
</LinearLayout>
</RelativeLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:gravity="center"
android:id="#+id/name_layout">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Bradt Daniels"
android:id="#+id/full_name"
style="#style/profileFullName"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableStart="#drawable/ic_location_on"
android:text="Hilltop, Mount View"
style="#style/profileFullName"
android:textSize="15sp"
android:textColor="#color/yellow"/>
</LinearLayout>
</LinearLayout>
</RelativeLayout>
<!--<View-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="match_parent"-->
<!--android:alpha="0.3"-->
<!--android:background="#android:color/black"-->
<!--android:fitsSystemWindows="true"/>-->
<android.support.v7.widget.Toolbar
android:id="#+id/htab_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:layout_marginBottom="48dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="#+id/htab_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabIndicatorColor="#android:color/white"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#color/white_70"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/htab_viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
Evertyhing works fine without the RelativeLayout. And I need that layout for other implementation.
I am trying to create something synonymous to twitter profile page
Any help will be appreciated
I have the same problem with you, make it like this
<?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:layout_width="match_parent"
android:layout_height="350dp"
android:fitsSystemWindows="true"
app:contentScrim="#color/colorPrimary"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/iv_stadium"
android:layout_width="match_parent"
android:layout_height="350dp"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<ImageView
android:layout_width="match_parent"
android:layout_height="350dp"
android:src="#color/blackTransparent"
app:layout_collapseMode="parallax" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="#+id/iv_badge"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_collapseMode="parallax" />
<TextView
android:id="#+id/tv_year"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:gravity="center"
android:textColor="#android:color/white" />
<TextView
android:id="#+id/tv_stadium"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
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"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
I'm trying to collapse my header view while scrolling up the view pager.
In the following image relativelayout3 is the layout I want to collapse..
Something like playstore preview image collapse in app page..
I tried searching and the following line in relativelayout3, But it didnt work
app:layout_scrollFlags="scroll|enterAlways"
And this my complete xml,
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/relativeLayout3"
app:layout_scrollFlags="scroll|enterAlways"
>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="55dp"
android:id="#+id/toolbar"
android:background="#color/cornflower_blue_two"
android:elevation="5dp">
<ImageButton
android:id="#+id/more"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="10dp"
android:background="#null"
android:src="#drawable/ic_dots_vertical" />
<ImageButton
android:id="#+id/back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginEnd="5dp"
android:layout_marginStart="10dp"
android:background="#null"
android:src="#drawable/ic_arrow_left" />
</RelativeLayout>
<ss.com.bannerslider.views.BannerSlider
android:id="#+id/slider"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#color/blue"
android:layout_below="#id/toolbar"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignParentStart="true"
android:layout_below="#+id/relativeLayout3">
<TextView
android:id="#+id/product"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="Blah Blah"
android:textColor="#color/dark_gray"
android:textSize="25sp"
android:textStyle="bold" />
<TextView
android:id="#+id/brand"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignStart="#+id/product"
android:layout_below="#+id/product"
android:text="Blah inc."
android:textSize="20sp"
android:textStyle="bold" />
<TextView
android:id="#+id/ratings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="#+id/brand"
android:layout_alignBottom="#+id/brand"
android:layout_marginStart="10dp"
android:layout_toEndOf="#+id/brand"
android:background="#color/ratings"
android:paddingEnd="10dp"
android:paddingStart="10dp"
android:text="4.7"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/brand"
android:layout_marginTop="14dp"
app:tabGravity="fill"
app:tabMode="fixed" />
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_below="#+id/tabLayout" />
</RelativeLayout>
</RelativeLayout>
</ScrollView>
</RelativeLayout>
Consider using CollapsingToolbarLayout. Please refer Collapsing Toolbar Example.
<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:layout_width="match_parent"
android:layout_height="250dp"
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">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/cartoon"
android:scaleType="centerCrop"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
app:layout_collapseMode="parallax" />
<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:background="#ffe5e5"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingTop="10dp">
<include layout="#layout/card_layout" />
<include layout="#layout/card_layout" />
<include layout="#layout/card_layout" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Output
More Reference
https://i.stack.imgur.com/j1sPI.png
Please see the link for layout
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="20dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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"
app:contentScrim="#80000000"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin">
<ImageView
android:id="#+id/user_profile_empty"
android:layout_width="match_parent"
android:layout_height="#dimen/secondaryPhotoWidth"
android:scaleType="centerCrop"
android:visibility="gone" />
<android.support.v4.view.ViewPager
android:id="#+id/photo_pager"
android:layout_width="match_parent"
android:layout_height="#dimen/secondaryPhotoWidth" />
<com.ogaclejapan.smarttablayout.SmartTabLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/viewpagertab"
android:layout_width="wrap_content"
android:layout_height="#dimen/Profile.List.Item.Edit.Margin.Left"
android:layout_alignBottom="#+id/photo_pager"
android:layout_alignRight="#+id/photo_pager"
android:layout_gravity="bottom"
android:layout_marginBottom="#dimen/Profile.List.Item.Edit.Margin.Left"
android:layout_marginRight="#dimen/Profile.List.Item.Edit.Margin.Left"
android:layout_marginTop="#dimen/Profile.List.Item.Edit.Margin.Left"
app:stl_customTabTextLayoutId="#layout/custom_tab_circle"
app:stl_dividerColor="#color/transparent"
app:stl_dividerThickness="0dp"
app:stl_indicatorColor="#color/Sapio.RED"
app:stl_indicatorCornerRadius="#dimen/Profile.List.Item.Edit.Margin.Left"
app:stl_indicatorInterpolation="linear"
app:stl_indicatorThickness="#dimen/Profile.List.Item.Edit.Margin.Left"
app:stl_underlineColor="#color/transparent"
app:stl_underlineThickness="0dp" />
</RelativeLayout>
<!--<android.support.v7.widget.Toolbar-->
<!--android:id="#+id/MyToolbar"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="80dp"-->
<!--app:layout_collapseMode="parallax"/>-->
<RelativeLayout
android:id="#+id/likeIgnore_name_view"
android:layout_width="match_parent"
android:layout_height="#dimen/secondaryPhotoWidth">
<LinearLayout
android:id="#+id/like_ignor_view_upper"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:layout_marginRight="15dp"
android:orientation="horizontal">
<ImageView
android:id="#+id/skip_button"
android:layout_width="45dp"
android:layout_height="45dp"
android:src="#drawable/close" />
<ImageView
android:id="#+id/superLikeImage"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginLeft="#dimen/Default.PaddingMargin.Small"
android:src="#drawable/super_like" />
<ImageView
android:id="#+id/like_button"
android:layout_width="45dp"
android:layout_height="45dp"
android:layout_marginLeft="#dimen/Default.PaddingMargin.Small"
android:src="#drawable/heart" />
</LinearLayout>
<LinearLayout
android:id="#+id/nameView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:layout_marginBottom="20dp"
android:layout_marginLeft="25dp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/nameView_margin"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:visibility="visible" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="#dimen/abc_action_bar_subtitle_bottom_margin_material"
android:paddingRight="#dimen/abc_action_bar_subtitle_bottom_margin_material"
android:layout_weight="1"
android:gravity="center"
android:singleLine="true"
android:text="abc,31"
android:textColor="#color/Header.Text"
android:textSize="#dimen/Registration.Button.TextSize"
android:textStyle="bold" />
<TextView
android:id="#+id/distance"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingLeft="#dimen/abc_action_bar_subtitle_bottom_margin_material"
android:paddingRight="#dimen/abc_action_bar_subtitle_bottom_margin_material"
android:layout_weight="1"
android:gravity="center"
android:singleLine="true"
android:text="abc,31"
android:textColor="#color/Header.Text"
android:textSize="#dimen/Registration.Button.TextSize" />
</LinearLayout>
</LinearLayout>
<Button
android:id="#+id/refine_matches_view"
style="#style/TextAppearanceThin"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentLeft="true"
android:layout_gravity="center_vertical"
android:layout_marginLeft="15dp"
android:layout_marginTop="20dp"
android:background="#drawable/filter_shape"
android:gravity="center"
android:minHeight="0dp"
android:text="#string/filter"
android:textAllCaps="false"
android:textColor="#android:color/white"
android:textSize="#dimen/LoginScreen.Button.TextSize"
android:visibility="visible" />
<ImageButton
android:id="#+id/more_button"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_marginRight="15dp"
android:layout_marginTop="20dp"
android:background="#drawable/ic_more_vert_white_36dp"
android:gravity="center"
android:minHeight="0dp"
android:src="#drawable/filter_shape"
android:visibility="visible" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/MyToolbar"
android:layout_width="match_parent"
android:layout_height="80dp"
app:layout_collapseMode="parallax"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<ImageView
android:id="#+id/user_photo"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_marginLeft="15dp"
android:gravity="center_vertical"
android:scaleType="fitCenter"
android:src="#drawable/match_bg"
android:visibility="visible"
app:elevation="10dp"
app:layout_anchor="#id/nameView"
app:layout_anchorGravity="bottom"/>
</android.support.design.widget.CoordinatorLayout>
<include
android:id="#+id/empty_profile_view"
layout="#layout/section_empty_list"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
please help me to achieve above type from layout.As i have tried as above and when scrolling the image view go inside the toolbar and half of the image view not visible.
you can follow this link.
http://www.journaldev.com/13927/android-collapsingtoolbarlayout-example
<?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"
tools:context="com.journaldev.collapsingtoolbarlayout.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/expandedImage"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="#drawable/photo"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<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/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_scrolling" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="#dimen/fab_margin"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#android:drawable/ic_dialog_info" />
</android.support.design.widget.CoordinatorLayout>
hopefully you will be helpe from it.
Actually the appbar is already having the elevation that's why it makes all the views to gets inside of itself.
So just you need to give app:elevation="0dp" to the appbar layout. It gives all other views freedom to stay over itself.
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 want to achieve view similar to below images
Below are the screens that I have achieved through design support library in android
Please see my layout file below
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/rootLayout"
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:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="64dp"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/imageburger"
app:layout_collapseMode="parallax" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dip"
android:layout_below="#+id/toolbar"
android:layout_gravity="bottom"
android:gravity="bottom"
app:layout_collapseMode="pin"
app:tabGravity="center"
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" />
</android.support.design.widget.CoordinatorLayout>
<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"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</FrameLayout>
please check the above xml and let me know what I am doing wrong??
Please check Paul Burke gists, it may be solve your problem,
https://gist.github.com/iPaulPro/1468510f046cb10c51ea
I managed to get it working by this example https://github.com/vitovalov/TabbedCoordinatorLayout.
My code looks like this now:
<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:theme="#style/AppTheme.Trans">
<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" />
<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:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="150dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginBottom="60dp"
app:expandedTitleMarginEnd="64dp">
<FFImageLoading.Views.ImageViewAsync
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="240dp"
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="100dp"
android:gravity="top"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin"
app:titleMarginTop="15dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#drawable/gradient"
app:tabIndicatorHeight="3dp"
android:layout_gravity="bottom" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
you can try soucecode ex
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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:orientation="vertical">
<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:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
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">
<LinearLayout
android:id="#+id/vUserProfileRoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:clipChildren="false"
android:clipToPadding="false"
android:orientation="vertical"
android:paddingBottom="24dp"
android:paddingLeft="24dp"
android:paddingRight="24dp"
android:paddingTop="60dp"
app:layout_collapseMode="parallax">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipChildren="false">
<ImageView
android:id="#+id/ivUserProfilePhoto"
android:layout_width="70dp"
android:layout_height="70dp"
android:background="#drawable/vdo"
android:scaleType="centerCrop"
android:adjustViewBounds="true"
android:layout_marginRight="16dp"
/>
<LinearLayout
android:id="#+id/vUserDetails"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:orientation="vertical">
<LinearLayout
android:id="#+id/vUserStats"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginRight="16dp"
>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1167"
android:textColor="#color/black"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="videos"
android:textColor="#color/black"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="396"
android:textColor="#color/black"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="followers"
android:textColor="#color/black"
android:textSize="12sp" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="485"
android:textColor="#color/black"
android:textSize="20sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Student"
android:textColor="#color/black"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_width="218dp"
android:layout_gravity="center"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<ImageButton
android:id="#+id/btnFollow"
android:layout_width="wrap_content"
android:layout_height="30dp"
android:layout_marginTop="8dp"
android:scaleType="center"
android:background="#drawable/image_btn_follow_src"
/>
<ImageButton
android:id="#+id/btn_report"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="fitCenter"
android:layout_gravity="center"
android:layout_marginLeft="20dp"
android:background="#drawable/report_btn"
/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<TextView
android:layout_marginTop="5dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="I stuck in problem I have one project which uses JNI libs but when I use in another project it throws error unable to find jni"
android:textColor="#color/black"
android:textSize="15dp" />
</LinearLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/rvUserProfile"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<include
android:id="#+id/new_conn"
layout="#layout/custom_profile_view"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.CollapsingToolbarLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="48dp">
<it.neokree.materialtabs.MaterialTabHost
android:id="#+id/tabHost"
android:layout_width="match_parent"
android:layout_height="48dp"
app:tabGravity="fill"
app:tabIndicatorColor="#color/black"
app:primaryColor="#color/white"
app:textColor="#color/black"
app:accentColor="#color/gray"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed" />
<!--<it.neokree.materialtabs.MaterialTabHost-->
<!--android:id="#+id/tabHost"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="48dp"-->
<!--android:layout_gravity="bottom"-->
<!--android:layout_marginTop="15dp"-->
<!--app:layout_scrollFlags="enterAlways"-->
<!--app:tabBackground="#color/white"-->
<!--app:tabGravity="center"-->
<!--app:tabMode="scrollable"-->
<!--app:tabSelectedTextColor="#color/white"-->
<!--app:tabTextColor="#color/gray" />-->
</FrameLayout>
</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" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
you have to download ex : https://github.com/kanytu/android-parallax-recyclerview
https://github.com/Frank-Zhu/PullZoomView