-
Notifications
You must be signed in to change notification settings - Fork 173
MotionLayout produces incorrect animation #844
Description
I'm trying to make the following screen with MotionLayout:
Screen_Recording_20231023_225526_Android.Playground.mp4
Basically, I have a appbar, cover, user information and content. When the user swipes up, user info goes right under appbar, leaving only content view (green) and app bar.
It looks great and works in portrait mode. Doesn't require any code except XML. However, in landscape mode, it shows a different animation for the content view. It interpolates the size and position of content (green) from the upper left corner instead of being right under user info (red) and overall looks quite weird. The only differences however is that in landscape cover fill parent completely, though it's feels like it shouldn't the problem for MotionLayout to produce correct animation in this case.
Screen_Recording_20231023_225606_Android.Playground.mp4
I want the animation in landscape mode to be the same as in portrait mode.
Is it a bug or am I doing something wrong?
Using androidx.constraintlayout:constraintlayout:2.1.4
Motion Layout and Scene
Motion Layout:
<?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:id="@+id/motion_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layoutDescription="@xml/scene2"
tools:ignore="HardcodedText">
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/cover"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@color/vk_blue_200"
android:gravity="center"
android:text="Image cover"
android:textColor="@color/white"
android:textSize="16sp" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/header"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#FF0000"
android:gravity="center"
android:text="User info"
android:textColor="@color/white"
android:textSize="16sp" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#00FF00"
android:gravity="center"
android:orientation="vertical"
android:text="Content"
android:textSize="16sp" />
<androidx.appcompat.widget.AppCompatTextView
android:id="@+id/toolbar"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#0000FF"
android:gravity="center"
android:text="AppBar"
android:textColor="@color/white"
android:textSize="16sp" />
</androidx.constraintlayout.motion.widget.MotionLayout>
Motion scene:
<?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_set"
app:constraintSetStart="@+id/start_set">
<OnSwipe app:dragDirection="dragUp" />
</Transition>
<ConstraintSet android:id="@+id/start_set">
<!-- Image with ratio 2:1 (in portrait) or full screen (in landscape) -->
<Constraint
android:id="@+id/cover"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="H,2:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0" />
<Constraint
android:id="@+id/toolbar"
android:layout_width="0dp"
android:layout_height="60dp"
android:visibility="invisible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@+id/header"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_marginTop="-10dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/cover" />
<Constraint
android:id="@+id/content"
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_toBottomOf="@id/header" />
</ConstraintSet>
<ConstraintSet
android:id="@+id/end_set"
app:deriveConstraintsFrom="@id/start_set">
<Constraint
android:id="@+id/toolbar"
android:layout_width="0dp"
android:layout_height="60dp"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<Constraint
android:id="@+id/header"
android:layout_width="0dp"
android:layout_height="100dp"
android:layout_marginTop="0dp"
app:layout_constraintBottom_toBottomOf="@id/toolbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</ConstraintSet>
</MotionScene>