How to show ViewPager in NestedScrollView in android? - android

Please help me, my ViewPager is not visible in NestedScrollView. What should i do? I have spent much time to try to make vp visible but it's not success. If i set fixed height of viewpager then it will be visible, but i don't want that. Here 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".activities.StoryDetailActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<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">
<ImageView
android:id="#+id/img_banner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:contentDescription="#string/app_name"
android:src="#drawable/test"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</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="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="#dimen/dimen_6x"
android:orientation="horizontal"
android:paddingLeft="#dimen/dimen_1x"
android:paddingRight="#dimen/dimen_1x">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/dimen_1x"
android:layout_marginRight="#dimen/dimen_1x"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
android:paddingLeft="#dimen/dimen_1x"
android:paddingRight="#dimen/dimen_1x">
<com.nm.story.widgets.textview.TextViewLight
android:id="#+id/lbl_views"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/textColorSecondary"
android:textSize="#dimen/text_size_xnormal" />
<ImageView
android:layout_width="#dimen/tiny_icon"
android:layout_height="#dimen/tiny_icon"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_visibility_grey" />
</LinearLayout>
<View
android:layout_width="#dimen/divider"
android:layout_height="match_parent"
android:layout_marginBottom="#dimen/dimen_1x"
android:layout_marginTop="#dimen/dimen_1x"
android:background="#color/dividerColor" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/dimen_1x"
android:layout_marginRight="#dimen/dimen_1x"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
android:paddingLeft="#dimen/dimen_1x"
android:paddingRight="#dimen/dimen_1x">
<com.nm.story.widgets.textview.TextViewLight
android:id="#+id/lbl_likes"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/textColorSecondary"
android:textSize="#dimen/text_size_xnormal" />
<ImageView
android:layout_width="#dimen/tiny_icon"
android:layout_height="#dimen/tiny_icon"
android:contentDescription="#string/app_name"
android:src="#drawable/ic_like_grey" />
</LinearLayout>
<View
android:layout_width="#dimen/divider"
android:layout_height="match_parent"
android:layout_marginBottom="#dimen/dimen_1x"
android:layout_marginTop="#dimen/dimen_1x"
android:background="#color/dividerColor" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginLeft="#dimen/dimen_1x"
android:layout_marginRight="#dimen/dimen_1x"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical"
android:paddingLeft="#dimen/dimen_1x"
android:paddingRight="#dimen/dimen_1x">
<com.nm.story.widgets.textview.TextViewLight
android:id="#+id/lbl_chapter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textColor="#color/textColorSecondary"
android:textSize="#dimen/text_size_xnormal" />
</LinearLayout>
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="#dimen/divider"
android:layout_marginLeft="#dimen/dimen_2x"
android:layout_marginRight="#dimen/dimen_2x"
android:background="#color/dividerColor" />
<com.nm.story.widgets.textview.TextViewItalic
android:id="#+id/lbl_review"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/dimen_2x"
android:maxLines="6"
android:textColor="#color/textColorPrimary"
android:textSize="#dimen/text_size_xnormal" />
<android.support.v4.view.ViewPager
android:id="#+id/pager_chapter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/dimen_2x"
android:layout_marginRight="#dimen/dimen_2x" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs_chapter"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/dimen_2x"
android:layout_marginRight="#dimen/dimen_2x"
app:tabMode="scrollable" />
</LinearLayout>
</android.support.v4.widget.NestedScrollView></android.support.design.widget.CoordinatorLayout>

Related

Smooth Scrolling on Collapsing toolbar with tablayout

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>

how to achieve this layout using collapsing toolbar

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.

android: Expandable listview going inside tablayout

i have a coordinator layout with collapsable toolbar and below it i have a tablayout and a viewpager and the viewpager contains an expandable listview. When the toolbar collapses the viewpager goes inside the tablayout even if i have specified margins. I have attached links to images below.
Any help is appreciated. Pls help.
http://imgur.com/aK1gyAj.jpg
http://imgur.com/aoa6aUL.jpg
<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/coordinatorlayout_asset"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
tools:ignore="RtlHardcoded">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar_asset"
android:layout_width="match_parent"
android:layout_height="330dp"
android:layout_marginBottom="56dp"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
android:theme="#style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingtoolbar_asset"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:contentScrim="#color/white"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="top"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout_charts_asset"
android:layout_width="match_parent"
android:layout_height="0dp" />
<android.support.v4.view.ViewPager
android:id="#+id/pager_charts_asset"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_alignBottom="#+id/imageView_dots_asset"
android:paddingTop="0dp" />
<ImageView
android:id="#+id/imageView_dots_asset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="96dp"
android:src="#drawable/united1"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<FrameLayout
android:id="#+id/frame_layout_asset"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_gravity="bottom|center_horizontal"
android:background="#color/colorPrimary"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier=".11">
<LinearLayout
android:id="#+id/linear_layout_asset"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:gravity="center"
android:text="Quila"
android:textColor="#android:color/white"
android:textSize="20sp" />
</LinearLayout>
</FrameLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nestedscrollview_asset"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:layout_marginTop="56dp"
app:layout_anchor="#id/appbar_asset"
app:layout_anchorGravity="bottom"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/pager_asset"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar_asset"
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#color/tab_color"
app:layout_anchor="#id/frame_layout_asset"
app:theme="#style/ThemeOverlay.AppCompat.Dark"
app:title="">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<Space
android:layout_width="#dimen/image_final_width"
android:layout_height="#dimen/image_final_width" />
<TextView
android:id="#+id/tv_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_marginLeft="8dp"
android:gravity="center_vertical"
android:text="Bank Name"
android:textColor="#android:color/white"
android:textSize="20sp" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout_asset"
android:layout_width="match_parent"
android:layout_height="32dp"
android:background="#color/tab_color"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_anchor="#id/toolbar_asset"
app:layout_anchorGravity="bottom"
app:tabIndicatorColor="#color/white" />
<de.hdodenhof.circleimageview.CircleImageView
android:layout_width="#dimen/image_width"
android:layout_height="#dimen/image_width"
android:layout_gravity="center_horizontal"
android:src="#drawable/newUser"
app:finalHeight="#dimen/image_final_width"
app:finalYPosition="2dp"
app:layout_behavior="com.aswin.AvatarImageBehavior"
app:startHeight="2dp"
app:startToolbarPosition="2dp"
app:startXPosition="2dp" />
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingLeft="10dp"
android:paddingRight="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ExpandableListView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/expandable_listview"
android:divider="#color/black"
android:layout_gravity="top">
</ExpandableListView>
</LinearLayout>

how can I add the viewpager and tablayout under the collapsing toolbar layout

I tried all solution for this problem in stackoverflow but I got nothing helpful .
First of all , I want to achieve layout like this or similar to it :
And according to some question in stackoverflow like this
I'm able to achieve this layout :
with this xml file :
<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/MyAppbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/bgheader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/aks"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/MyToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
app:layout_collapseMode="pin" />
<com.majid.whiteboard.utils.CustomTabLayout
android:id="#+id/tab_layout_detail_activity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:paddingEnd="20dp"
app:paddingStart="20dp"
app:tabGravity="fill"
app:tabIndicatorColor="#color/silver"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/grid_text_color"
app:tabTextColor="#color/grid_text_color" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager_detail_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Every thing is ok but now I have two problems :
1.Tablayout goes to the top of screen but I want to add this under the collapsing toolbar
2.I can only collapse the toolbar only in the collapse area ( means only in pic and top of that) and it's not working in other place on the screen .

I modified your code... 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="false">
<android.support.design.widget.AppBarLayout
android:id="#+id/MyAppbar"
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/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
android:minHeight="#dimen/hundred_dp"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/bgheader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/aks"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/MyToolbar"
android:layout_width="match_parent"
android:layout_height="90dp"
android:layout_below="#+id/dashboard_txt_des"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="#dimen/fifteen_dp"
app:titleTextAppearance="#style/Toolbar.TitleText" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_below="#+id/toolbar"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:tabIndicatorColor="#color/orange" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager_detail_activity"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

Here is how I have in my app for sticky toolbar forever with viewpager and TabLayout.
<LinearLayout 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:background="#color/background2"
android:orientation="vertical">
<include
android:id="#id/toolbar"
layout="#layout/toolbar" />
<android.support.design.widget.CoordinatorLayout 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:background="#color/background2"
android:fitsSystemWindows="true">
<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/actionModeSplitBackground"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/plain_rectangle"
android:orientation="vertical">
<RelativeLayout
android:id="#+id/profile_header"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/half_padding">
<com.COMPANY.APP.app.custom.RoundedNetworkImageView
android:id="#+id/user_dp"
android:layout_width="#dimen/follow_logo"
android:layout_height="#dimen/follow_logo"
android:layout_centerHorizontal="true"
app:default_image_resource="#drawable/new_user_display" />
<ImageView
android:id="#+id/btn_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:padding="#dimen/more_padding"
android:src="#drawable/black_edit_icon" />
</RelativeLayout>
<com.COMPANY.APP.app.custom.FontTextView
android:id="#+id/lbl_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:paddingBottom="#dimen/standard_padding"
android:paddingTop="#dimen/standard_padding"
android:text="-"
android:textColor="#color/toolbar"
android:textSize="#dimen/user_name_font"
app:customFont="#string/font_regular" />
<com.COMPANY.APP.app.custom.FontTextView
android:id="#+id/lbl_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="#dimen/more_padding"
android:layout_marginRight="#dimen/more_padding"
android:paddingBottom="#dimen/standard_padding"
android:paddingTop="#dimen/standard_padding"
android:text="-"
android:textSize="#dimen/user_description_font"
app:customFont="#string/font_regular" />
<com.COMPANY.APP.app.custom.CustomCheckbox
android:id="#+id/chk_following"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="#dimen/followin_button_padding"
android:layout_marginTop="#dimen/standard_padding"
android:background="#drawable/rectangle_green_selector"
android:button="#null"
android:checked="false"
android:drawableLeft="#drawable/follow_green_inner_selector"
android:drawablePadding="10dp"
android:gravity="center"
android:paddingLeft="#dimen/follow_button_padding"
android:paddingRight="#dimen/follow_button_padding"
android:text="Follow"
android:textColor="#drawable/green_color_selector"
android:textSize="#dimen/following_button_font"
app:customFont="#string/font_regular" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginBottom="2dp"
android:orientation="horizontal"
android:paddingTop="2dp"
android:weightSum="3">
<RelativeLayout
android:id="#+id/wishlist_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="1dp"
android:layout_weight="1"
android:background="#color/background">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="vertical">
<com.COMPANY.APP.app.custom.FontTextView
android:id="#+id/lbl_wishlist_count"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="-"
android:textColor="#color/toolbar"
android:textSize="#dimen/font_14" />
<com.COMPANY.APP.app.custom.FontTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Wishlist"
android:textColor="#color/toolbar"
android:textSize="#dimen/font_10" />
</LinearLayout>
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:layout_alignParentBottom="true"
android:background="#color/button" />
</RelativeLayout>
<LinearLayout
android:id="#+id/following_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="1dp"
android:layout_weight="1"
android:background="#color/background"
android:gravity="center_vertical"
android:orientation="vertical">
<com.COMPANY.APP.app.custom.FontTextView
android:id="#+id/lbl_following_count"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="-"
android:textColor="#color/toolbar"
android:textSize="#dimen/font_14" />
<com.COMPANY.APP.app.custom.FontTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Following"
android:textColor="#color/toolbar"
android:textSize="#dimen/font_10" />
</LinearLayout>
<LinearLayout
android:id="#+id/follower_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_marginRight="1dp"
android:layout_weight="1"
android:background="#color/background"
android:gravity="center_vertical"
android:orientation="vertical">
<com.COMPANY.APP.app.custom.FontTextView
android:id="#+id/lbl_follower_count"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="1dp"
android:layout_marginRight="1dp"
android:gravity="center_horizontal"
android:text="-"
android:textColor="#color/toolbar"
android:textSize="#dimen/font_14" />
<com.COMPANY.APP.app.custom.FontTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:text="Followers"
android:textColor="#color/toolbar"
android:textSize="#dimen/font_10" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar2"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:title="Collapsing Toolbar"
app:layout_collapseMode="pin">
<com.COMPANY.APP.app.custom.RoundedNetworkImageView
android:id="#+id/img_profile_top"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical|left"
android:layout_marginRight="20dp"
android:alpha="0"
app:default_image_resource="#drawable/new_user_display" />
<com.COMPANY.APP.app.custom.ImageCheckbox
android:id="#+id/user_follow_top"
android:layout_width="45dp"
android:layout_height="30dp"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_gravity="center_vertical|right"
android:layout_marginRight="20dp"
android:alpha="0"
android:src="#drawable/follow_icon_checkbox_drawable" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/standard_height"
android:layout_alignParentTop="true"
android:background="#drawable/plain_rectangle"
android:elevation="2dp"
app:tabBackground="#color/background"
app:tabIndicatorColor="#color/button"
app:tabIndicatorHeight="3dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/toolbar"
app:tabTextAppearance="#style/APPTabText"
app:tabTextColor="#color/disable_text" />
<com.COMPANY.APP.app.custom.CustomViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/tab_layout" />
</RelativeLayout>
</android.support.design.widget.CoordinatorLayout>
</LinearLayout>
And within Activity I've used-
CollapsingToolbarLayout collapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
ImageCheckbox user_follow_top = (ImageCheckbox)findViewById(R.id.user_follow_top);
RoundedNetworkImageView imgProfile = (RoundedNetworkImageView) findViewById(R.id.user_dp);
RoundedNetworkImageView getImgProfileTop = (RoundedNetworkImageView)findViewById(R.id.img_profile_top);
AppBarLayout.OnOffsetChangedListener mListener = new AppBarLayout.OnOffsetChangedListener() {
#Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
if(collapsingToolbarLayout.getHeight() + verticalOffset < 1.5 * ViewCompat.getMinimumHeight(collapsingToolbarLayout)) {
getImgProfileTop.animate().alpha(1).setDuration(400);
user_follow_top.animate().alpha(1).setDuration(400);
collapsingToolbarLayout.setTitle(username);
} else {
getImgProfileTop.animate().alpha(0).setDuration(400);
user_follow_top.animate().alpha(0).setDuration(400);
collapsingToolbarLayout.setTitle("");
}
}
};
AppBarLayout appBarLayout = (AppBarLayout)findViewById(R.id.app_bar_layout);
appBarLayout.addOnOffsetChangedListener(mListener);
This is the output -
Without Scrolling
After scrolling

CollapsingToolbarLayout with tablayout & image as collapsing with sticky toolbar

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

Categories

Resources