Skip to content
This repository was archived by the owner on Dec 27, 2024. It is now read-only.
This repository was archived by the owner on Dec 27, 2024. It is now read-only.

MotionLayout produces incorrect animation #844

@Infernno

Description

@Infernno

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions