Media Pengembangan Web & App | by APPKEY

Pembuatan AplikasiMobile ProgrammingMotion Layout Android : Membuat & Mengelola Animasi...

Motion Layout Android : Membuat & Mengelola Animasi App

-

Last Updated on January 11, 2022 by

Animasi adalah elemen wajib dalam proses app development. Tanpa adanya animasi, project aplikasi Anda akan berjalan dengan sangat kaku.

Untuk Anda yang sering memakai aplikasi, pastinya Anda sudah akrab dengan tampilan pergantian screen pada aplikasi yang sangat luwes, bukan? Animasi pergantian screen aplikasi inilah yang dikenal dengan nama motion layout Android.

Bayangkan bagaimana kakunya tampilan screen aplikasi ketika Anda berpindah-pindah menu dalam aplikasi tanpa adanya motion layout Android.

Aplikasi Anda pastinya tidak akan nyaman digunakan user. Namun Anda tidak perlu cemas, karena sudah ada solusi terbaiknya yakni dengan mengaplikasikan Android motion layout tutorial. Seperti apa?

Yuk kita simak sama-sama penjelasan lengkap Android motion layout tutorial berikut ini agar kita bisa tahu bagaimana cara membuat contoh animasi layout. Selamat membaca!

Android Motion Layout Tutorial untuk Pemula

motion-layout-android-1

Pernahkah Anda memerhatikan betul-betul bagaimana cara sebuah aplikasi terbuka, tertutup, dan berganti layar ketika Anda berpindah dari satu menu ke menu yang lain? Sebuah aplikasi yang baik tentunya akan memiliki pergerakan animasi layar yang luwes.

Gerakan aplikasi terbuka, tertutup dan berpindah layar tersebut adalah contoh animasi layout. Tanpa adanya motion layout android, dapat dipastikan aplikasi Anda akan sangat kaku dan tidak nyaman dipakai. Motion layout Android adalah sebuah animasi pergerakan khusus yang dipasang di setiap view screen aplikasi.

Agar bisa bekerja dengan mulus, motion layout Android biasa memanfaatkan komponen animasi ValueObjectAnimatorm, ConstraintLayout dan MotionLayout. Dari ketiganya, contoh animasi layout terbaik pada aplikasi dapat Anda buat dengan mudah memakai MotionLayout di Android Studio.

Artikel Terkait  Perbedaan Objective-C dan Swift dalam pengembangan aplikasi iOS

Apa Itu Motion Layout?

Untuk Anda yang baru pertama kali mendengar MotionLayout, sesuai namanya, komponen ini adalah sebuah layout khusus untuk mengelola efek motion pada aneka widget, animasi dan screen aplikasi. MotionLayout adalah turunan dari ConstraintLayout, sehingga penggunaannya tidak akan begitu jauh berbeda.

Saat ini, MotionLayout sudah full support untuk API 14 dan Androidpre-lollipop. Semua proses penambahan motion layout Android ini sudah ter-cover pada Android Studio, jadi Anda tidak perlu pusing lagi mencari media pengembangan animasi aplikasi terbaik. Anda cukup membuka AndroidStudio dan mencari menu Motion Editor untuk ngoding transisi motion layout ke project aplikasi.

Sudah tidak sabar untuk memulai? Tunggu dulu, karena ada 4 elemen penting dari motion layout Android yang harus Anda ketahui betul-betul yakni:

ConstraintSet

Elemen ConstraintSet merupakan sebuah elemen dengan beberapa atribut untuk menambahkan interpolasi ketika efek transisi terjadi. ConstraintSet sering digunakan untuk menentukan titik motion start dan motion end.

MotionScene

MotionScene adalah elemen dengan berkas motion lengkap untuk menyimpan semua transisi, membuat motion start dan end di sebuah view.

Keyframe

Keyframe memungkinkan Anda untuk melakukan perubahan lain (penambahan animasi) di titik-titik tertentu ketika proses transisi animasi berlangsung.

CustomAttribute

Terakhir adalah elemen CustomAttribute untuk menentukan transisi atribut yang tidak berkaitan dengan atribut view atau posisi di animasi.

Setelah memahami Motion Layout, kini kita bisa mulai berpraktek membuat animasi motion layout Android.

Step-by-Step Membuat Project Motion Layout Android

Berikut ini adalah cara membuat project motion layout Androidpada AndroidStudio:

Membuat Project dan Motion Layout

  1. Buka AndroidStudio > buat project baru > buka file build.gradle
  2. Ubah versi constraintlayout pada file build.gradle dengan coding berikut:

implementation ‘androidx.constraintlayout:constraintlayout:2.0.0-rc1’

  1. Begitu selesai, lakukan sinkronisasi dengan mengklik sync now > tunggu hingga proses selesai.
  2. Buka file activity_main.xml > ubah root parent menjadi MotionLayout dengan code:

<?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>
5. Lanjutkan coding dengan melengkapi kode struktur dengan:

<?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="128dp"
android:fontFamily="@font/arial"
android:text="Halo!"
android:textColor="#0000FF"
android:textSize="85sp"
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="72dp"
android:fontFamily="@font/arial_narrow"
android:text="Selamat datang di app saya"
android:textSize="28sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/mainText" /&gt
;

<ImageView
android:id="@+id/ivCollapseSign"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="70dp"
android:alpha="0.5"
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="45dp"
android:layout_marginStart="15dp"
android:layout_marginEnd="15dp"
android:layout_marginBottom="30dp"
android:background="#FFE4C4"
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="35dp"
android:layout_height="35dp"
android:layout_marginStart="20dp"
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="30dp"
android:layout_height="30dp"
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="128dp"
android:fontFamily="@font/arial_narrow"
android:gravity="left"
android:text="Ini adalah halaman uji coba "
android:textColor="#000000"
android:textSize="15sp"
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="5dp"
android:fontFamily="@font/arial_narrow "
android:text="Halaman contoh lainnya"
android:textColor="#000000"
android:textSize="20sp"
app:layout_constraintBottom_toTopOf="@+id/collapseTextMessage"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
 
</androidx.constraintlayout.motion.widget.MotionLayout>

Sebagai catatan, Anda bisa mengubah atau menyesuaikan beberapa bagian dari coding di atas seperti isi teks, warna, dan ukuran margin. Pada struktur code di atas pula kita sudah turut menambahkan widget ImageFilterView.
Widget ini adalah turunan dari ImageView dan berfungsi untuk melakukan transformasi animasi simpel seperti filtering dan rounded.
Jika terjadi error pada atribut root parent app:layoutDescription=”…”, Anda cukup memperbaikinya dengan memakai tombol kombinasi Alt+Enter.

Artikel Terkait  Tertarik dengan Digital Security? Ini Dia Bahasa Pemrograman Terbaik untuk Digital Security

Mengatur Motion Scene Aplikasi

Setelah selesai membuat file motion layout/motion scene di Android Studio, kini Anda bisa mulai mengatur motion scene aplikasi. Pengaturan ini penting agar kita bisa mendapatkan efek transisi pada view. Caranya adalah:

  1. Buka file motion layout yang telah dibuat sebelumnya.
  2. Ubah dengan menambahkan konfigurasi constraint set dan transition dengan code:

<?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:constraintSetEnd="@+id/layoutExpanded"
motion:constraintSetStart="@id/layoutCollapse"
motion:duration="500">
<OnClick
motion:clickAction="transitionToEnd"
motion:targetId="@id/imageEmojiBottom" />

</Transition>

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

<ConstraintSet android:id="@+id/layoutExpanded">
</ConstraintSet>
</MotionScene>

  • Kembali fokus ke ConstraintSet yang memiliki id layoutCollapse > tambahkan kode ini ke dalamnya:

<ConstraintSet android:id=”@+id/layoutCollapse”>
<Constraint
android:id="@+id/bottomContainer"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_marginStart="30dp"
android:layout_marginLeft="30dp"
android:layout_marginEnd="30dp"
android:layout_marginRight="30dp"
android:layout_marginBottom="50dp"
motion:layout_constraintBottom_toBottomOf="parent"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent">

<CustomAttribute
motion:attributeName="Round"
motion:customDimension="30dp" />
</Constraint>
<Constraint

android:id="@+id/btnCollapse"
android:layout_width="35dp"
android:layout_height="35dp"
android:layout_marginStart="18dp"
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="10dp"
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="60dp"
android:layout_marginEnd="60dp"
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="128dp"
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="60dp"
android:alpha="0.5"
motion:layout_constraintEnd_toEndOf="@+id/mainMessage"
motion:layout_constraintStart_toStartOf="@+id/mainMessage"
motion:layout_constraintTop_toBottomOf="@+id/mainMessage" />
</ConstraintSet>

Anda bisa bebas mengganti angka-angka margin sesuai kebutuhan masing-masing

  1. Sekarang perhatikan constraintSet yang mempunyai id layoutExpanded. Lengkapi kodenya dengan:

<ConstraintSet android:id=”@+id/layoutExpanded”>

<Constraint
android:id="@+id/bottomContainer"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="28dp"
android:layout_marginLeft="28dp"
android:layout_marginTop="36dp"
android:layout_marginEnd="28dp"
android:layout_marginRight="28dp"
android:layout_marginBottom="10dp"
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="20dp" />

</Constraint>
<Constraint
android:id="@+id/btnCollapse"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_marginStart="28dp"
android:layout_marginTop="28dp"
android:alpha="1"
motion:layout_constraintStart_toStartOf="@+id/bottomContainer"
motion:layout_constraintTop_toTopOf="@+id/bottomContainer" />

<Constraint
android:id="@+id/imageEmojiBottom"
android:layout_width="128dp"
android:layout_height="128dp"
android:layout_marginTop="164dp"
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="125dp"
android:alpha="0.6"
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="30dp"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintHorizontal_bias="0.590"
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="54dp"
android:layout_marginTop="36dp"
android:layout_marginEnd="54dp"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintTop_toBottomOf="@+id/collapseMainText" />

</ConstraintSet>

Sama seperti sebelumnya, Anda bisa bebas mengganti angka-angka margin sesuai kebutuhan masing-masing.

  1. Kemudian, kita akan mengedit interaksi pada motion yang ingin dijalankan pada aplikasi. Untuk melakukannya, cukup cari elemen transition pada file > lengkapi kodenya menjadi:

<Transition
motion:constraintSetEnd="@+id/layoutExpanded"
motion:constraintSetStart="@id/layoutCollapse"
motion:duration="500"
motion:motionInterpolator="cubic(0.7,0,0.01,0.99)">

<OnClick
motion:clickAction="transitionToEnd"
motion:targetId="@id/imageEmojiBottom" />

</Transition>

Di sini pun Anda bisa bebas mengganti angka duration sesuai kebutuhan masing-masing. Setelah itu, selesai sudah! Sekarang Anda hanya perlu mencoba mengetes animasi sudah dapat berjalan dengan baik. Di AndroidStudio sudah terdapat preview Motion Editor yang bisa dimanfaatkan.

Caranya cukup dengan membuka file activity_main.xml kemudian buka tab design. Nantinya, Anda akan mendapat preview layout otomatis dari halaman AndroidStudio. Jika animasi aplikasi sudah berhasil tampil sesuai keinginan, Anda bisa mengaplikasikannya pada aplikasi buatan sendiri.

Demikianlah pembahasan artikel edisi kali ini tentang motion layout android, mulai dari definisi, elemen, hingga tutorial membuat Androidmotion layout untuk aplikasi buatan sendiri.

Terima kasih sudah mengikuti artikel sampai di sini. Jangan lupa untuk selalu stay tune di Appkey agar tidak ketinggalan banyak artikel menarik dan informatif seputar dunia IT. Sampai jumpa lagi di artikel menarik lainnya!


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Mau posting artikel iklan?

Yuk klik dan ikuti ketentuan layanan dari kami, dapatkan penawaran paket dengan harga terbaik!

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Contoh PHP Curl : 10 Hal Luar Biasa yang dapat Anda Kembangkan dengan Curl

Meningkatnya jumlah aplikasi yang pindah ke web telah membuat "HTTP Scripting" lebih sering diminta dan diinginkan. Untuk dapat secara...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 7 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Ini Cara Mudah Membuat Redirect PHP | Seri Belajar PHP

Fungsi redirect PHP sangat banyak digunakan dalam kehidupan berwebsite alias mengelola website. Script redirect PHP banyak dipergunakan oleh user...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya