1 코드

(1) fragment_document_webview2

        <androidx.constraintlayout.motion.widget.MotionLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layoutDescription="@xml/motion_document_webview"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            tools:showPaths="true">

            <androidx.constraintlayout.widget.ConstraintLayout
                android:clickable="true"
                android:id="@+id/topBar"
                android:layout_width="match_parent"
                android:layout_height="70dp"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent">

                <androidx.cardview.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    app:cardCornerRadius="15dp"
                    app:cardBackgroundColor="@color/white"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent">

                    <ImageView
                        android:id="@+id/btnClose2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center_vertical"
                        android:src="@drawable/document_back"
                        android:padding="15dp"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent"
                        app:layout_constraintBottom_toBottomOf="parent"/>

                    <TextView
                        android:layout_gravity="center"
                        android:id="@+id/title2"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@color/colorPrimary"
                        android:textSize="20dp"
                        android:text="testTitle" />

                </androidx.cardview.widget.CardView>

            </androidx.constraintlayout.widget.ConstraintLayout>

            <androidx.constraintlayout.widget.ConstraintLayout
                android:clickable="true"
                android:id="@+id/BottomBar"
                android:layout_width="match_parent"
                android:layout_height="70dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent">

                <androidx.cardview.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    app:cardCornerRadius="15dp"
                    app:cardBackgroundColor="@color/white"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintTop_toTopOf="parent">

                    <LinearLayout
                        android:layout_marginTop="5dp"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="horizontal"
                        android:paddingStart="10dp"
                        android:gravity="center_vertical">

                        <LinearLayout
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:orientation="horizontal"
                            android:gravity="center_horizontal">

                            <EditText
                                android:padding="15dp"
                                android:id="@+id/editNowPage2"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:textSize="20dp"
                                android:singleLine="true"
                                android:inputType="number"
                                android:background="@null"
                                android:textColorHint="@color/colorPrimary"
                                android:textColor="@color/colorPrimary"
                                android:textStyle="bold"
                                android:hint="1"/>

                            <TextView
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:text="/"
                                android:textSize="20dp"
                                android:textStyle="bold"
                                android:textColor="@color/colorPrimary"/>

                            <TextView
                                android:paddingHorizontal="15dp"
                                android:id="@+id/txtTotalPage2"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:textSize="20dp"
                                android:textColor="@color/colorPrimary"
                                android:textStyle="bold"
                                android:text="9999"/>

                        </LinearLayout>

                        <LinearLayout
                            android:layout_width="0dp"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:orientation="horizontal"
                            android:gravity="center_horizontal">

                            <ImageView
                                android:id="@+id/btnPrevious2"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:src="@drawable/document_previous"
                                android:padding="15dp" />

                            <ImageView
                                android:id="@+id/btnForward2"
                                android:layout_marginStart="50dp"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:src="@drawable/document_next"
                                android:padding="15dp" />
                        </LinearLayout>

                    </LinearLayout>

                </androidx.cardview.widget.CardView>

            </androidx.constraintlayout.widget.ConstraintLayout>

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

모션레이아웃은 컨스트레인트레이아웃의 자식이기 때문에
컨스트레인트레이아웃 안에서 사용이 가능하다.

모션레이아웃 안의 각각의 레이아웃은 id가 입력되지 않으면
빨간색줄이 생긴다.

모션레이아웃은 코드로 구현이 어려움으로
코드 구현이 같이 필요한 모션은 애니메이션으로 대체한다.

app:layoutDescription="@xml/motion_document_webview" 에서 res.xml 안에 xml에서 생성해둔 모션을 넣어준다.

(2) motion_document_webview.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:constraintSetStart="@+id/start"
        motion:constraintSetEnd="@+id/end"
        motion:duration="500">

        <OnClick
            motion:targetId="@+id/topBar"
            motion:clickAction="toggle" />

    </Transition>

    <ConstraintSet android:id="@+id/start">

        <Constraint
            android:id="@+id/topBar"
            android:layout_width="match_parent"
            android:layout_height="75dp"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"/>

        <Constraint
            android:id="@+id/BottomBar"
            android:layout_width="match_parent"
            android:layout_height="65dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent"/>

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">

        <Constraint
            android:id="@+id/BottomBar"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent" />

        <Constraint
            android:id="@+id/topBar"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintLeft_toLeftOf="parent"
            motion:layout_constraintRight_toRightOf="parent" />

    </ConstraintSet>

</MotionScene>