Develop Reference

Android Motion Layout does not adapt to dynamic change in TextView content before animation. So how to make it adapt to new contents?

If we programmatically change the content of a Textview, after that the Motion animation only consider the original height of the TextView.
This example is suppose to expand to show a textView contents. It works if the content is previously assigned in the xml layout. But if the content is assigned programmatically and it takes several lines it only expand one line.
Code to trigger the Motion Scene Transition:
binding.button.setOnClickListener {
binding.tvLorem.text = LongText
binding.motionLayout.transitionToEnd()
}
<?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"
android:id="#+id/motionLayout"
tools:context=".MotionaLayoutActivity"
tools:showPaths="true"
app:layoutDescription="#xml/activity_motiona_layout_scene">
<View
android:id="#+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
android:background="#color/design_default_color_primary"
android:text="Button" />
<TextView
android:id="#+id/tvLorem"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Lorem Ipsum"
/>
<View
android:id="#+id/bottomBar"
android:layout_width="match_parent"
android:layout_height="64dp"
android:background="#color/design_default_color_secondary"
app:layout_constraintBottom_toBottomOf="parent" />
</androidx.constraintlayout.motion.widget.MotionLayout>
The file with the MotionScene:
<?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">
<ConstraintSet android:id="#+id/start">
<Constraint
android:id="#+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
motion:layout_constraintBottom_toTopOf="#id/tvLorem"
motion:layout_constraintEnd_toEndOf="parent" />
<Constraint
android:id="#+id/tvLorem"
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_marginTop="#dimen/default_margin"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintBottom_toTopOf="#id/bottomBar">
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#00000000"/>
</Constraint>
</ConstraintSet>
<ConstraintSet android:id="#+id/end">
<Constraint
android:id="#+id/button"
android:layout_width="64dp"
android:layout_height="64dp"
motion:layout_constraintBottom_toTopOf="#id/tvLorem"
motion:layout_constraintEnd_toEndOf="parent" />
<Constraint
android:id="#+id/tvLorem"
android:visibility="visible"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/cardview_dark_background"
android:layout_marginTop="#dimen/default_margin"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintBottom_toTopOf="#+id/bottomBar">
<CustomAttribute
motion:attributeName="backgroundColor"
motion:customColorValue="#color/cardview_dark_background"/>
</Constraint>
</ConstraintSet>
<Transition
motion:constraintSetStart="#+id/start"
motion:constraintSetEnd="#+id/end"
motion:duration="1000">
<OnClick
motion:touchAnchorId="#+id/button"
motion:touchAnchorSide="right"
motion:dragDirection="dragRight" />
</Transition>
</MotionScene>
So, how to make it work changing the text content programmatically?
For the moment I tried:
binding.tvLorem.invalidate()
binding.tvLorem.postInvalidate()
binding.motionLayout.invalidate()
binding.motionLayout.clearAnimation()
binding.motionLayout.rebuildScene()
and nothing works!
What do works is changing the TextView visibility to GONE and VISIBLE before running the transition.
fun TextView.informMotionSceneAboutNewHeight(){
visibility = View.GONE
visibility = View.VISIBLE
}
binding.tvLorem.text = LongText
binding.tvLorem.informMotionSceneAboutNewHeight()
binding.motionLayout.transitionToEnd()

How to set multiple OnSwipe Add Android MotionLayout Single Transition?

I'm using android motion layout. I want to add two OnSwipe nodes to a single transition, but I don't know how. The screen I want to implement is as follows.
The screen has ImageView and RecyclerView, and ImageView is on top of RecyclerView.
There are three states of small, medium, and full.
In small, only ImageView exists at the bottom of the screen, and RecyclerView is not visible.
In medum, ImageView is located in the center of the screen, and RecyclerView is visible in the lower space.
In full, the ImageView is located at the top of the screen, and the RecyclerView is visible in the lower space.
I want to do a transition using both an ImageView and a RecyclerView. In particular, I would like to implement the RecyclerView to transition when scrolling is not possible (the scroll position is at the top or the bottom) and when scrolling in the impossible scroll direction. How can we do that?
this is motion scene
<?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/medium"
motion:constraintSetStart="#+id/small">
<OnSwipe
motion:onTouchUp="autoComplete"
motion:dragDirection="dragUp"
motion:touchAnchorId="#+id/header" />
</Transition>
<Transition
motion:constraintSetEnd="#+id/full"
motion:constraintSetStart="#+id/medium">
<OnSwipe
motion:onTouchUp="autoComplete"
motion:dragDirection="dragUp"
motion:touchAnchorId="#+id/header" />
</Transition>
<ConstraintSet android:id="#+id/small">
<Constraint
android:id="#+id/header"
android:layout_width="0dp"
android:layout_height="wrap_content"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintBottom_toBottomOf="parent" />
<Constraint
android:id="#+id/list"
android:layout_width="0dp"
android:layout_height="0dp"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintBottom_toBottomOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="#+id/medium">
<Constraint
android:id="#+id/header"
android:layout_width="0dp"
android:layout_height="wrap_content"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintBottom_toTopOf="#+id/medium_top"/>
<Constraint
android:id="#+id/list"
android:layout_width="0dp"
android:layout_height="0dp"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toBottomOf="#+id/header"
motion:layout_constraintBottom_toBottomOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="#+id/full">
<Constraint
android:id="#+id/header"
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:id="#+id/list"
android:layout_width="0dp"
android:layout_height="0dp"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toBottomOf="#+id/header"
motion:layout_constraintBottom_toBottomOf="parent" />
</ConstraintSet>
</MotionScene>
and this activity.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">
<androidx.constraintlayout.motion.widget.MotionLayout
android:id="#+id/motion_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="#xml/scrollable_header_above_recycler_view_scene">
<Space
android:id="#+id/medium_top"
android:layout_width="match_parent"
android:layout_height="1dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.55" />
<ImageView
android:id="#+id/header"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintBottom_toTopOf="#+id/list" />
<androidx.recyclerview.widget.RecyclerView
android:id="#+id/list"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:clipToPadding="false"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.motion.widget.MotionLayout>
</layout>

This is a limitation of MotionLayout/OnSwipe support for NestedScrollView.
You can only automatically operate on one transition with a RecyclerView (NestedScrollView)
You have two choices:
Make the intermediate step using KeyFrames
Disable the automatic handling and manually control the transitions by listening to the scroll position.
In your case I would do the KeyFrame i.e. One Transition from small to full.
With one KeyPosition defining the position of the view.

MotionLayout Group Visibility Issue

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}_*=".."

MotionLayout with vertical ScrollView

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

How to use motion layout with recyclerview

trying to use MotionLayout with RecyclerView,
when scrolling up, app is crashing with error:
android.content.res.Resources$NotFoundException: Unable to find
resource ID #0xffffffff
fragment layout code is
<android.support.constraint.motion.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"
app:layoutDescription="#xml/collapsing_config_order_details"
android:layout_width="match_parent"
android:layout_height="match_parent">
...
<android.support.v7.widget.CardView
android:id="#+id/cardView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="#+id/tv_delivery_type"
app:layout_constraintStart_toStartOf="#+id/imageView15"
app:layout_constraintTop_toBottomOf="#+id/view4">
...
</android.support.v7.widget.CardView>
<android.support.v7.widget.RecyclerView
android:id="#+id/rv_list"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="#+id/cardView"
app:layout_constraintStart_toStartOf="#+id/cardView"
app:layout_constraintTop_toBottomOf="#+id/cardView" />
</android.support.constraint.motion.MotionLayout>
and layoutDescription code is:
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<Transition
app:constraintSetEnd="#id/collapsed"
app:constraintSetStart="#id/expanded">
<OnSwipe
app:dragDirection="dragUp"
app:touchAnchorSide="top"
app:moveWhenScrollAtTop="#+id/rv_list" />
</Transition>
<ConstraintSet android:id="#+id/expanded"
android:id="#+id/cardView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="#+id/tv_delivery_type"
app:layout_constraintStart_toStartOf="#+id/imageView15"
app:layout_constraintTop_toBottomOf="#+id/view4" />
</ConstraintSet>
<ConstraintSet android:id="#+id/collapsed">
<Constraint
android:id="#+id/cardView"
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="#+id/tv_delivery_type"
app:layout_constraintStart_toStartOf="#+id/imageView15"
app:layout_constraintTop_toBottomOf="#+id/view4" />
</ConstraintSet>
</MotionScene>

Add android:nestedScrollingEnabled="false" to your recyclerView
works for me.

app:moveWhenScrollAtTop="#+id/rv_list"
Vale of app:moveWhenScrollAtTop should be boolean.

Change
<ConstraintSet android:id="#+id/expanded"
android:id="#+id/cardView"
to
<ConstraintSet android:id="#+id/expanded" >
<Constraint android:id="#+id/cardView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
app:layout_constraintEnd_toEndOf="#+id/tv_delivery_type"
app:layout_constraintStart_toStartOf="#+id/imageView15"
app:layout_constraintTop_toBottomOf="#+id/view4" />
</ConstraintSet>

Each ConstraintSet should have Constraint by themselves and you need to specify as many Constraint as you want to change the scene, like if you want to move A and B together with one interaction, you need to specify both of them in one ConstraintSet
Also, I'm not sure what you're trying to achieve, but I think you need to write code like below
<OnSwipe
app:dragDirection="dragUp"
app:touchAnchorId="#id/rv_list"
app:touchAnchorSide="top" />
That means you're targeting rv_list to trigger the action.