I am trying to make a layout like this where I am adding collapsing toolbar functionality I searched lots of solution to achive this kind of animation where the below layout slides up and with that it takes the image[portrait] also with the animation.
What I have achieved till now
I am able to slide the below layout.
I am able to collapse the toolbar.
I am able to show my Tab views into the toolbar
What I want to achieve
When I slide the below layout my image gets stuck in half way and it doesn't go completely up and hide.
Solution which I am not looking for
This thread tell how to hide and show the imageview when we slide the child layout but my requirement is not hiding the Imageview I just want to slide the view on the top.
Below is my XML layout
<?xml version="1.0" encoding="utf-8"?>
[![enter image description here][2]][2]<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">
<ImageView
android:id="#+id/posterbackdrop"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="none" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#color/transparent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarlayout"
android:layout_width="match_parent"
android:layout_height="250dp"
android:background="#android:color/transparent"
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"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" />
<nseit.com.tmdb.Common.FontTypeFace
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="30dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="50dp"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold"
android:transitionName="moviename"
app:typeface="roboto_bold" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
style="#style/MyTabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:theme="#style/TabLayout_Theme"
app:layout_anchor="#+id/movieportrait"
app:layout_anchorGravity="bottom"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/white"
app:tabTextColor="#color/TextColor" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.CardView
android:id="#+id/movieportrait"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:adjustViewBounds="true"
app:cardElevation="15dp"
app:layout_anchor="#id/appbarlayout"
app:layout_anchorGravity="bottom|left|end">
<ImageView
android:id="#+id/imageView7"
android:layout_width="150dp"
android:layout_height="200dp"
android:adjustViewBounds="true"
android:background="#drawable/deadpoolpotrait"
android:fitsSystemWindows="true"
android:scaleType="fitCenter"
android:scaleY="1.2" />
</android.support.v7.widget.CardView>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
Attaching the screenshot
Related
I'm trying to add a floating action button in a CoordinatorLayout with a NestedScrollView which has 56dp of app:behavior_overlapTop.
my fab's layout_anchor is set on Appbar and it hides fine when CollapsingToolbarLayout collapsed, But because of overlapTop set on NestedScrollView, it is in a bad position.. see image below:
Here is my XML:
<com.google.android.material.appbar.AppBarLayout
android:paddingTop="#dimen/status_margin_top"
android:id="#+id/app_bar"
android:clipToPadding="false"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--app:contentScrim="#color/red"-->
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolBar"
android:layout_width="match_parent"
android:layout_marginTop="#dimen/behind_status_margin_top"
android:clipToPadding="false"
android:layout_height="match_parent"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:expandedTitleGravity="right|bottom"
app:expandedTitleMargin="16dp"
app:expandedTitleMarginBottom="112dp"
app:collapsedTitleGravity="center_vertical|right"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.constraintlayout.widget.ConstraintLayout
app:layout_collapseMode="parallax"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.AppCompatImageView
app:layout_constraintDimensionRatio="H,11:8"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:background="#drawable/appbar_gradient"
android:id="#+id/profile_pic"
app:srcCompat="#drawable/profile_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="fitStart"
android:adjustViewBounds="true" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.appcompat.widget.Toolbar
app:contentInsetRight="56dp"
android:id="#+id/toolbar"
app:titleMarginTop="#dimen/status_margin_top"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:minHeight="?actionBarSize"
app:layout_collapseMode="pin"/>
<ImageView
android:layout_marginTop="#dimen/status_margin_top"
app:layout_collapseMode="pin"
android:layout_gravity="right"
app:srcCompat="#drawable/back"
android:scaleType="center"
android:layout_width="56dp"
android:layout_height="56dp" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:id="#+id/nestedscrollview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clipToPadding="false"
android:elevation="16dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
app:behavior_overlapTop="56dp">
<LinearLayout
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:background="#color/light_white">
<!-- Content-->
</androidx.cardview.widget.CardView>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
<com.google.android.material.floatingactionbutton.FloatingActionButton
app:layout_anchor="#id/nestedscrollview"
app:srcCompat="#drawable/camera"
app:elevation="24dp"
app:fabSize="normal"
android:layout_marginStart="24dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
try to trigger Appbar Collapse event using this and hide() fab when it Collapsed!
I want to implement the function shown below.
Before scrolling, there is an EditText at the bottom, a logo ImageView in the center, and a right Menu at the top.
During scrolling, the ImageView and the EditText disappear and the Menu remains.
After scrolling, the EditText is reduced to the appropriate size and the Menu is on the right.
However, in my current code, scrollFlag to scroll in CollapsingToolbarLayout does not clicked, nor does it shrink to the proper size.
Here is my Code.
<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=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="260dp"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:fitsSystemWindows="true"
app:layout_collapseMode="pin">
<ImageView
android:id="#+id/logoImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:src="#drawable/app_logo_150x30"
android:layout_centerInParent="true"/>
<EditText
android:id="#+id/searchButton"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#FFFFFF"
android:hint="#string/menu_search"
android:textColorHint="#color/colorTextSecondary"
android:textColor="#color/colorText"
android:textSize="16sp"
android:inputType="text"
android:drawableEnd="#drawable/ic_search_24dp"
android:paddingEnd="12dp"
android:paddingStart="12dp"
android:layout_marginBottom="16dp"
android:layout_alignParentBottom="true"
android:focusable="false"
android:focusableInTouchMode="false"/>
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:contentInsetRight="0dp"
app:contentInsetEnd="0dp"
android:paddingLeft="16dp"
android:paddingStart="16dp"
android:paddingRight="16dp"
android:paddingEnd="16dp">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main"/>
How do I make it work as an attached image?
Old post. But still if people looking for answers, just add app:layout_collapseMode="parallax" in imageview.
<ImageView
android:id="#+id/logoImage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:scaleType="center"
android:src="#drawable/app_logo_150x30"
app:layout_collapseMode="parallax"
android:layout_centerInParent="true"/>
Import the required settings. Hope it helps.
I Have added Collapsing toolbar and I am using view pager which collapse the toolbar when I scroll up.
View pager have some fragments which contains recyclerview and some contains constraint layout with no recyclerview.
So the problem is fragment of viewpager which doesn't contain recyclerview having a problem of collapsing the toolbar whereas those fragments who contains recyclerview doesn't have any problem in collapsing the toolbar.
Now I am adding the code of my layout.
<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:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/posterbackdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="none" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/transparent"
android:scaleType="fitXY"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/posterbackdrop" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
style="#style/MyTabLayout"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:theme="#style/TabLayout_Theme"
app:layout_constraintRight_toRightOf="parent"
app:tabMode="fixed"
app:tabSelectedTextColor="#color/TextColor"
app:tabTextColor="#color/white" />
<abcd.com.tmdb.Common.FontTypeFace
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="0dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="50dp"
android:textColor="#color/white"
android:textSize="20sp"
android:textStyle="bold"
android:transitionName="moviename"
app:typeface="roboto_bold" />
</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"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
I have found the solution for this problem by adding NestedScrollView on the constraint layout of the view pager fragment make the toolbar collapse.
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="500dp"
</android.support.constraint.ConstraintLayout>
</android.support.v4.widget.NestedScrollView>
I have AppBarLayout with toolbar and 2 buttons. It hides when I scroll RecyclerView up and shows when I scroll down.
The problem is that RecyclerView is set to be below AppBarLayout and preserves its position when AppBarLayout hides and I have condition shown on the picture. I need my RecyclerView to scroll up to the statusbar as well, and return to original position on scroll down. So far I could not even find an example of that.
Thank you.
This is mt layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="ru.skyeng.listening.AudioFiles.AudioListActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
>
<ImageButton
android:id="#+id/action_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/gear"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_gravity="end"/>
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button_category"
android:layout_width="158dp"
android:layout_height="36dp"
android:layout_margin="16dp"
android:background="#drawable/selector_button_category"
android:text="#string/categories"
android:textColor="#color/colorBlue2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
<Button
android:id="#+id/button_length"
android:layout_width="158dp"
android:layout_height="36dp"
android:layout_margin="16dp"
android:background="#drawable/selector_button_length"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:text="#string/length"
android:textColor="#color/colorBlue2"/>
<View
android:id="#+id/shadow"
android:layout_below="#+id/button_length"
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#drawable/shadow">
</View>
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_below="#+id/appBarLayout"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="24dp">
</FrameLayout>
</RelativeLayout>
If you want an image to show on bellow the toolbar. You should try CollpsingLayoutToolbar.
Here is an example. I hope this helps
<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"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleGravity="left"
app:expandedTitleGravity="bottom|right"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/CollapsedAppBarStyle"
app:layout_scrollFlags="scroll"
app:title="#string/pod">
<ImageView
android:id="#+id/collapsing_ImageView"
android:layout_width="match_parent"
android:layout_height="256dp"
android:contentDescription="#string/app_name"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/bg_image"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I'm having troubles when i try to hide the content of the coordinator layout when collapsed.
For example:
Here i have my coordinator layout with my toolbar
And when is collapses, it looks something like this
The problem is: i don't want that circle to be visible under my toolbar. What i need to do, is turn this toolbar transparent, to see everything under it while i'm scrolling. I've been searching on internet, but i haven't found anything who fits my needs.
Here's my code for CoordinatorLayout:
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:collapsedTitleTextAppearance="#style/TextStyle3"
app:contentScrim="#color/ys_grey_asset_dark_transparency"
app:expandedTitleGravity="bottom|center_horizontal"
app:expandedTitleTextAppearance="#style/TextStyle1"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="100dp"
android:scaleType="centerCrop"
android:src="#color/ys_gridview_background"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />
<RelativeLayout
android:id="#+id/rl_main_activity_background"
android:layout_width="75dp"
android:layout_height="75dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="#dimen/logo_vertical_margin"
android:background="#drawable/background_circle"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/img_main_activity_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:src="#mipmap/ic_about" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/MyToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="50dp"
app:layout_collapseMode="pin"
app:layout_scrollFlags="enterAlways" />
</android.support.design.widget.CollapsingToolbarLayout>
I just changed and fixed some mistakes, now, it should work.Also, i don't think if this line is necessary for that ImageView:
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:expandedTitleGravity="bottom|center_horizontal"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:minHeight="100dp"
android:scaleType="centerCrop"
android:src="#color/colorPrimaryDark"
app:layout_collapseMode="parallax" />
<RelativeLayout
android:id="#+id/rl_main_activity_background"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/ic_3d_rotation_black_36dp"
app:layout_collapseMode="parallax">
<ImageView
android:id="#+id/img_main_activity_image"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerInParent="true"
android:src="#mipmap/ic_launcher"
app:layout_collapseMode="parallax" />
</RelativeLayout>
<android.support.v7.widget.Toolbar
android:id="#+id/MyToolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
Finally:
set below scrollFlag to your RelativeLayout which contains ImageView:
app:layout_scrollFlags="scroll|enterAlwaysCollapsed"