Introduction MotionLayout

Easy animation with MotionLayout

Photo by José Alejandro Cuffia on Unsplash

Pengenalan

Pada acara Google IO 2018 ConstraintLayout diumumkan dengan tambahan fitur yaitu MotionLayout.

MotionLayout diperkenalkan pada ConstraintLayout versi 2.0 dan kelebihannya sendiri adalah sebagai berikut.

• Kita bisa membuat animasinya sebebas mungkin karena kita memiliki kendali penuh untuk membuat animasinya seperti, perpindahan transisi, perubahan warna, dan animasi lainnya.
• Kodenya benar-benar terpisah dari business logic karena, MotionLayout bisa dibuat secara penuh hanya di file xml.
• Dukungan perangkat mulai dari API level 14 (Ice Cream Sandwich) yang mana ini berarti, MotionLayout masih bisa berjalan pada low level devices.

Untuk menggunakan MotionLayout kita cuma perlu menambahkan dependency berikut.

dependencies {
    implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha3'
}

Lalu, ganti root layout kita dari ConstraintLayout.

<android.support.constraint.ConstraintLayout .../>

menjadi MotionLayout

<android.support.constraint.motion.MotionLayout .../>

Contoh Pertama

Untuk contoh pertama, kita akan membuat motion layout seperti berikut.

Contoh 1

Untuk membuat contoh MotionLayout seperti diatas kita perlu membuat 3 file xml yaitu layout_basic.xml, layout_start.xml, layout_end.xml, dan motion_basic.xml. Keempat file tersebut kita buat dengan tujuan seperti berikut.

• file layout_basic.xml berfungsi sebagai layout utama.
• file layout_start.xml berfungsi sebagai animasi awal dari layout.
• file layout_end.xml berfungsi sebagai animasi akhir dari layout.
• file motion_basic.xml berfungsi sebagai pengaturan animasinya.

Sekarang coba kita buat file layout_basic.xml seperti berikut.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.motion.MotionLayout
        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="match_parent"
        app:layoutDescription="@xml/motion_basic"
        app:showPaths="true"
>

    <View
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:id="@+id/view"
            android:background="@color/colorAccent"
    />

</android.support.constraint.motion.MotionLayout>

Pada kode diatas bisa kita perhatikan bahwa terdapat attribute app:layoutDescription yang mana ini menunjukkan dimana lokasi file motion-nya. Lalu, attribute app:showPaths berfungsi untuk menampilkan jalur animasinya.

Lalu, kita buat layout_start.xml seperti berikut.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        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="match_parent"
>

    <View
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:id="@+id/view"
            android:background="@color/colorAccent"
            android:layout_marginStart="16dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
    />

</android.support.constraint.ConstraintLayout>

Dari kode diatas tidak ada kode yang asing kita lihat dimana semuanya attribute yang kita pakai sehari-hari untuk membuat layout. Lalu, kita buat juga file layout_end.xml seperti berikut.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
        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="match_parent"
>

    <View
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:id="@+id/view"
            android:background="@color/colorAccent"
            android:layout_marginEnd="16dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
    />

</android.support.constraint.ConstraintLayout>

Dan terakhir kita buat file motion_basic.xml seperti berikut.

<?xml version="1.0" encoding="utf-8"?>
<MotionScene
        xmlns:motion="http://schemas.android.com/apk/res-auto"
>
    <Transition
            motion:constraintSetStart="@layout/layout_start"
            motion:constraintSetEnd="@layout/layout_end"
            motion:duration="1000">
        <OnSwipe
                motion:touchAnchorId="@+id/view"
                motion:touchAnchorSide="right"
                motion:dragDirection="dragRight"/>
    </Transition>
</MotionScene>

Pada kode diatas, bisa kita perhatikan ada beberapa attribute yang perlu saya jelaskan yaitu sebagai berikut.

• constraintSetStart berfungsi untuk mendeklarasikan animasi awal layout-nya.
• constraintSetEnd berfungsi untuk mendeklarasikan animasi akhir layout-nya.
• touchAnchorId berfungsi untuk mendeklarasikan view yang ingin kita animasikan.
• touchAnchorSide berfungsi untuk mendeklarasikan posisi view yang kita animasikan kearah mana.
• dragDirection berfungsi untuk mendeklarasikan arah geseran dari view yang kita animasikan.

Untuk lebih jelasnya mengenai attribute yang tersedia bisa dibaca lebih detil di link berikut https://developer.android.com/reference/android/support/constraint/motion/MotionLayout#onswipe-optional

Contoh Kedua

Untuk contoh kedua ini kita tidak akan membuat file layout_start.xml dan layout_end.xml lalu sebagai penggantinya kita menggunakan ConstraintSet. Jadi, ConstraintSet ini fungsinya hampir sama seperti kita membuat layout yang terpisah seperti pada contoh pertama hanya saja ConstraintSet ini kita tidak perlu membuat file layout-nya dan sebagai penggantinya kita pakai ConstraintSet yang mana ConstraintSet ini kita bisa mendeklarasikan attribute yang sama seperti kita pakai layout. Untuk contoh kedua kali ini kita akan membuat output yang sama seperti pada contoh pertama hanya saja kita tidak perlu menggunakan file layout_start.xml dan layout_end.xml. Silakan kita buka file motion_basic.xml dan ubah kodenya menjadi seperti berikut.

<?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="1000">
        <OnSwipe
                motion:touchAnchorId="@+id/view"
                motion:touchAnchorSide="right"
                motion:dragDirection="dragRight"/>
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/view"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginStart="16dp"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent" />
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
                android:id="@+id/view"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:layout_marginEnd="16dp"
                motion:layout_constraintTop_toTopOf="parent"
                motion:layout_constraintEnd_toEndOf="parent"
                motion:layout_constraintBottom_toBottomOf="parent"/>
    </ConstraintSet>
</MotionScene>

Dan sekarang coba kita jalankan lagi maka, outputnya akan sama seperti pada contoh pertama.

Contoh Ketiga

Pada contoh ketiga, kita akan membuat animasi perubahan warna. Silakan kita ubah file motion_basic.xml menjadi seperti berikut.

<?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="1000"
            motion:interpolator="linear">
        <OnSwipe
                motion:touchAnchorId="@+id/view"
                motion:touchAnchorSide="right"
                motion:dragDirection="dragRight"/>
    </Transition>

    <ConstraintSet android:id="@+id/start">
        <Constraint
            android:id="@+id/view"
            android:layout_width="64dp"
            android:layout_height="64dp"
            android:layout_marginStart="16dp"
            motion:layout_constraintTop_toTopOf="parent"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintStart_toStartOf="parent">
            <CustomAttribute
                    motion:attributeName="backgroundColor"
                    motion:customColorValue="@color/colorAccent"/>
        </Constraint>
    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint
                android:id="@+id/view"
                android:layout_width="64dp"
                android:layout_height="64dp"
                android:layout_marginEnd="16dp"
                motion:layout_constraintTop_toTopOf="parent"
                motion:layout_constraintEnd_toEndOf="parent"
                motion:layout_constraintBottom_toBottomOf="parent">
            <CustomAttribute
                    motion:attributeName="backgroundColor"
                    motion:customColorValue="@color/colorPrimary"/>
        </Constraint>
    </ConstraintSet>
</MotionScene>

Pada kode diatas bisa kita lihat bahwa kita ada menambahkan CustomAttribute yang mana didalamnya kita ada menambahkan attributeName dan customColorValue. Perlu dicatat bahwa tidak semua CustomAttribute bisa kita pakai. CustomAttribute hanya bisa kita pakai jika getter/setter method-nya ada, contohnya seperti setBackgroundColor (setter) dan getBackgroundColor (getter).

Kesimpulan

Jadi, setelah kita belajar singkat mengenai MotionLayout maka dapat saya simpulkan bahwa penggunaan MotionLayout sangat mudah dikarenakan penggunaannya yang dibuat fully declarative sehingga kita tidak ada mencampur coding logic dengan coding animasi.