MotionLayout produces incorrect animation

50 Views Asked by At

I'm trying to make the following screen with MotionLayout. Basically, it has an 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). 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.

Here's the video in landscape mode.

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:

<?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>
0

There are 0 best solutions below