Blog

Mengenal Tentang MotionLayout

Apa itu MotionLayout ?

MotionLayout adalah jenis tata letak yang dapat digunakan untuk mengelola motion dan animasi pada widget yang berada di dalam aplikasi. Seperti yang sudah disebutkan sebelumnya, karena MotionLayout merupakan turunan dari kelas ConstraintLayout, maka teman-teman akan mudah menerapkannya jika sebelumnya sudah familiar menyusun tampilan aplikasi menggunakan ConstraintLayout.

Hal menarik lainnya adalah bahwa MotionLayout ini mendukung kompatibilitas dari API 14. Alhasil bisa menerapkan animasi yang sama pada versi Android pre-lollipop.

Beberapa hal yang perlu diketahui terlebih dahulu, yaitu:

MotionScene

Dalam menggunakan MotionLayout membutuhkan sebuah berkas motion scene yang akan digunakan untuk menyimpan transisi, motion start dan motion end dari sebuah View.

ConstraintSet

Dalam menentukan motion start dan motion end akan menggunakan elemen ConstraintSet yang didalamnya terdapat beberapa atribut yang dapat digunakan untuk menambahkan interpolasi saat transisi berlangsung.

CustomAttribute

Elemen ini akan digunakan untuk menentukan transisi pada atribut yang tidak terkait dengan atribut posisi atau atribut dari sebuah View.

Keyframe

Ini yang menarik dalam penggunaan MotionLayout untuk menerapkan transisi. Bisa melakukan perubahan di point tertentu saat transisi berlangsung dengan memanfaatkan keyframe.

Dukungan penuh Android Studio

Sebelum mencoba membuat proyek untuk menerapkan MotionLayout akan memperlihatkan terlebih dahulu salah satu dukungan penuh Android Studio untuk penerapan MotionLayout.

Motion Editor adalah antarmuka yang disediakan Android Studio untuk saat ingin menerapkan MotionLayout agar mudah dalam menentukan transisi dan melihat seperti apa nantinya motion yang sudah dibuat seperti yang ada contoh di atas.

Penerapan MotionLayout

1. Buka berkas build.gradle

Buka berkas build.grandle dan ubah versi dari constraintlayout menjadi seperti berikut :

implementation 'androidx.constraintlayout:constraintlayout:2.0.0-rc1'

Setelah diubah, lakukan sync now dan tunggu hingga proses sinkronisasi selesai.

2. Buka berkas activity_main.xml

Buka berkas activity_main.xml dan ubah root parent-nya menjadi MotionLayout seperti berikut :

<?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/mainLayout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   app:layoutDescription="@xml/activity_main_scene"
   tools:context=".MainActivity">

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

Setelah itu, lengkapi kode di dalamnya seperti di bawah ini :

<?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/mainLayout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   app:layoutDescription="@xml/activity_main_scene"
   tools:context=".MainActivity">

   <TextView
       android:id="@+id/mainText"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="64dp"
       android:fontFamily="@font/roboto_thin"
       android:text="Hi!"
       android:textColor="#1C1C1C"
       android:textSize="70sp"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

   <TextView
       android:id="@+id/mainMessage"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="16dp"
       android:fontFamily="@font/roboto_light"
       android:text="Nice to meet you :D"
       android:textSize="30sp"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toBottomOf="@+id/mainText" />

   <ImageView
       android:id="@+id/ivCollapseSign"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="80dp"
       android:alpha="0.4"
       android:tint="#000"
       app:layout_constraintEnd_toEndOf="@+id/mainMessage"
       app:layout_constraintStart_toStartOf="@+id/mainMessage"
       app:layout_constraintTop_toBottomOf="@+id/mainMessage"
       app:srcCompat="@drawable/ic_collapse" />

   <androidx.constraintlayout.utils.widget.ImageFilterView
       android:id="@+id/bottomContainer"
       android:layout_width="0dp"
       android:layout_height="50dp"
       android:layout_marginStart="16dp"
       android:layout_marginEnd="16dp"
       android:layout_marginBottom="32dp"
       android:background="#00455A"
       android:fitsSystemWindows="true"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintHorizontal_bias="0.0"
       app:layout_constraintStart_toStartOf="parent" />

   <ImageButton
       android:id="@+id/btnCollapse"
       android:layout_width="45dp"
       android:layout_height="45dp"
       android:layout_marginStart="24dp"
       android:alpha="0"
       android:background="@drawable/ic_collapse"
       app:layout_constraintBottom_toBottomOf="@+id/bottomContainer"
       app:layout_constraintStart_toStartOf="@+id/bottomContainer"
       app:layout_constraintTop_toTopOf="@+id/bottomContainer" />

   <ImageView
       android:id="@+id/imageEmojiBottom"
       android:layout_width="35dp"
       android:layout_height="35dp"
       app:layout_constraintBottom_toBottomOf="@+id/bottomContainer"
       app:layout_constraintEnd_toEndOf="@+id/bottomContainer"
       app:layout_constraintStart_toStartOf="@+id/bottomContainer"
       app:layout_constraintTop_toTopOf="@+id/bottomContainer"
       app:srcCompat="@drawable/ic_emoji" />

   <TextView
       android:id="@+id/collapseTextMessage"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginBottom="200dp"
       android:fontFamily="@font/roboto_light"
       android:gravity="center"
       android:text="Don\'t tell anybody about this. Just you and me"
       android:textColor="#A6FFFFFF"
       android:textSize="20sp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent" />

   <TextView
       android:id="@+id/collapseMainText"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginBottom="8dp"
       android:fontFamily="@font/roboto_light"
       android:text="Yeay, you found secret!"
       android:textColor="#fff"
       android:textSize="30sp"
       app:layout_constraintBottom_toTopOf="@+id/collapseTextMessage"
       app:layout_constraintEnd_toEndOf="parent"
       app:layout_constraintStart_toStartOf="parent" />

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

Kode yang sudah ditambahkan di atas terdapat Widget yang mungkin belum pernah dilihat sebelumnya, yaitu ImageFilterView. ImageFilterView adalah sebuah Widget turunan dari ImageView di mana bisa melakukan transformasi seperti menetapkan rounded dan filtering dengan cara yang sederhana.

Jika masih ada eror di attribut app:layoutDescription=”…” pada root parent tidak perlu khawatir, tinggal Alt + Enter untuk membuat berkas yang dibutuhkan dan masalah selesai. Contohnya seperti berikut :

Mengatur Motion Scene

Berkas yang dibuat barusan adalah berkas motion scene yang akan digunakan untuk menetapkan transisi pada View. Buka berkas tersebut kemudian ubah dan tambahkan konfigurasi transition dan constraint set seperti berikut :

Pastikan kembali perubahan kode di atas sudah sesuai dengan kode yang telah ditambahkan. Jika sudah sesuai, fokus pada ConstraintSet dengan id layoutCollapse kemudian tambahkan kode berikut :

<ConstraintSet android:id="@+id/layoutCollapse">
        <Constraint
            android:id="@+id/bottomContainer"
            android:layout_width="75dp"
            android:layout_height="75dp"
            android:layout_marginStart="32dp"
            android:layout_marginLeft="32dp"
            android:layout_marginEnd="32dp"
            android:layout_marginRight="32dp"
            android:layout_marginBottom="64dp"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent">
            <CustomAttribute
                motion:attributeName="Round"
                motion:customDimension="35dp" />
        </Constraint>
        <Constraint
            android:id="@+id/btnCollapse"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginStart="24dp"
            android:alpha="0"
            motion:layout_constraintBottom_toBottomOf="@+id/bottomContainer"
            motion:layout_constraintStart_toStartOf="@+id/bottomContainer"
            motion:layout_constraintTop_toTopOf="@+id/bottomContainer" />
        <Constraint
            android:id="@+id/collapseMainText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:alpha="0"
            motion:layout_constraintBottom_toTopOf="@+id/collapseTextMessage"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent" />
        <Constraint
            android:id="@+id/collapseTextMessage"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="64dp"
            android:layout_marginEnd="64dp"
            android:layout_marginBottom="100dp"
            android:alpha="0"
            motion:layout_constraintBottom_toBottomOf="parent"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent" />
        <Constraint
            android:id="@+id/mainText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="160dp"
            motion:layout_constraintEnd_toEndOf="parent"
            motion:layout_constraintStart_toStartOf="parent"
            motion:layout_constraintTop_toTopOf="parent" />
        <Constraint
            android:id="@+id/ivCollapseSign"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="80dp"
            android:alpha="0.4"
            motion:layout_constraintEnd_toEndOf="@+id/mainMessage"
            motion:layout_constraintStart_toStartOf="@+id/mainMessage"
            motion:layout_constraintTop_toBottomOf="@+id/mainMessage" />
    </ConstraintSet>

Selanjutnya untuk ConstraintSet dengan id layoutExpanded, lengkapi kodenya menjadi seperti berikut :

<ConstraintSet android:id="@+id/layoutExpanded">
   <Constraint
       android:id="@+id/bottomContainer"
       android:layout_width="0dp"
       android:layout_height="0dp"
       android:layout_marginStart="24dp"
       android:layout_marginLeft="24dp"
       android:layout_marginTop="32dp"
       android:layout_marginEnd="24dp"
       android:layout_marginRight="24dp"
       android:layout_marginBottom="8dp"
       motion:layout_constraintBottom_toBottomOf="parent"
       motion:layout_constraintEnd_toEndOf="parent"
       motion:layout_constraintStart_toStartOf="parent"
       motion:layout_constraintTop_toTopOf="parent">
       <CustomAttribute
           motion:attributeName="Round"
           motion:customDimension="10dp" />
   </Constraint>
   <Constraint
       android:id="@+id/btnCollapse"
       android:layout_width="30dp"
       android:layout_height="30dp"
       android:layout_marginStart="24dp"
       android:layout_marginTop="24dp"
       android:alpha="1"
       motion:layout_constraintStart_toStartOf="@+id/bottomContainer"
       motion:layout_constraintTop_toTopOf="@+id/bottomContainer" />
   <Constraint
       android:id="@+id/imageEmojiBottom"
       android:layout_width="120dp"
       android:layout_height="120dp"
       android:layout_marginTop="150dp"
       motion:layout_constraintEnd_toEndOf="@+id/bottomContainer"
       motion:layout_constraintStart_toStartOf="@+id/bottomContainer"
       motion:layout_constraintTop_toTopOf="@+id/bottomContainer" />
   <Constraint
       android:id="@+id/mainText"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="200dp"
       android:alpha="0.2"
       motion:layout_constraintEnd_toEndOf="parent"
       motion:layout_constraintStart_toStartOf="parent"
       motion:layout_constraintTop_toTopOf="parent" />
   <Constraint
       android:id="@+id/collapseMainText"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_marginTop="32dp"
       motion:layout_constraintEnd_toEndOf="parent"
       motion:layout_constraintHorizontal_bias="0.498"
       motion:layout_constraintStart_toStartOf="parent"
       motion:layout_constraintTop_toBottomOf="@+id/imageEmojiBottom" />
   <Constraint
       android:id="@+id/collapseTextMessage"
       android:layout_width="0dp"
       android:layout_height="wrap_content"
       android:layout_marginStart="64dp"
       android:layout_marginTop="24dp"
       android:layout_marginEnd="64dp"
       motion:layout_constraintEnd_toEndOf="parent"
       motion:layout_constraintStart_toStartOf="parent"
       motion:layout_constraintTop_toBottomOf="@+id/collapseMainText" />
</ConstraintSet>

Setelah selesai, selanjutnya menentukan interaksi seperti apa jika motion ingin dijalankan. Masih pada berkas yang sama, fokus pada elemen Transition dan lengkapi kodenya menjadi seperti berikut :

Untuk interaksinya dibuat saat button yang sudah ditambahkan di awal di klik. Sampai saat ini sudah bisa mencobanya. Tetapi untuk memastikan apakah motion yang sudah ditambahkan dapat berjalan dengan baik sesuai dengan yang sudah dibuat, bisa melakukan preview pada Motion Editor. Caranya, buka berkas activity_main.xml dan masuk pada tab Design. Pada Android Studio akan tampil preview layout yang sudah dibuat. Untuk menjalankan preview bisa mengikuti cara berikut :

Jika sudah sesuai bisa langsung menjalankannya pada emulator atau device yang digunakan. Kurang lebih akan seperti berikut saat dijalankan :