android - Layout with sticky tabs and view pager -


i want create layout this. there more information on header of layout (i.e image, title, few text views, buttons). , there tab below header layout , view pager contains each tab data. when scroll tabs need stick on top. please me here. thank lot in advanced.

enter image description here

i have tried below code got problem when header layout content large content not visible , tabs goes below screen size , not appear again when scroll up.

<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="wrap_content"         app:layout_scrollflags="scroll|exituntilcollapsed"         android:fitssystemwindows="true"         app:contentscrim="?attr/colorprimary"         app:collapsedtitletextappearance="@style/actionbar.titletext">          <scrollview             android:layout_width="match_parent"             android:fillviewport="true"             app:layout_collapsemode="parallax"             android:layout_height="wrap_content"             android:id="@+id/scrollview">             <relativelayout                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:id="@+id/scrollable_view">                 <relativelayout                     android:id="@+id/carousellayout"                     android:layout_width="match_parent"                     android:layout_height="@dimen/group_profile_image_height">                     <android.support.v4.view.viewpager                         android:id="@+id/backdrop"                         android:layout_width="match_parent"                         android:layout_height="wrap_content" />                     <view                         android:layout_width="match_parent"                         android:layout_height="match_parent"                         android:background="@drawable/album_view_background"/>                     <textview                         android:layout_width="match_parent"                         android:layout_height="wrap_content"                         android:layout_marginleft="@dimen/profile_image_margin"                         android:layout_marginstart="@dimen/profile_image_margin"                         android:textsize="@dimen/comment_post_button_size"                         android:textcolor="@color/white"                         android:layout_marginbottom="@dimen/profile_image_margin"                         android:shadowcolor="@color/text_shadow"                         android:shadowdx="1"                         android:shadowdy="1"                         android:shadowradius="2"                         android:id="@+id/content_title"                         android:layout_alignparentbottom="true"/>                     <imageview                         android:id="@+id/left_arrow"                         android:visibility="invisible"                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:layout_centerinparent="true"                         android:tint="@color/white"                         android:contentdescription="@string/descr_image"                         android:layout_centervertical="true"                         android:layout_alignparentstart="true"                         android:layout_alignparentleft="true"                         android:padding="@dimen/left_right_arrow_margin"                         android:paddingstart="@dimen/left_right_arrow_margin"                         android:paddingend="@dimen/left_right_arrow_margin"                         android:src="@drawable/ic_chevron_left"/>                     <imageview                         android:id="@+id/right_arrow"                         android:visibility="invisible"                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:layout_centerinparent="true"                         android:contentdescription="@string/descr_image"                         android:tint="@color/white"                         android:layout_alignparentright="true"                         android:layout_alignparentend="true"                         android:layout_centervertical="true"                         android:padding="@dimen/left_right_arrow_margin"                         android:paddingstart="@dimen/left_right_arrow_margin"                         android:paddingend="@dimen/left_right_arrow_margin"                         android:src="@drawable/ic_chevron_right"/>                     <textview                         android:id="@+id/image_count"                         android:layout_width="wrap_content"                         android:layout_height="wrap_content"                         android:textcolor="@color/white"                         android:layout_below="@+id/right_arrow"                         android:layout_alignparentright="true"                         android:layout_alignparentend="true"                         android:layout_centervertical="true"                         android:paddingright="@dimen/left_right_arrow_margin"                         android:paddingleft="@dimen/left_right_arrow_margin"                         android:paddingstart="@dimen/left_right_arrow_margin"                         android:paddingend="@dimen/left_right_arrow_margin" />                 </relativelayout>                 <linearlayout                     android:layout_width="match_parent"                     android:layout_height="wrap_content"                     android:background="@color/white"                     android:layout_below="@+id/carousellayout"                     android:orientation="vertical">                     <linearlayout                         android:layout_width="match_parent"                         android:layout_height="wrap_content"                         android:id="@+id/owner_detail_layout"                         android:layout_gravity="center"                         android:layout_marginbottom="@dimen/profile_page_left_right_margin"                         android:paddingbottom="@dimen/view_default_padding"                         android:paddingtop="@dimen/view_default_padding"                         android:background="@color/grey_light"                         android:orientation="horizontal">                         <classes.common.ui.bezelimageview                             android:id="@+id/owner_image"                             android:scaletype="centercrop"                             android:layout_width="@dimen/profile_image_height"                             android:layout_height="@dimen/profile_image_width"                             android:layout_gravity="center_vertical"                             android:layout_marginstart="@dimen/profile_image_margin"                             android:layout_marginleft="@dimen/profile_image_margin"                             android:foregroundgravity="right"                             app:maskdrawable="@drawable/circle_mask"                             app:borderdrawable="@drawable/circle_border" />                         <textview                             android:layout_width="wrap_content"                             android:layout_height="wrap_content"                             android:layout_marginstart="@dimen/profile_image_margin"                             android:layout_marginleft="@dimen/profile_image_margin"                             android:textsize="@dimen/text_size_medium_plus"                             android:textcolor="@color/grey_dark"                             android:layout_gravity="center_vertical"                             android:gravity="center_vertical"                             android:id="@+id/owner_name"/>                     </linearlayout>                     <classes.common.ui.selectabletextview                         android:layout_width="match_parent"                         android:layout_height="wrap_content"                         android:maxlines="3"                         android:ellipsize="end"                         android:layout_marginright="@dimen/profile_image_margin"                         android:layout_marginend="@dimen/profile_image_margin"                         android:layout_marginleft="@dimen/profile_image_margin"                         android:layout_marginstart="@dimen/profile_image_margin"                         android:layout_marginbottom="@dimen/profile_page_left_right_margin"                         android:textsize="@dimen/text_size_medium_plus"                         android:textcolor="@color/body_text_1"                         android:id="@+id/listing_description"/>                     <linearlayout                         android:orientation="horizontal"                         android:weightsum="1"                         android:id="@+id/likecommentcontent"                         android:layout_marginbottom="@dimen/profile_page_left_right_margin"                         android:visibility="visible"                         android:background="@color/grey_light"                         android:layout_width="match_parent"                         android:layout_height="wrap_content">                         <linearlayout                             android:layout_width="0dp"                             android:layout_weight=".5"                             android:id="@+id/likeblock"                             android:layout_gravity="center"                             android:gravity="center"                             android:layout_height="wrap_content">                             <textview                                 android:layout_width="wrap_content"                                 android:layout_height="wrap_content"                                 android:textsize="@dimen/text_size_medium_plus"                                 android:textcolor="@color/grey_dark"                                 android:layout_margintop="@dimen/margin_short"                                 android:layout_marginbottom="@dimen/margin_short"                                 android:id="@+id/likeicon" />                             <textview                                 android:layout_width="wrap_content"                                 android:layout_height="wrap_content"                                 android:textsize="@dimen/text_size_medium_plus"                                 android:textcolor="@color/grey_dark"                                 android:layout_margintop="@dimen/margin_short"                                 android:layout_marginbottom="@dimen/margin_short"                                 android:layout_marginleft="@dimen/profile_page_left_right_margin"                                 android:layout_marginstart="@dimen/profile_page_left_right_margin"                                 android:id="@+id/likecountview" />                         </linearlayout>                         <view android:layout_height="match_parent"                             android:layout_width="1dp"                             android:background="@color/light_gray" />                         <linearlayout                             android:layout_width="0dp"                             android:layout_weight=".5"                             android:id="@+id/commentblock"                             android:layout_gravity="center"                             android:gravity="center"                             android:layout_height="wrap_content">                             <textview                                 android:layout_width="wrap_content"                                 android:layout_height="wrap_content"                                 android:textsize="@dimen/text_size_medium_plus"                                 android:textcolor="@color/grey_dark"                                 android:layout_margintop="@dimen/margin_short"                                 android:layout_marginbottom="@dimen/margin_short"                                 android:id="@+id/commenticon" />                             <textview                                 android:layout_width="wrap_content"                                 android:layout_height="wrap_content"                                 android:id="@+id/commentcountview"                                 android:textsize="@dimen/text_size_medium_plus"                                 android:layout_marginleft="@dimen/profile_page_left_right_margin"                                 android:layout_marginstart="@dimen/profile_page_left_right_margin"                                 android:layout_margintop="@dimen/margin_short"                                 android:layout_marginbottom="@dimen/margin_short"                                 android:textcolor="@color/grey_dark"/>                         </linearlayout>                     </linearlayout>                     <linearlayout                         android:orientation="horizontal"                         android:weightsum="1"                         android:layout_marginbottom="@dimen/margin_short"                         android:id="@+id/review_wishlist_layout"                         android:visibility="visible"                         android:layout_gravity="center"                         android:layout_width="match_parent"                         android:layout_height="wrap_content">                         <linearlayout                             android:layout_width="0dp"                             android:layout_weight=".5"                             android:id="@+id/review_block"                             android:background="@color/grey_light"                             android:layout_marginright="@dimen/profile_image_margin"                             android:layout_marginend="@dimen/profile_image_margin"                             android:layout_marginstart="@dimen/profile_image_margin"                             android:layout_marginleft="@dimen/profile_image_margin"                             android:layout_gravity="center"                             android:gravity="center"                             android:layout_height="wrap_content">                             <textview                                 android:layout_width="wrap_content"                                 android:layout_height="wrap_content"                                 android:textsize="@dimen/text_size_medium_plus"                                 android:textcolor="@color/grey_dark"                                 android:layout_margintop="@dimen/margin_short"                                 android:layout_marginbottom="@dimen/margin_short"                                 android:id="@+id/review_icon" />                             <textview                                 android:layout_width="wrap_content"                                 android:layout_height="wrap_content"                                 android:textsize="@dimen/text_size_medium_plus"                                 android:textcolor="@color/grey_dark"                                 android:text="@string/write_review_text"                                 android:layout_margintop="@dimen/margin_short"                                 android:layout_marginbottom="@dimen/margin_short"                                 android:layout_marginleft="@dimen/profile_page_left_right_margin"                                 android:layout_marginstart="@dimen/profile_page_left_right_margin"                                 android:id="@+id/review_text" />                         </linearlayout>                         <linearlayout                             android:layout_width="0dp"                             android:layout_weight=".5"                             android:id="@+id/wishlist_block"                             android:background="@color/grey_light"                             android:layout_marginright="@dimen/profile_image_margin"                             android:layout_marginend="@dimen/profile_image_margin"                             android:layout_marginstart="@dimen/profile_image_margin"                             android:layout_marginleft="@dimen/profile_image_margin"                             android:layout_gravity="center"                             android:gravity="center"                             android:layout_height="wrap_content">                             <textview                                 android:layout_width="wrap_content"                                 android:layout_height="wrap_content"                                 android:textsize="@dimen/text_size_medium_plus"                                 android:textcolor="@color/grey_dark"                                 android:layout_margintop="@dimen/margin_short"                                 android:layout_marginbottom="@dimen/margin_short"                                 android:id="@+id/wishlist_icon" />                             <textview                                 android:layout_width="wrap_content"                                 android:layout_height="wrap_content"                                 android:id="@+id/wishlist_text"                                 android:text="@string/add_wishlist_text"                                 android:textsize="@dimen/text_size_medium_plus"                                 android:layout_marginleft="@dimen/profile_page_left_right_margin"                                 android:layout_marginstart="@dimen/profile_page_left_right_margin"                                 android:layout_margintop="@dimen/margin_short"                                 android:layout_marginbottom="@dimen/margin_short"                                 android:textcolor="@color/grey_dark"/>                         </linearlayout>                     </linearlayout>                 </linearlayout>             </relativelayout>         </scrollview>          <android.support.v7.widget.toolbar             android:id="@+id/toolbar"             android:layout_width="match_parent"             android:layout_height="?attr/actionbarsize"             app:theme="@style/actionbarthemeoverlay"             app:popuptheme="@style/actionbarpopupthemeoverlay"             app:layout_collapsemode="pin"             android:background="@drawable/gradient_bg" />      </android.support.design.widget.collapsingtoolbarlayout>  </android.support.design.widget.appbarlayout>  <progressbar     style="?android:attr/progressbarstyle"     android:layout_width="wrap_content"     android:layout_height="wrap_content"     android:layout_centerinparent="true"     android:id="@+id/progressbar"     android:layout_gravity="center"/>  <android.support.v4.widget.nestedscrollview     android:id="@+id/nestedscrollview"     android:fillviewport="true"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:visibility="visible"     app:layout_behavior="@string/appbar_scrolling_view_behavior">     <relativelayout         android:layout_width="match_parent"         android:layout_height="wrap_content">         <android.support.design.widget.appbarlayout             android:id="@+id/appbar2"             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:theme="@style/themeoverlay.appcompat.dark.actionbar"             android:fitssystemwindows="true">             <android.support.design.widget.collapsingtoolbarlayout                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:fillviewport="true"                 android:id="@+id/bottomview"                 android:layout_below="@id/collapsing_toolbar"                 app:layout_scrollflags="scroll|enteralways">                 <android.support.design.widget.tablayout                     android:id="@+id/slidingtabs"                     android:fitssystemwindows="true"                     android:layout_width="match_parent"                     app:tabtextappearance="@style/tabtitletextappearance"                     app:tabmode="scrollable"                     app:tabgravity="fill"                     android:background="@color/transparent"                     android:layout_height="wrap_content"/>             </android.support.design.widget.collapsingtoolbarlayout>         </android.support.design.widget.appbarlayout>         <android.support.v4.view.viewpager             android:id="@+id/pager"             android:layout_below="@+id/appbar2"             android:layout_width="match_parent"             app:layout_behavior="@string/appbar_scrolling_view_behavior"             android:layout_height="wrap_content">         </android.support.v4.view.viewpager>     </relativelayout> </android.support.v4.widget.nestedscrollview> 


Comments