I try to keep the red layout scrolling so that he hides and the TabLayout stays at the top
I need the red layout to fill the height of the round avatar for me. I try to scroll the TabLayout to the top, and the red layout continues to scroll to hide it.？
I can't send pictures, please click on the link to view the demo.
https://shejiao-v2.oss-cn-shenzhen.aliyuncs.com/ezgif.com-optimize.gif
This is my code
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/coordinator_lay"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="190dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp"
app:layout_behavior="#string/appbar_spring_behavior">
<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="?colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:scrimVisibleHeightTrigger="95dp"
app:titleEnabled="false">
<ImageView
android:id="#+id/cover"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:contentDescription="#null"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#mipmap/default_cover_bg"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/actionbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:layout_alignParentTop="true"
android:textSize="11sp"
app:contentInsetStart="?actionBarInsetStart"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
tools:ignore="SmallSp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal">
<de.hdodenhof.circleimageview.CircleImageView
android:id="#+id/toolbar_avatar"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="#mipmap/default_avatar"
android:visibility="gone"
app:civ_border_color="#D6D6D6"
app:civ_border_width="1dp"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|center_horizontal"
app:layout_behavior="android.support.design.widget.CircleImageViewBehavior" />
<TextView
android:id="#+id/toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:textColor="#android:color/white"
android:textSize="18sp"
android:visibility="gone" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<com.thsseek.shejiao.ui.widget.CircleImageViewFAB
android:id="#+id/avatar"
android:layout_width="80dp"
android:layout_height="80dp"
android:scaleType="centerCrop"
android:src="#mipmap/default_avatar"
app:civ_border_color="#D6D6D6"
app:civ_border_width="2dp"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|center_horizontal" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?colorPrimary"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<View
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/colorAccent" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.kekstudio.dachshundtablayout.DachshundTabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:ddIndicatorColor="#android:color/black"
app:tabGravity="center"
app:tabMode="fixed"
app:tabPaddingStart="0dp" />
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
How can I change this to achieve this effect?
Instead LinearLayout for offset just use View.
Move CircleImageViewFAB(avatar) and View(offset) in CollapsingToolbarLayout after imageView(background) but before Toolbar
Sheme:
<?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.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
...>
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
...>
<!--background image-->
<ImageView
android:id="#+id/cover"
... />
<!--big avatar image-->
<com.thsseek.shejiao.ui.widget.CircleImageViewFAB
android:id="#+id/avatar"
... />
<!-- offset with background for big avatar -->
<View
android:id="#+id/offset"
... />
<android.support.v7.widget.Toolbar
android:id="#+id/actionbar"
... />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?colorPrimary"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<com.kekstudio.dachshundtablayout.DachshundTabLayout
android:id="#+id/tabs"
... />
</LinearLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
... />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Related
Screenshot
As you can see, the layout is a bit too big for the older device. My idea is to shrink the CardView while the user is scrolling in the white area (ViewPager) to make it bigger. I have seen it working well in another app (can't remember which). I have no idea how I can do it, do I need write it programmatically?
XML:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".WordActivity">
<WebView
android:id="#+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="20dp"
android:visibility="gone" />
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="0dp"
app:cardBackgroundColor="#color/primary_dark"
app:cardCornerRadius="0dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<TextView
android:id="#+id/wordTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/poweredBy"
android:layout_centerInParent="true"
android:layout_marginTop="-12dp"
android:fontFamily="#font/poppins"
android:text="#string/word_title"
android:textColor="#android:color/white"
android:textSize="30sp" />
<TextView
android:id="#+id/wordTranslated"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#id/wordTitle"
android:layout_alignStart="#id/wordTitle"
android:layout_marginTop="-10dp"
android:fontFamily="#font/poppins"
android:textColor="#android:color/darker_gray"
android:textSize="16sp" />
<TextView
android:id="#+id/poweredBy"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:fontFamily="#font/bungee_hairline"
android:text="#string/powered"
android:textColor="#android:color/darker_gray"
android:textSize="16sp" />
</RelativeLayout>
</android.support.v7.widget.CardView>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#id/cardView">
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#color/primary"
android:elevation="5dp"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="2dp"
app:tabPaddingEnd="-1dp"
app:tabPaddingStart="-1dp"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#color/white_transparent" />
<android.support.v4.view.ViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="45dp" />
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
try again with this sample layout.
activity_main2.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
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"
android:theme="#style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="#drawable/bckg_toolbar"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#202020"
app:layout_anchorGravity="top|center"
app:tabGravity="fill"
app:tabIndicatorColor="#FBA601"
app:tabMode="fixed"
app:tabSelectedTextColor="#FBA601"
app:tabTextColor="#fff" />
</LinearLayout>
</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"/>
scene 1
scene 2
It may not be applicable to your current layout but if you can integrate Android's collapsing toolbars you may save youself a bit of time.
Otherwise you could use something like this to detect when the user is at the top of your list and show the view, hiding it otherwise
Try this sample layout, just change the code inside nested scrollview with your tablayout
<android.support.constraint.ConstraintLayout
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"
android:theme="#style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CoordinatorLayout
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:theme="#style/Theme.AppCompat.Light.NoActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:expandedTitleTextAppearance="#android:color/transparent"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="170dp"
android:background="#drawable/bckg"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.AppCompat.Light"/>
</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:clipToPadding="false"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="#string/textLoremIpsum"/>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Here is my sample screenshot
Scene 1
Scene 2
I have put AppBarLayout with app:layout_collapseMode="pin" overlay by content FrameLayout. But when I'm scrolling in fragment AppBarLayout doesn't collapse.
How to make AppBarLayout collapsable and overling of the FrameLayout?
Here is my current page, but toolbar is not collapse,but I need to overlay and collapse it:
Here is my current xml:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<FrameLayout
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:nestedScrollingEnabled="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/coordinator"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
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/appBarLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_alignParentTop="true"
android:background="#android:color/transparent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:elevation="0dp"
app:layout_collapseMode="pin">
<android.support.v7.widget.Toolbar
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"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
android:id="#+id/toolbar"
style="?android:attr/toolbarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:minHeight="?attr/actionBarSize"
app:elevation="0dp"
app:popupTheme="#style/ToolbarStyle"
tools:ignore="NewApi"/>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
Check this code. Hope it will help you
<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:background="#color/white"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#color/bg"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="350dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
app:layout_collapseMode="parallax">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/scale_30dp">
<com.tncstories.stories.utils.CircularImageView
android:id="#+id/ivProfile"
android:layout_width="#dimen/scale_90dp"
android:layout_height="#dimen/scale_90dp" />
</FrameLayout>
<com.tncstories.stories.widget.CustomTextView
android:id="#+id/tvUserName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/scale_15dp"
android:textColor="#color/black"
android:textSize="16sp"
app:typeface="gotham_medium" />
<com.tncstories.stories.widget.CustomTextView
android:id="#+id/tvHoots"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/scale_5dp"
android:textColor="#color/text_color"
android:textSize="12sp"
app:typeface="gotham_book" />
<com.vanniktech.emoji.EmojiTextView
android:id="#+id/tvSmiley"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/scale_10dp"
android:textIsSelectable="true"
app:emojiSize="25sp" />
<com.tncstories.stories.widget.CustomTextView
android:id="#+id/tvMyFriends"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/scale_15dp"
android:background="#drawable/red_rect_box"
android:gravity="center"
android:paddingBottom="#dimen/scale_10dp"
android:paddingEnd="#dimen/scale_15dp"
android:paddingStart="#dimen/scale_15dp"
android:paddingTop="#dimen/scale_10dp"
android:text="#string/my_friends"
android:textColor="#color/red"
android:textSize="13sp" />
</LinearLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/AppTheme">
<com.tncstories.stories.widget.CustomTextView
android:id="#+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#color/text_color"
android:textSize="18sp"
app:typeface="bariol_bold" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="2px"
android:background="#eae6e6" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/white"
app:tabGravity="fill"
app:tabIndicatorColor="#color/red"
app:tabIndicatorHeight="3dp"
app:tabMode="scrollable"
app:tabPaddingEnd="10dp"
app:tabPaddingStart="10dp"
app:tabSelectedTextColor="#color/black"
app:tabTextColor="#color/light_grey" />
<View
android:layout_width="match_parent"
android:layout_height="2px"
android:background="#eae6e6" />
</LinearLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/mPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="#dimen/scale_10dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<!--<android.support.v7.widget.RecyclerView-->
<!--android:id="#+id/recyclerReading"-->
<!--android:layout_width="match_parent"-->
<!--android:layout_height="#dimen/scale_210dp"-->
<!--android:clipToPadding="false"-->
<!--android:paddingLeft="#dimen/scale_10dp" />-->
</android.support.design.widget.CoordinatorLayout>
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?
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!
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>
You have to put your Toolbar inside CollapsingToolbarLayout
<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.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">
<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.Su btitle.Inverse" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include
android:id="#+id/content"
layout="#layout/content_movie" />
Am try to create a layout similar to the one in the image using a CordinatorLayout and CollapsingToolbarLayout, TabLayout and ViewPager.
My Layout doesn't render properly.
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"
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:background="?attr/colorPrimary"
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:src="#drawable/thumb_placeholder"
android:layout_width="match_parent"
android:layout_height="match_parent"
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"
android:background="?attr/colorPrimary"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/movie_tabs"
app:tabGravity="fill"
app:tabMode="fixed"
android:background="#color/colorPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabTextColor="#color/textColorPrimary"
app:tabSelectedTextColor="#color/textColorPrimary"
app:tabIndicatorColor="#color/textColorPrimary"
app:tabIndicatorHeight="4dp"
app:paddingStart="20dp"
app:paddingEnd="20dp">
</android.support.design.widget.TabLayout>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/movieviewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
Testing it on my device i get this
The ViewPager Fragment overlays the TabLayout if it has content and displays the TabLayout on top of the ImageView when there is no content.
What am i doing wrong, i am still somewhat of an Android noob.
CollapsingToolbarLayout needs a minHeight. This tells the parent AppBarLayout how much it can collapse. I assume you want the Toolbar and the TabLayout to stay at the top of the screen (because you are using the exitUntilCollapsed scroll flag). I would make both of those have android:layout_height="?attr/actionBarSize" and use double that value as the minHeight of the CollapsingToolbarLayout.
ViewPager needs app:layout_behavior="#string/appbar_scrolling_view_behavior".
Old answer but maybe someone found it useful
<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="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<VideoView
android:id="#+id/video_view"
android:layout_width="match_parent"
android:layout_height="200dp" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="48dp"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
app:tabMode="scrollable" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
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:layout_scrollFlags="scroll|exitUntilCollapsed">
<!-- Your extra details excluding tablayout. if u want any..-->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="200dp"
android:orientation="vertical"
tools:context="com.sweedesi.android.customerapp.Fragments.SweetMartListFragment">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/home_dummy_4"
android:scaleType="centerCrop" />
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/black_shadow"
android:scaleType="centerCrop" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.sweedesi.android.customerapp.Fragments.SweetMartListFragment">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_10"
android:layout_marginTop="#dimen/margin_10"
android:layout_marginRight="#dimen/margin_10"
android:orientation="vertical">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginTop="#dimen/margin_10"
android:layout_marginRight="#dimen/margin_10"
android:layout_toLeftOf="#+id/txt_reviews"
android:text="Bhagat Mishthan Bhandar"
android:textColor="#color/orangeColor"
android:textSize="#dimen/font_slarge"
android:textStyle="bold" />
<TextView
android:id="#+id/txt_reviews"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_marginTop="#dimen/margin_5"
android:text="580 reviews"
android:textColor="#color/colorWhite"
android:textSize="#dimen/fontsize_normal" />
</RelativeLayout>
<View
android:layout_width="100dp"
android:layout_height="1dp"
android:layout_marginTop="#dimen/margin_5"
android:layout_marginBottom="#dimen/margin_5"
android:background="#color/orangeColor" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/min_order"
android:textColor="#color/colorWhite"
android:textSize="#dimen/fontsize_normal" />
<TextView
android:id="#+id/txt_price"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="#dimen/margin_5"
android:text="1000"
android:textColor="#color/colorWhite"
android:textSize="#dimen/fontsize_normal" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/margin_5"
android:orientation="horizontal">
<ImageView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginTop="#dimen/margin_5"
android:background="#drawable/location_white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_marginLeft="#dimen/margin_5"
android:text="Bhati enclave, Main queens road, Opp Jharkhand mahadev mandir, Vaishali nagar, Jaipur - 302021"
android:textColor="#color/colorWhite"
android:textSize="#dimen/fontsize_normal" />
</LinearLayout>
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:background="#color/colorWhite"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/orangeColor"
app:tabTextAppearance="#style/MyCustomTabText"
app:tabTextColor="#color/colorText" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="#color/transperentColor"
app:layout_collapseMode="parallax"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</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:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
Best is to use
<RelativeLayout 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"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.example.ehryourway.ehryourway.PatientChart"
tools:showIn="#layout/app_bar_patient_chart">
<android.support.design.widget.TabLayout
android:id="#+id/tablayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:tabTextColor="#color/colorPrimary"
android:elevation="4dp"
android:minHeight="?attr/actionBarSize">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="#+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_below="#id/tablayout">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
</android.support.v4.view.ViewPager>
</RelativeLayout>
I'm making an application which uses CollapsingToolbarLayout with Toolbar and TabLayout.
I want to place the TabLayout to below Toolbar when the header is collapsed.
However, When I try to scroll the view, TabLayout overlays the Toolbar like this linked picture:
I want to make it like this linked picture when I scroll:
My code for the layout is below:
<?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: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="wrap_content"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<include
android:id="#+id/header"
layout="#layout/partial_mypage_header"
android:layout_width="match_parent"
android:layout_height="#dimen/mypage_header_height"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/orange"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/white">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/button_back"
android:layout_width="#dimen/icon_size_medium"
android:layout_height="#dimen/icon_size_large"
android:layout_gravity="center_vertical"
android:background="#android:color/transparent"
android:scaleType="centerCrop"
android:src="#drawable/btn_back"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/mypage_toolbar"
android:textColor="#android:color/white"
android:textSize="#dimen/text_size_medium"
android:textStyle="bold"/>
</LinearLayout>
</FrameLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#android:color/white"
android:fitsSystemWindows="true"
app:tabIndicatorColor="#color/orange"
app:tabIndicatorHeight="5dp"
app:tabSelectedTextColor="#color/orange"
app:tabTextAppearance="#style/tab_text_appearance"
app:tabTextColor="#android:color/black"/>
</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="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
How can I solve this problem?
Try:
<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<include
android:id="#+id/header"
layout="#layout/partial_mypage_header"
android:layout_width="match_parent"
app:layout_scrollFlags="scroll|enterAlways"
android:layout_height="#dimen/mypage_header_height" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/orange"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleTextColor="#android:color/white">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageButton
android:id="#+id/button_back"
android:layout_width="#dimen/icon_size_medium"
android:layout_height="#dimen/icon_size_large"
android:layout_gravity="center_vertical"
android:background="#android:color/transparent"
android:scaleType="centerCrop"
android:src="#drawable/btn_back" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="#string/mypage_toolbar"
android:textColor="#android:color/white"
android:textSize="#dimen/text_size_medium"
android:textStyle="bold" />
</LinearLayout>
</FrameLayout>
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
android:id="#+id/tab"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#android:color/white"
android:fitsSystemWindows="true"
app:tabIndicatorColor="#color/orange"
app:tabIndicatorHeight="5dp"
app:tabSelectedTextColor="#color/orange"
app:tabTextAppearance="#style/tab_text_appearance"
app:tabTextColor="#android:color/black" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
I solved this problem by using expedient. I made 2 toolbars including the original one. and I made one of those transparent. then, It looks working fine but I think it is not clear way.