Android my motionlayout constraints does not react to child views

Question

I wonder if this is possible to modify child of direct view in MotionScene. I have FrameLayout with two views inside and one of them (iv_avatar) I want to make smaller width and height at the end of the animation but my motion scene does not work in terms of this problem (the width and height remain the same at the begining and end of animation).

Here is my code.

activity_account.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="wrap_content"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        android:background="?colorToolbarBg"
        android:minHeight="?actionBarSize"
        android:orientation="vertical" />

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/my_drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.constraintlayout.motion.widget.MotionLayout
            android:id="@+id/motionLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layoutDescription="@xml/scene_test">

            <FrameLayout
                android:id="@+id/fl"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent">

                <ImageView
                    android:id="@+id/iv_avatar"
                    android:layout_width="75dp"
                    android:layout_height="75dp"
                    android:layout_marginTop="16dp"
                    android:scaleType="centerCrop"
                    app:srcCompat="@mipmap/ic_avatar" />

                <ImageButton
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|right"
                    android:layout_marginLeft="50dp"
                    android:layout_marginTop="65dp"
                    android:alpha="0.6"
                    android:background="@null"
                    android:src="@mipmap/ic_edit" />

            </FrameLayout>

            <TextView
                android:id="@+id/toolbarTitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:text="username"
                android:textSize="27sp"
                android:textStyle="bold"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/fl" />

            <LinearLayout
                android:id="@+id/ll"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:layout_constraintTop_toBottomOf="@id/toolbarTitle"
                android:orientation="horizontal">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:src="@mipmap/ic_join"
                    android:tint="?colorDayNight" />

                <TextView
                    android:id="@+id/tv_when_joined"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Joined "
                    android:textSize="15sp"
                    android:textStyle="bold" />
            </LinearLayout>

            <View
                android:id="@+id/toolbarDivider"
                android:layout_width="0dp"
                android:layout_height="0.5dp"
                android:layout_marginTop="10dp"
                android:background="@color/toolbar_default_bg_day"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/ll" />

            <androidx.core.widget.NestedScrollView
                android:id="@+id/scrollview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_constraintTop_toBottomOf="@id/toolbarDivider">

                <RelativeLayout
                    android:id="@+id/rl2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <TextView
                        android:id="@+id/tv"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="abc" />

                    <Button
                        android:id="@+id/b_logout"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/tv"
                        android:layout_centerHorizontal="true"
                        android:text="logout" />
                </RelativeLayout>
            </androidx.core.widget.NestedScrollView>

        </androidx.constraintlayout.motion.widget.MotionLayout>


        <com.google.android.material.navigation.NavigationView
            android:id="@+id/navigation_view"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:itemIconTint="?colorDayNight"
            app:menu="@menu/menu_navigation_drawer" />

    </androidx.drawerlayout.widget.DrawerLayout>
</LinearLayout>

scene_test.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/iv_avatar"
            android:layout_width="20dp"
            android:layout_height="wrap_content"
            android:alpha="1" />
        <Constraint
            android:id="@id/fl"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            android:alpha="1" />
        <Constraint
            android:id="@id/tv_username"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@id/fl"
            android:alpha="1" />
        <Constraint
            android:id="@id/ll"
            android:layout_width="wrap_content"
            android:layout_height="1dp"
            android:alpha="0" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
            android:id="@id/iv_avatar"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:alpha="1" />
        <Constraint
            android:id="@id/fl"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:alpha="1" />
        <Constraint
            android:id="@id/tv_username"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/fl"
            android:alpha="1" />
        <Constraint
            android:id="@id/ll"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/tv_username"
            android:alpha="1" />
    </ConstraintSet>

    <Transition
        app:constraintSetEnd="@id/start"
        app:constraintSetStart="@id/end"
        app:duration="1000">
        <OnSwipe
            app:touchAnchorId="@id/scrollview"
            app:touchAnchorSide="top" />
    </Transition>
</MotionScene>

Thank you in advance!

Answer 1

MotionLayout can only manipulate its children. This prevents conflict between the two layouts. In your case you might be able to have iv_avatar be match_parent and f1 be width = 75dp