I am new in using Motion Layout and I have used two Recycler views rv_horizontal and rv_vertical ,rv_horizontal is using LinearLayout Manger with horizontal orientation and rv_vertical is using GridLayout Manger. I have used both of them within Motion Layout. What I want is,when I scroll up the rv_vertical then rv_horizontal, along with the Text ViewtxtCategory, should disappear.
What I tried is following:
home.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context=".Home"
android:background="#color/bgcolor"
app:layoutDescription="#xml/fragment_home_scene">
<!-- TODO: Update blank fragment layout -->
<TextView
android:id="#+id/txtCategory"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"
android:text="#string/category"
android:textSize="8pt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#id/txtCategory"
app:layout_constraintVertical_bias="0.0" />
<TextView
android:id="#+id/txtFamousPlaces"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="8dp"
android:text="#string/famous_places"
android:textSize="8pt"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/rv_horizontal" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/rv_vertical"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/txtFamousPlaces"
app:layout_constraintVertical_bias="0.0" />
</androidx.constraintlayout.motion.widget.MotionLayout>
SceneFile of Home Fragment i.e., home_scene.xml :
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:motion="http://schemas.android.com/tools">
<ConstraintSet android:id="#+id/start">
<Constraint android:id="#+id/txtCategory"
android:layout_width="0dp"
android:layout_height="wrap_content"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<Constraint
android:layout_height="wrap_content"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_width="match_parent"
app:layout_constraintTop_toBottomOf="#id/txtCategory"
android:id="#+id/rv_horizontal"
app:layout_constraintBottom_toTopOf="#+id/txtFamousPlaces" />
</ConstraintSet>
<ConstraintSet android:id="#+id/end">
<Constraint android:id="#id/txtCategory"
android:layout_width="0dp"
android:layout_height="wrap_content"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintBottom_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
<Constraint
android:layout_height="0dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:layout_width="match_parent"
app:layout_constraintTop_toBottomOf="#id/txtCategory"
android:id="#+id/rv_horizontal"
app:layout_constraintBottom_toTopOf="parent" />
</ConstraintSet>
<Transition
app:constraintSetEnd="#id/end"
app:constraintSetStart="#+id/start">
<OnSwipe
motion:onTouchUp="stop"
motion:dragDirection="dragUp"
motion:touchAnchorId="#+id/rv_vertical"
app:moveWhenScrollAtTop="true"/>
</Transition>
</MotionScene>
I am facing the following problems, if anyone knows please help me:
I am scrolling up the rv_vertical but nothing is happening , although I have set the attribute motion:touchAnchorId="#+id/rv_vertical" within OnSwipe attribute in home_scene.xml file. As you can see.
When I scroll up the FamousPlaces then scroll down it then recycler view rv_horizontal does not load completey. As following
I tell you again what I want is,when I scroll up the rv_vertical, rv_horizontal, along with the Text ViewtxtCategory, should disappear.And when I scroll down rv_vertical, rv_horizontal should loaded completely. If anybody knows please help me.
Related
I have a Constraint Layout which contains a RecyclerView, a TextInputEditText, a Constraint Group (which handles visibility of the RecyclerView and TextInputEditText, an ImageView and a LottieAnimationView.
It works as this:
On startup, only the LottieAnimation is visible until my LiveData fetches data from repo and updates successfully.
After data is fetched, the LottieView is hidden and the Group visibility is shown which in turns shows the RecyclerView and TextInputEditText.
The ImageView is shown only if there's an error and then all other views are hidden except the ImageView.
Now i want that when i scroll my RecyclerView, the TextInputEditText also scrolls. (I can't use NestedScrollView due to pagination lag when scroll).
I made use of MotionLayout. Except it is not working properly. My visibility is broken. My Lottie Animation is staying on the screen. My layouts are as such:
fragment.xml:
<?xml version="1.0" encoding="utf-8"?>
<layout 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">
<data>
<variable
name="ViewModel"
type="...AllServicesViewModel" />
<import type="android.view.View" />
</data>
<androidx.constraintlayout.motion.widget.MotionLayout
android:id="#+id/Root_All_Services"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="#xml/scene_all_services_header">
<ImageView
android:id="#+id/Illus_Error"
android:layout_width="350dp"
android:layout_height="350dp"
android:layout_margin="16dp"
android:contentDescription="#string/icd_error_services_unavailable"
android:scaleType="centerCrop"
android:src="#drawable/il_error"
android:visibility="#{ViewModel.message != null ? View.VISIBLE : View.GONE}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/il_error" />
<androidx.constraintlayout.widget.Group
android:id="#+id/Group_Main_Content"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="#{ViewModel.loading || ViewModel.message != null ? View.GONE : View.VISIBLE}"
app:constraint_referenced_ids="TextField_Search,RecyclerView_Services" />
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/TextField_Search"
style="#style/Mes.TextField.Search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:drawablePadding="-24dp"
android:hint="#string/action_search"
android:text="#={ViewModel.searchQuery}"
android:imeOptions="actionSearch"
android:padding="24dp"
android:singleLine="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/RecyclerView_Services"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:clipToPadding="false"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/TextField_Search" />
<com.airbnb.lottie.LottieAnimationView
android:id="#+id/Anim_Loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:visibility="#{!ViewModel.loading || ViewModel.message != null? View.GONE : View.VISIBLE}"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_rawRes="#raw/raw_anim_loading_services" />
</androidx.constraintlayout.motion.widget.MotionLayout>
</layout>
scene_all_services_header.xml
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetEnd="#+id/end"
motion:constraintSetStart="#+id/start">
<OnSwipe
motion:dragDirection="dragUp"
motion:onTouchUp="stop"
motion:touchAnchorId="#+id/TextField_Search" />
</Transition>
<ConstraintSet android:id="#+id/start">
<Constraint
android:id="#+id/TextField_Search"
android:layout_width="0dp"
android:layout_height="wrap_content"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
<ConstraintOverride
android:id="#+id/RecyclerView_Services"
motion:visibilityMode="ignore" />
<Constraint
android:id="#+id/Anim_Loading"
motion:visibilityMode="ignore" />
<Constraint
android:id="#+id/Illus_Error"
motion:visibilityMode="ignore" />
</ConstraintSet>
<ConstraintSet android:id="#+id/end">
<Constraint
android:id="#+id/TextField_Search"
android:layout_width="0dp"
android:layout_height="wrap_content"
motion:layout_constraintBottom_toTopOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent" />
<ConstraintOverride
android:id="#+id/RecyclerView_Services"
motion:visibilityMode="ignore" />
<Constraint
android:id="#+id/Anim_Loading"
motion:visibilityMode="ignore" />
<Constraint
android:id="#+id/Illus_Error"
motion:visibilityMode="ignore" />
</ConstraintSet>
</MotionScene>
Below are samples of how it worked before and after adding MotionLayout
Before
After
Can someone please help me out ?
<Constraint
android:id="#+id/RecyclerView_Services"
motion:visibilityMode="ignore" />
The above eliminates all constraint on this view!
<Constraint android:id="#+id/RecyclerView_Services">
<PropertySet motion:visibilityMode="ignore"/>
</Constraint>
The above removes all attributes leaving just the ignore.
2.1 supports...
<ConstraintOverride
android:id="#+id/RecyclerView_Services"
motion:visibilityMode="ignore" />
Which will do what you were expecting.
ConstraintOverride:
adds or modifies attributes
is not is not well supported by the IDE.
does not support layout_constraint{Top,Bottom,Left,Right,Start,End}_*=".."
I have a list of items that can be swiped away using a MotionLayout. I wanted to implement an animation similar to the one in the Gmail android app, where when you swipe an email away, there is that colored background that gets revealed. So what I tried is to place an ImageView in the MotionLayoutunder the view that moves, so that when that view goes away it will reveal the ImageView beneath.
Here is the layout of the element:
<androidx.constraintlayout.motion.widget.MotionLayout
android:id="#+id/reading_list_item_motion"
android:layout_width="match_parent"
android:layout_height="72dp"
app:layoutDescription="#xml/reading_list_item_scene">
<!-- The image under the element that moves -->
<ImageView
android:id="#+id/reading_list_item_back"
android:layout_width="match_parent"
android:layout_height="72dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
tools:srcCompat="#tools:sample/backgrounds/scenic" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/reading_list_item_layout"
android:layout_width="match_parent"
android:layout_height="72dp"
android:gravity="center"
android:paddingLeft="#dimen/search_result_padding"
android:paddingRight="#dimen/search_result_padding"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="#+id/reading_list_item_icon"
android:layout_width="#dimen/ic_search_result"
android:layout_height="#dimen/ic_search_result"
android:layout_gravity="center"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:contentDescription="Search result icon"
app:error="#{#drawable/ic_default_search_result}"
app:imageUrl="#{book.best_book.small_image_url}"
app:layout_constraintEnd_toStartOf="#id/reading_list_item_info_layout"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_default_search_result" />
<LinearLayout
android:id="#+id/reading_list_item_info_layout"
android:layout_width="316dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="4dp"
android:layout_weight="1"
android:orientation="vertical"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.4"
app:layout_constraintStart_toEndOf="#+id/reading_list_item_icon"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.6">
<TextView
android:id="#+id/reading_list_item_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="2"
android:singleLine="false"
android:text="#{book.best_book.title}"
android:textColor="#color/textSecondary"
android:textSize="18sp"
android:textStyle="bold" />
<TextView
android:id="#+id/reading_list_item_author"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="end"
android:singleLine="true"
android:text='#{"by " + book.best_book.author.name }'
android:textColor="#color/textSecondary" />
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.motion.widget.MotionLayout>
Even though in the Design editor the image appears to be there, and if I play the MotionLayout transition everything behaves as expected, when starting the app the ImageView is nowhere to be seen.
Another approach that I thought of would be to append the ImageView at the end of the view that moves, so that when it starts to go off-screen, the ImageView comes in view. I am not sure how could I implement this though since the ImageView should be as wide as the screen and match_parent obviously wouldn't work
Does anyone have any idea how can I implement this animation?
Thanks in advance!
Edit: Here is an image of how I'd like it to look. The more the item goes of screen, the more of the red background gets revealed.
Here is the MotionScene xml:
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ConstraintSet android:id="#+id/start">
<Constraint
android:id="#+id/reading_list_item_layout"
android:layout_width="match_parent"
android:layout_height="72dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Constraint
app:layout_editor_absoluteY="1dp"
android:id="#+id/imageView" />
</ConstraintSet>
<ConstraintSet android:id="#+id/end">
<Constraint
android:id="#+id/reading_list_item_layout"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="0dp"
android:layout_height="72dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toEndOf="parent" />
</ConstraintSet>
<Transition
app:constraintSetEnd="#id/end"
app:constraintSetStart="#+id/start">
<OnSwipe
app:dragDirection="dragRight"
app:touchAnchorId="#id/reading_list_item_layout"
app:touchAnchorSide="left" />
</Transition>
</MotionScene>
I am trying to move an ImageView according to the buttons pressed. For the moment I am trying to move the ImageView Up and Down, the Down thing works perfectly but the problem is when I try to make it go up. When the ImageView isn't at its initial position the ImageView goes up perfectly (until it reaches its initial position) but when it is at its initial position it just goes up one time and then when I press the up button again it goes down to its initial position.
(Just to let you know, the orientation of the screen is on landscape)
So, to move my ImageView up I just lower the value of translationY
imageView.translationY = imageView.translationY.absoluteValue - 25
I tried using ObjectAnimator.ofFloat() but the imageView goes back to its initial position after the animation.
In the layout I am just using a constraint layout and I constrain the ImageView at the centre of the screen.
Thanks for your help!
Hi I think constraint layout will be good for this case. I have created a sample project to check this out. This uses MotionLayout with MotionScene
The Idea is to create MotionLayout as your parent layout and then define the Childers to animate in your case its ImageView here is sample layout file. Use this file in some activity or some fragment to see in action
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout 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="#android:color/holo_red_dark"
android:orientation="vertical"
app:layoutDescription="#xml/up_down_descriptor">
<ImageView
android:id="#+id/ivStar"
android:layout_width="40dp"
android:layout_height="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_star_outline" />
<Button
android:id="#+id/btnUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="200dp"
android:text="up"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/ivStar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Button
android:id="#+id/btnDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="200dp"
android:text="Down"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/ivStar"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.motion.widget.MotionLayout>
and you define a layout description file up_down_descriptor in res/xml
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Transition
app:constraintSetEnd="#+id/down"
app:constraintSetStart="#+id/center"
app:duration="2000">
<OnClick
app:clickAction="toggle"
app:targetId="#id/btnDown" />
</Transition>
<Transition
app:constraintSetEnd="#+id/up"
app:constraintSetStart="#+id/center"
app:duration="2000">
<OnClick
app:clickAction="toggle"
app:targetId="#id/btnUp" />
</Transition>
<ConstraintSet android:id="#+id/center">
<Constraint
android:id="#+id/ivStar"
android:layout_width="40dp"
android:layout_height="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="#+id/down">
<Constraint
android:id="#+id/ivStar"
android:layout_width="40dp"
android:layout_height="40dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="#+id/up">
<Constraint
android:id="#+id/ivStar"
android:layout_width="40dp"
android:layout_height="40dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
</MotionScene>
MotionLayout will take care of the rest of the things.
I have a scenario where the Toolbar/Action Bar, in an Activity, has an opposite behaviour than the general Toolbar behaviour. It should hide when the motion layout inside a fragment is scrolled UP and show when the motion layout is scrolled DOWN, which is the opposite of the general scroll behaviour.
I trie hiding the Support Action Bar and the toolbar layout completely but it is without any animation and does not bode well, since the Activity contains a BottomNavigation View, so the constant hiding and showing of Action bar does not look good.
supportActionBar?.hide()
containerToolbar.visibility = View.GONE
The AppBarLayout.LayoutParams scroll-flags apparently add the general behaviour.
fragment.xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.motion.widget.MotionLayout
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:layoutDescription="#xml/collapsing_header_arc"
app:showPaths="false"
android:background="#color/white"
tools:showPaths="true">
<com.github.florent37.shapeofview.shapes.ArcView
android:id="#+id/header"
android:layout_width="0dp"
android:layout_height="200dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:shape_arc_height="26dp"
android:background="#color/yellow_dark"
app:shape_arc_position="bottom">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_actionbar_gradient" />
<ScrollView
android:id="#+id/scrollview_counts_container2"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<include
android:id="#+id/counts_container"
layout="#layout/layout_card_count"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</ScrollView>
</com.github.florent37.shapeofview.shapes.ArcView>
<View
android:id="#+id/guideline_anchor"
android:layout_width="wrap_content"
android:layout_height="5dp"
android:orientation="horizontal"
android:background="#color/red_dark"
app:layout_constraintTop_toBottomOf="#id/header"/>
<View
android:id="#+id/recyclerView"
android:layout_width="0dp"
android:layout_height="210dp"
app:layout_constraintBottom_toBottomOf="#+id/guideline_anchor"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/guideline_anchor"
android:background="#color/btnRedAlpha" />
<androidx.core.widget.NestedScrollView
android:id="#+id/parent_parent_dashboard"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/recyclerView"
android:background="#color/transparent"
android:layout_marginTop="#dimen/marginNormal">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/parent_dashboard"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ScrollView
android:id="#+id/scrollview_counts_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintBottom_toTopOf="#+id/calendar_container"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintVertical_bias="0.0"
android:nestedScrollingEnabled="true"
android:visibility="gone">
<include
android:id="#+id/counts_container"
layout="#layout/layout_card_count"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true"/>
</ScrollView>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="#color/white"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_margin="#dimen/marginBig"
app:layout_constraintTop_toBottomOf="#id/scrollview_counts_container"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintVertical_bias="0.0">
<View
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="#color/yellow_dark" />
<View
android:layout_width="match_parent"
android:layout_height="400dp"
android:layout_marginTop="#dimen/marginBig"
android:background="#color/yellow_dark"/>
<View
android:layout_width="match_parent"
android:layout_height="400dp"
android:layout_marginTop="#dimen/marginBig"
android:background="#color/yellow_dark"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>
<!--<androidx.appcompat.widget.AppCompatTextView-->
<!--android:id="#+id/headerText"-->
<!--android:layout_width="wrap_content"-->
<!--android:layout_height="wrap_content"-->
<!--android:layout_gravity="center_vertical"-->
<!--android:layout_marginLeft="23sp"-->
<!--android:elevation="4dp"-->
<!--android:gravity="center_vertical|left"-->
<!--android:text="I love paris"-->
<!--android:shadowColor="#3E3E3E"-->
<!--android:shadowDx="2"-->
<!--android:shadowDy="2"-->
<!--android:shadowRadius="4"-->
<!--android:textColor="#android:color/holo_blue_dark"/>-->
</androidx.constraintlayout.motion.widget.MotionLayout>
collapsing_header_arc.xml
<?xml version="1.0" encoding="utf-8"?>
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Transition
app:constraintSetEnd="#id/end"
app:constraintSetStart="#id/start">
<OnSwipe
app:dragDirection="dragUp"
app:touchAnchorId="#id/guideline_anchor"
app:touchAnchorSide="top" />
</Transition>
<ConstraintSet android:id="#+id/start">
<Constraint
android:id="#id/header"
android:layout_height="240dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<CustomAttribute
app:attributeName="arcHeightDp"
app:customFloatValue="60" />
</Constraint>
<Constraint
android:id="#id/scrollview_counts_container2">
<CustomAttribute
app:attributeName="visibility"
app:customStringValue="visible" />
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="#+id/end">
<Constraint
android:id="#id/header"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<CustomAttribute
app:attributeName="arcHeightDp"
app:customFloatValue="0" />
</Constraint>
<Constraint
android:id="#id/scrollview_counts_container2">
<CustomAttribute
app:attributeName="visibility"
app:customStringValue="gone" />
</Constraint>
</ConstraintSet>
</MotionScene>
Is there a way to implement this?
You can try to make collapse toolbar and manage it as you want. If you have problems to manage activity toolbar from the fragment you could use callback / or events / or observables to call activity animation when something happens from fragment. So for example you have a view in Activity with animation method something like here Show and hide a View with a slide up/down animation and just call it from the fragment.
I'm trying to make animation with motion layout, and want to set scrollView as targetAnchor for motion scene onSwipe Transition, but it doesn't work.
Maybe I don't know some thing about onSwipe transition.
Here is my layout file
<androidx.constraintlayout.motion.widget.MotionLayout 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/main_background_color"
app:layoutDescription="#xml/base_scroll_scene">
<ImageView
android:id="#+id/background_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="#dimen/scrollable_background_image_margin_bottom"
android:scaleType="centerCrop"
android:src="#drawable/lift_bg"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
android:layout_width="match_parent"
android:layout_height="#dimen/top_gradient_mask_height"
android:background="#drawable/top_gradient_mask"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/ski_more_logo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/ski_more_logo_margin_top"
android:src="#drawable/ic_skimore_logo"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/locked_icon"
android:layout_width="32dp"
android:layout_height="32dp"
android:layout_marginTop="#dimen/locked_icon_margin_top"
android:src="#drawable/ic_lock"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/ski_more_logo" />
<FrameLayout
android:id="#+id/bottom_gradient_mask"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="#drawable/bottom_gradient_mask"
app:layout_constraintBottom_toBottomOf="#+id/background_image" />
<ScrollView
android:id="#+id/content_scroll_view"
android:layout_width="match_parent"
android:layout_height="0dp"
android:overScrollMode="never"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent">
<FrameLayout
android:id="#+id/content_container_view"
android:layout_width="match_parent"
android:clickable="false"
android:layout_height="match_parent" />
</ScrollView>
</androidx.constraintlayout.motion.widget.MotionLayout>
In scroll view programmatically i'm adding some content with big height, which will be scrollable.
And here is my motion scene
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetEnd="#+id/end"
motion:constraintSetStart="#+id/start"
motion:duration="1000">
<OnSwipe
motion:dragDirection="dragUp"
motion:touchAnchorId="#+id/content_scroll_view"
motion:touchAnchorSide="top" />
</Transition>
<ConstraintSet android:id="#+id/start"/>
<ConstraintSet android:id="#+id/end">
<Constraint
android:id="#+id/background_image"
android:layout_width="0dp"
android:layout_height="#dimen/top_gradient_mask_height"
android:layout_marginBottom="#dimen/scrollable_background_image_margin_bottom"
android:scaleType="centerCrop"
android:src="#drawable/lift_bg"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
</MotionScene>
Please help me, Thanks.
Have you tried to replace ScrollView with NestedScrollView?
And, also, I would define ConstraintSet "start" as well.
I had the same issue on using a scrolling view with motion layout to implement my custom animations. But simply changing ScrollView to NestedScrollView fixed everything and animations work as expected