Membuat animasi dengan Motion Layout di Android (Part-1)

Motion Layout adalah class baru yang tersedia di library ConstraintLayout 2.0 yang memiliki fungsi untuk membantu android developer untuk mengatur motion atau animasi di aplikasi.

Kita langsung saja praktek ya, Yuk Ngoding 😀

“Sample project untuk postingan ini dibuat, dengan menggunakan Android Studio 4.0.1 dan androidx.constraintlayout:constraintlayout:2.0.1“

1. Buat project baru

Pada tahap ini bisa dilakukan seperti biasa. Pastikan di gradle level app, kita menggunakan ConstraintLayout versi 2.0.0 ke atas. Disini mimin menggunakan versi 2.0.1.

2. Convert layout ke Motion Layout

Pada tulisan ini, kita akan menggunakan layout activity_main.xml seperti berikut:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:id="@+id/view1"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_marginTop="56dp"
        android:background="@color/colorPrimary"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/view2"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_marginBottom="56dp"
        android:background="@color/colorAccent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Di Android studio tampilannya akan seperti berikut:

Setelah itu kita akan melakukan convert ke motion layout dengan melakukan klik kanan pada preview layout, dan klik Convert to MotionLayout.

Akan muncul sebuah pop up untuk menanyakan convert ke motion layout atau tidak. Cukup klik Convert.

Setelah convert dilakukan, layout yang awalnya menggunakan androidx.constraintlayout.widget.ConstraintLayout akan berubah menjadi androidx.constraintlayout.motion.widget.MotionLayout. Selain itu satu file baru juga akan terbuat secara otomatis.

3. Properti pada MotionLayout

Pada activity_main.xml sekarang kita telah menggunakan androidx.constraintlayout.motion.widget.MotionLayout. Terdapat beberapa properti yang bermanfaat seperti layoutDescription dan juga motionDebug:

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/ml"
    app:layoutDescription="@xml/activity_main_scene"
    app:motionDebug="SHOW_ALL">

    ...

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

• layoutDescription, akan menentukan scene/motion yang mana yang akan digunakan oleh layout
• motionDebug, akan membantu kita untuk melihat garis, kecepatan frame ketika scene/motion berlangsung pada device

4. MotionScene dan ConstraintSet pada activity_main_scene.xml

Disini kita akan mencoba menjelaskan dari sisi code, nantinya juga bakalan ada proses pembuatan scene/motion dengan memanfaatkan IDE 😀 . activity_main_scene.xml adalah file yang terbuat secara otomatis ketika kita melakukan convert layout. Struktur code pada file tersebut kurang lebih seperti ini:

<?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"
    motion:defaultDuration="500">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:duration="1000">

        <KeyFrameSet></KeyFrameSet>

     </Transition>

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

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

</MotionScene>

a. MotionScene

Motion scene adalah parent dari xml ini. Pada tag ini terdapat properti defaultDuration yang bisa digunakan untuk menentukan berapa lama motion akan berlangsung. Waktu ini akan digunakan secara default jika tidak ada spesifikasi durasi pada childnya.

b. ConstraintSet

Sesuai dengan nama tagnya, ConstraintSet berarti terdiri dari beberapa Constraint. Pada xml yang kita miliki terdapat dua ConstraintSet. Kedua constraintSet tersebut memiliki id sebegai tanda pengenalnya. Salah satu manfaatnya adalah digunakan pada tag Transition.

Pertama kita akan mencoba membuat sebuah object bergerak. Gunakan code berikut ini:

<?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"
    motion:defaultDuration="500">

    <Transition
        motion:constraintSetEnd="@+id/end"
        motion:constraintSetStart="@id/start"
        motion:autoTransition="animateToEnd"
        motion:duration="1000">

        <KeyFrameSet></KeyFrameSet>

    </Transition>

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

    </ConstraintSet>

    <ConstraintSet android:id="@+id/end">
        <Constraint android:id="@+id/view2">
            <Layout
                android:layout_width="200dp"
                android:layout_height="128dp"
                android:layout_marginEnd="32dp"
                android:layout_marginRight="32dp"
                motion:layout_constraintBottom_toBottomOf="parent"
                motion:layout_constraintEnd_toEndOf="parent"
                motion:layout_constraintTop_toTopOf="parent" />
        </Constraint>
    </ConstraintSet>

</MotionScene>

• <Transition, constraintSetStart, kita menentukan constrain set dengan id start sebagai kondisi awal sebelum terjadinya transisi
• <Transition, constraintSetEnd, kita menentukan constrain set dengan id end sebagai kondisi akhir dari transisi
• <Transition, motion:autoTransition, akan membuat motion atau animasi akan berjalan otomatis setelah layout dibuat
• <ConstraintSet dengan id start memiliki child kosong. Hal ini akan membuat constraint tersebut menggunakan base layoutnya atau sama dengan kondisi layout yang menggunakan file scene ini. Dalam tulisan ini berarti sama dengan activity_main.xml
• <ConstraintSet dengan id end memiliki child. Hal ini berarti akan ada perubahan kondisi pada scene ini.
• <Constraint digunakan untuk menentukan widget yang mana dari activity_main.xml yang akan diberikan efek atau kondisi.
• <Layout adalah salah satu child yang bisa digunakan di dalam Constraint. Layout memiliki fungsi untuk mengatur posisi dan ukuran dari layout.

Kita bisa memanfaatkan fitur Android Studio untuk melihat animasi tanpa perlu menjalankan aplikasi ke device. Pertama buka acitivity_main.xml, lalu tampilannya akan seperti berikut:

Kita akan berfokus pada sisi kanannya. Yang ditampilkan pada screenshot adalah kondisi awal. Untuk melihan kondisi akhirnya, cukup klik end seperti berikut:

Sedangkan untuk melihat animasi, bisa dilakukan seperti berikut:

Ingin melihatnya di device langsung? Cukun jalankan project ke device, dan animasi akan berjalan otomatis ketika layout telah dibuat.

Selamat, kita telah membuat motion sederhana 😀

Masih banyak hal lainnya yang bisa dibahas terkait MotionLayout. Seperti pada <Constraint >, kita baru menggunakan satu child yaitu <Layout >. Di part selanjutnya kita akan membahas child lainnya yang tak kalah menarik tentunya. Ditunggu part 2 nya ya 😀

Oh iya di website ini ada tulisan menarik lainnya juga loh, seperti berikut:

• Load Image dengan Menggunakan COIL, Part 1
• WorkManager untuk Background Task
• Mengelompokkan Berbagai Widget dengan Stack
• Membuat ListView di Flutter

Sekian dulu, terimakasih