Below is my code snipet.
<?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/coordinate" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/background_light" tools:context="com.ajinkyabadve.mywatchlist.movie_detail_new.MovieActivity"> <ProgressBar android:id="@+id/progressBar" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:visibility="gone" /> <include android:id="@+id/retryLayoutNoInternet" layout="@layout/no_internet_retry_layout" android:visibility="gone" /> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="400dp" 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:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|enterAlwaysCollapsed"> <ImageView android:id="@+id/poster" android:layout_width="match_parent" android:layout_height="match_parent" android:contentDescription="@string/poster_of_movie" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <include android:id="@+id/content" layout="@layout/content_movie" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="112dp" android:background="@color/colorPrimary" android:elevation="4dp" app:layout_anchor="@id/appbar" app:layout_anchorGravity="bottom" app:layout_collapseMode="pin" app:theme="@style/ThemeOverlay.AppCompat.Light"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginBottom="8dp" android:minHeight="?android:attr/actionBarSize" android:orientation="vertical"> <TextView android:id="@+id/movieTitle" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Title" android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse" /> <TextView android:id="@+id/movieOrignalTitle" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="4dp" android:text="subtitle" android:textAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle.Inverse" /> </LinearLayout> </android.support.v7.widget.Toolbar> And below is content_movie.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.NestedScrollView 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/content_movie" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.ajinkyabadve.mywatchlist.movie_detail_new.MovieActivity" tools:showIn="@layout/activity_movie"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include layout="@layout/overview" /> <include layout="@layout/cast" /> <include layout="@layout/facts" /> <!-- Below tablayout I want to work as a sticky header --> <!--<android.support.design.widget.TabLayout--> <!--android:layout_width="match_parent"--> <!--android:layout_height="100dp"--> <!--android:background="@color/colorPrimary" />--> </LinearLayout> </android.support.v4.widget.NestedScrollView> The commented tablayout should work as a sticky header(meaning it should not scroll when it reaches to top while scrolling).How to achive this effect using the coordinate layout?OR In any other way.Can we use custom behavior or something?
2 Answers
Answers 1
All you have to do is move the TabLayout to the AppBarLayout.
Since the TabLayout doesn't have scroll flags defined, it will stick to the top of the layout when you scroll.
When you do this, the app bar height needs to be changed to wrap_content and the 400dp height needs to go to the CollapsingToolbarLayout.
I just took the AppBarLayout snippet from your entire XML to demonstrate:
<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.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsingToolbarLayout" android:layout_width="match_parent" android:layout_height="400dp" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|enterAlwaysCollapsed"> <ImageView android:id="@+id/poster" android:layout_width="match_parent" android:layout_height="match_parent" android:contentDescription="@string/poster_of_movie" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> </android.support.design.widget.CollapsingToolbarLayout> <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="100dp" android:background="@color/colorPrimary" /> </android.support.design.widget.AppBarLayout> Answers 2
You can use the following library to achieve this effect.
https://github.com/emilsjolander/StickyScrollViewItems
This is basically a custom scroll view and within this scroll view you can make any child view or layout as sticky by adding the tag:
android:tag="sticky"
Hope it helps!
0 comments:
Post a Comment