{"id":7026,"date":"2020-10-26T09:07:49","date_gmt":"2020-10-26T09:07:49","guid":{"rendered":"https:\/\/hosteko.com\/blog\/?p=7026"},"modified":"2020-10-26T09:07:49","modified_gmt":"2020-10-26T09:07:49","slug":"mengenal-tentang-motionlayout","status":"publish","type":"post","link":"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout","title":{"rendered":"Mengenal Tentang MotionLayout"},"content":{"rendered":"<h1><strong>Apa itu MotionLayout ?<\/strong><\/h1>\n<p><strong>MotionLayout<\/strong> adalah jenis tata letak yang dapat digunakan untuk mengelola <i>motion<\/i>\u00a0dan animasi pada widget yang berada di dalam aplikasi. Seperti yang sudah disebutkan sebelumnya, karena\u00a0<b>MotionLayout<\/b>\u00a0merupakan turunan dari kelas\u00a0<b>ConstraintLayout<\/b>, maka teman-teman akan mudah menerapkannya jika sebelumnya sudah familiar menyusun tampilan aplikasi menggunakan\u00a0<b>ConstraintLayout<\/b>.<\/p>\n<p>Hal menarik lainnya adalah bahwa <b>MotionLayout<\/b> ini mendukung kompatibilitas dari API 14. Alhasil bisa menerapkan animasi yang sama pada versi Android pre-lollipop.<\/p>\n<p>Beberapa hal yang perlu diketahui terlebih dahulu, yaitu:<\/p>\n<ul>\n<li>\n<h3><b>MotionScene<\/b><\/h3>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\">Dalam menggunakan\u00a0<i>MotionLayout<\/i>\u00a0membutuhkan sebuah berkas motion scene yang akan digunakan untuk menyimpan transisi, <i>motion start<\/i>\u00a0dan\u00a0<i>motion<\/i>\u00a0<i>end<\/i>\u00a0dari sebuah View.<\/p>\n<ul>\n<li>\n<h3><b>ConstraintSet<\/b><\/h3>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\">Dalam menentukan\u00a0<i>motion start<\/i>\u00a0dan\u00a0<i>motion end <\/i>akan menggunakan elemen <i>ConstraintSet<\/i> yang didalamnya terdapat beberapa atribut yang dapat digunakan untuk menambahkan interpolasi saat transisi berlangsung.<\/p>\n<ul>\n<li>\n<h3><b>CustomAttribute<\/b><\/h3>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\">Elemen ini akan digunakan untuk menentukan transisi pada atribut yang tidak terkait dengan atribut posisi atau atribut dari sebuah <i>View<\/i>.<\/p>\n<ul>\n<li>\n<h3><b>Keyframe<\/b><\/h3>\n<\/li>\n<\/ul>\n<p style=\"padding-left: 40px;\">Ini yang menarik dalam penggunaan\u00a0<b><i>MotionLayout<\/i><\/b> untuk menerapkan transisi. Bisa melakukan perubahan di point tertentu saat transisi berlangsung dengan memanfaatkan <i>keyframe<\/i>.<\/p>\n<h1><strong>Dukungan penuh Android Studio<\/strong><\/h1>\n<p>Sebelum mencoba membuat proyek untuk menerapkan <i>MotionLayout <\/i>akan\u00a0memperlihatkan terlebih dahulu salah satu dukungan penuh Android Studio untuk penerapan <i>MotionLayout<\/i>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7030 aligncenter\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/MotionLayout-android.gif\" alt=\"\" width=\"1490\" height=\"941\" \/><\/p>\n<p><strong>Motion Editor<\/strong> 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.<\/p>\n<h1><strong>Penerapan MotionLayout<\/strong><\/h1>\n<h3><strong>1. Buka berkas build.gradle\u00a0<\/strong><\/h3>\n<p>Buka berkas build.grandle dan ubah versi dari <b><i>constraintlayout<\/i><\/b> menjadi seperti berikut :<\/p>\n<pre>implementation <span class=\"crayon-s \" style=\"color: #ff0000;\">'androidx.constraintlayout:constraintlayout:2.0.0-rc1'<\/span><\/pre>\n<p>Setelah diubah, lakukan\u00a0<i>sync now\u00a0<\/i>\u00a0dan tunggu hingga proses sinkronisasi selesai.<\/p>\n<h3><strong>2. Buka berkas\u00a0activity_main.xml<\/strong><\/h3>\n<p>Buka berkas activity_main.xml dan ubah\u00a0<i>root parent<\/i>-nya menjadi\u00a0<b>MotionLayout<\/b> seperti berikut :<\/p>\n<pre id=\"crayon-5f961f41e4f96114565392-1\" class=\"crayon-line\"><span class=\"crayon-ta\">&lt;?<\/span><span class=\"crayon-e\">xml <\/span><span class=\"crayon-i\">version<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\" style=\"color: #ff0000;\">\"1.0\"<\/span> <span class=\"crayon-i\">encoding<\/span><span class=\"crayon-o\">=<\/span><span style=\"color: #ff0000;\"><span class=\"crayon-s\">\"utf-8\"<\/span><span class=\"crayon-ta\">?&gt;<\/span><\/span>\r\n<strong><span class=\"crayon-r \">&lt;androidx.constraintlayout.motion.widget.Motio<\/span><span class=\"crayon-r \">nLayout <\/span><\/strong>xmlns<span style=\"color: #008000;\"><span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">android<\/span><\/span><span class=\"crayon-o\">=<\/span><span style=\"color: #ff0000;\"><span class=\"crayon-s \">\"http:\/\/schemas.androi<\/span>d.com\/apk\/res\/android\"<\/span>\r\n   <span style=\"color: #008000;\"><span style=\"color: #000000;\">xmlns<\/span><span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">app<\/span><\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \" style=\"color: #ff0000;\">\"http:\/\/schemas.android.com\/apk\/res-auto\"<\/span>\r\n   <span style=\"color: #008000;\"><span style=\"color: #000000;\">xmlns<\/span><span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">tools<\/span><\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \" style=\"color: #ff0000;\">\"http:\/\/schemas.android.com\/tools\"<\/span>\r\n   <span style=\"color: #008000;\"><span style=\"color: #000000;\">android<\/span><span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \" style=\"color: #ff0000;\">\"@+id\/mainLayout\"<\/span>\r\n   <span style=\"color: #008000;\"><span style=\"color: #000000;\">android<\/span><span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \" style=\"color: #ff0000;\">\"match_parent\"<\/span>\r\n   android<span style=\"color: #008000;\"><span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \" style=\"color: #ff0000;\">\"match_parent\"<\/span>\r\n   app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \" style=\"color: #008000;\">layoutDescription<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \" style=\"color: #ff0000;\">\"@xml\/activity_main_scene\"<\/span>\r\n   tools<span style=\"color: #008000;\"><span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">context<\/span><\/span><span class=\"crayon-o\">=<\/span><span style=\"color: #ff0000;\"><span class=\"crayon-s \">\".MainActivity\"<\/span><span class=\"crayon-r \">&gt;<\/span><\/span>\r\n\r\n<strong>&lt;\/androidx.constraintlayout.motion.widget.MotionLayout&gt;<\/strong><\/pre>\n<p>Setelah itu, lengkapi kode di dalamnya seperti di bawah ini :<\/p>\n<div class=\"crayon-main\">\n<table class=\"crayon-table table table-bordered table-striped\">\n<tbody>\n<tr class=\"crayon-row\">\n<td class=\"crayon-nums \" data-settings=\"show\">\n<div class=\"crayon-nums-content\">\n<pre class=\"crayon-num\" data-line=\"crayon-5f961f41e4f97909955676-1\">1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n35\r\n36\r\n37\r\n38\r\n39\r\n40\r\n41\r\n42\r\n43\r\n44\r\n45\r\n46\r\n47\r\n48\r\n49\r\n50\r\n51\r\n52\r\n53\r\n54\r\n55\r\n56\r\n57\r\n58\r\n59\r\n60\r\n61\r\n62\r\n63\r\n64\r\n65\r\n66\r\n67\r\n68\r\n69\r\n70\r\n71\r\n72\r\n73\r\n74\r\n75\r\n76\r\n77\r\n78\r\n79\r\n80\r\n81\r\n82\r\n83\r\n84\r\n85\r\n86\r\n87\r\n88\r\n89\r\n90\r\n91\r\n92\r\n93\r\n94\r\n95\r\n96\r\n97\r\n98\r\n99\r\n100\r\n101\r\n102\r\n103\r\n104\r\n105\r\n106\r\n107\r\n108\r\n109\r\n110<\/pre>\n<\/div>\n<\/td>\n<td class=\"crayon-code\">\n<div class=\"crayon-pre\">\n<pre id=\"crayon-5f961f41e4f97909955676-1\" class=\"crayon-line\"><span class=\"crayon-ta\">&lt;?<\/span><span class=\"crayon-e\">xml <\/span><span class=\"crayon-i\">version<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">\"1.0\"<\/span> <span class=\"crayon-i\">encoding<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">\"utf-8\"<\/span><span class=\"crayon-ta\">?&gt;<\/span>\r\n<span class=\"crayon-r \">&lt;androidx.constraintlayout.motion.widget.MotionLayout <\/span>xmlns<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">android<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"http:\/\/schemas.android.com\/apk\/res\/android\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0 <\/span>xmlns<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">app<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"http:\/\/schemas.android.com\/apk\/res-auto\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0 <\/span>xmlns<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">tools<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"http:\/\/schemas.android.com\/tools\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/mainLayout\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"match_parent\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"match_parent\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layoutDescription<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@xml\/activity_main_scene\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0 <\/span>tools<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">context<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\".MainActivity\"<\/span><span class=\"crayon-r \">&gt;<\/span>\r\n<span class=\"crayon-i \">\r\n \u00a0 <\/span><span class=\"crayon-r \">&lt;TextView<\/span>\r\n<span class=\"crayon-r \"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/mainText\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginTop<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"64dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">fontFamily<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@font\/roboto_thin\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">text<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"Hi!\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">textColor<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"#1C1C1C\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">textSize<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"70sp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintEnd_toEndOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintTop_toTopOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n<span class=\"crayon-i \">\r\n \u00a0 <\/span><span class=\"crayon-r \">&lt;TextView<\/span>\r\n<span class=\"crayon-r \"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/mainMessage\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginTop<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"16dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">fontFamily<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@font\/roboto_light\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">text<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"Nice to meet you :D\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">textSize<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"30sp\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintEnd_toEndOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintTop_toBottomOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/mainText\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n<span class=\"crayon-i \">\r\n \u00a0 <\/span><span class=\"crayon-r \">&lt;ImageView<\/span>\r\n<span class=\"crayon-r \"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/ivCollapseSign\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\">  \u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginTop<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"80dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">alpha<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"0.4\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">tint<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"#000\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintEnd_toEndOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/mainMessage\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/mainMessage\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintTop_toBottomOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/mainMessage\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">srcCompat<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@drawable\/ic_collapse\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n\r\n<span class=\"crayon-i \"> \u00a0 <\/span><span class=\"crayon-r \">&lt;androidx.constraintlayout.utils.widget.ImageFilterView<\/span>\r\n<span class=\"crayon-r \"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span>\r\n<span class=\"crayon-h\">  \u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"0dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"50dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginStart<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"16dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginEnd<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"16dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginBottom<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"32dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">background<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"#00455A\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">fitsSystemWindows<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"true\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintBottom_toBottomOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintEnd_toEndOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintHorizontal_bias<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"0.0\"<\/span>\r\n<span class=\"crayon-h\">  \u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n\r\n<span class=\"crayon-i \"> \u00a0 <\/span><span class=\"crayon-r \">&lt;ImageButton<\/span>\r\n<span class=\"crayon-r \"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/btnCollapse\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"45dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"45dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginStart<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"24dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">alpha<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"0\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">background<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@drawable\/ic_collapse\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintBottom_toBottomOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintTop_toTopOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n<span class=\"crayon-i \">\r\n \u00a0 <\/span><span class=\"crayon-r \">&lt;ImageView<\/span>\r\n<span class=\"crayon-r \"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/imageEmojiBottom\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"35dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"35dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintBottom_toBottomOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintEnd_toEndOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintTop_toTopOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">srcCompat<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@drawable\/ic_emoji\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n\r\n<span class=\"crayon-i \"> \u00a0 <\/span><span class=\"crayon-r \">&lt;TextView<\/span>\r\n<span class=\"crayon-r \">  \u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/collapseTextMessage\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"\r\n<\/span><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginBottom<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"200dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">fontFamily<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@font\/roboto_light\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">gravity<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"center\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">text<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"Don\\'t tell anybody about this. Just you and me\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">textColor<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"#A6FFFFFF\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">textSize<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"20sp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintBottom_toBottomOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintEnd_toEndOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n\r\n<span class=\"crayon-i \"> \u00a0 <\/span><span class=\"crayon-r \">&lt;TextView<\/span>\r\n<span class=\"crayon-r \">  \u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/collapseMainText\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginBottom<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"8dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">fontFamily<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@font\/roboto_light\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">text<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"Yeay, you found secret!\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">textColor<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"#fff\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">textSize<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"30sp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintBottom_toTopOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/collapseTextMessage\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintEnd_toEndOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>app<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n\r\n<span class=\"crayon-r \">&lt;\/androidx.constraintlayout.motion.widget.MotionLayout&gt;<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Kode yang sudah ditambahkan di atas terdapat Widget yang mungkin belum pernah dilihat sebelumnya, yaitu <b>ImageFilterView<\/b>.\u00a0<b>ImageFilterView<\/b> adalah sebuah Widget turunan dari <b>ImageView<\/b> di mana bisa melakukan transformasi seperti menetapkan <em>rounded<\/em> dan <em>filtering<\/em> dengan\u00a0cara yang sederhana.<\/p>\n<p>Jika masih ada eror di attribut\u00a0<b>app:layoutDescription=\u201d\u2026\u201d<\/b>\u00a0pada\u00a0<em>root parent <\/em>tidak perlu khawatir, tinggal <em><i>Alt + Enter <\/i><\/em>untuk membuat berkas yang dibutuhkan dan masalah selesai. Contohnya seperti berikut :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7031 aligncenter\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/root-parent.gif\" alt=\"\" width=\"1490\" height=\"941\" \/><\/p>\n<h1><strong>Mengatur Motion Scene<\/strong><\/h1>\n<p>Berkas yang dibuat barusan adalah berkas <i>motion scene<\/i> yang akan digunakan untuk menetapkan transisi pada View. Buka berkas tersebut kemudian ubah dan tambahkan konfigurasi <em>transition<\/em> dan <i>constraint set<\/i> seperti berikut :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7032 aligncenter\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/konfigurasi-transition-dan-constraint-set.png\" alt=\"\" width=\"666\" height=\"352\" srcset=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/konfigurasi-transition-dan-constraint-set.png 666w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/konfigurasi-transition-dan-constraint-set-640x338.png 640w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/konfigurasi-transition-dan-constraint-set-400x211.png 400w\" sizes=\"auto, (max-width: 666px) 100vw, 666px\" \/><\/p>\n<p>Pastikan kembali perubahan kode di atas sudah sesuai dengan kode yang telah ditambahkan. Jika sudah sesuai, fokus pada <b><i>ConstraintSet<\/i><\/b>\u00a0dengan id\u00a0<b><i>layoutCollapse<\/i><\/b> kemudian tambahkan kode berikut :<\/p>\n<div class=\"crayon-main\">\n<table class=\"crayon-table table table-bordered table-striped\">\n<tbody>\n<tr class=\"crayon-row\">\n<td class=\"crayon-nums \" data-settings=\"show\">\n<div class=\"crayon-nums-content\">\n<pre class=\"crayon-num\" data-line=\"crayon-5f961f41e4f9b508678745-1\">1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n35\r\n36\r\n37\r\n38\r\n39\r\n40\r\n41\r\n42\r\n43\r\n44\r\n45\r\n46\r\n47\r\n48\r\n49\r\n50\r\n51\r\n52\r\n53\r\n54\r\n55\r\n56\r\n57\r\n58\r\n59\r\n60\r\n61\r\n62\r\n63\r\n64<\/pre>\n<\/div>\n<\/td>\n<td class=\"crayon-code\">\n<div class=\"crayon-pre\">\n<pre id=\"crayon-5f961f41e4f9b508678745-1\" class=\"crayon-line\"><span class=\"crayon-r \">&lt;ConstraintSet <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/layoutCollapse\"<\/span><span class=\"crayon-r \">&gt;<\/span>\r\n<span class=\"crayon-i \"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-r \">&lt;Constraint<\/span>\r\n<span class=\"crayon-r \"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"75dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"75dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginStart<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"32dp\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginLeft<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"32dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginEnd<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"32dp\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginRight<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"32dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginBottom<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"64dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintBottom_toBottomOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintEnd_toEndOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span><span class=\"crayon-r \">&gt;<\/span>\r\n<span class=\"crayon-i \"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-r \">&lt;CustomAttribute<\/span>\r\n<span class=\"crayon-r \">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">attributeName<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"Round\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">customDimension<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"35dp\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n<span class=\"crayon-i \">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-r \">&lt;\/Constraint&gt;<\/span>\r\n<span class=\"crayon-i \">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-r \">&lt;Constraint<\/span>\r\n<span class=\"crayon-r \"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/btnCollapse\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"30dp\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"30dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginStart<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"24dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">alpha<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"0\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintBottom_toBottomOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintTop_toTopOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n<span class=\"crayon-i \"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-r \">&lt;Constraint<\/span>\r\n<span class=\"crayon-r \"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/collapseMainText\"\r\n<\/span><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginBottom<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"8dp\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">alpha<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"0\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintBottom_toTopOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/collapseTextMessage\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintEnd_toEndOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n<span class=\"crayon-i \">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-r \">&lt;Constraint<\/span>\r\n<span class=\"crayon-r \">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/collapseTextMessage\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginStart<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"64dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginEnd<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"64dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginBottom<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"100dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">alpha<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"0\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintBottom_toBottomOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintEnd_toEndOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n<span class=\"crayon-i \"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-r \">&lt;Constraint<\/span>\r\n<span class=\"crayon-r \"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/mainText\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginTop<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"160dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintEnd_toEndOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintTop_toTopOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n<span class=\"crayon-i \">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-r \">&lt;Constraint<\/span>\r\n<span class=\"crayon-r \"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/ivCollapseSign\"<\/span>\r\n<span class=\"crayon-h\">  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginTop<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"80dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">alpha<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"0.4\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintEnd_toEndOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/mainMessage\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/mainMessage\"<\/span>\r\n<span class=\"crayon-h\">  \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintTop_toBottomOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/mainMessage\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n<span class=\"crayon-i \"> \u00a0\u00a0\u00a0<\/span><span class=\"crayon-r \">&lt;\/ConstraintSet&gt;<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Selanjutnya untuk\u00a0<b><i>ConstraintSet<\/i><\/b>\u00a0dengan id\u00a0<b><i>layoutExpanded<\/i><\/b>, lengkapi kodenya menjadi seperti berikut :<\/p>\n<div class=\"crayon-main\">\n<table class=\"crayon-table table table-bordered table-striped\">\n<tbody>\n<tr class=\"crayon-row\">\n<td class=\"crayon-nums \" data-settings=\"show\">\n<div class=\"crayon-nums-content\">\n<pre class=\"crayon-num\" data-line=\"crayon-5f961f41e4f9c334220432-1\">1\r\n2\r\n3\r\n4\r\n5\r\n6\r\n7\r\n8\r\n9\r\n10\r\n11\r\n12\r\n13\r\n14\r\n15\r\n16\r\n17\r\n18\r\n19\r\n20\r\n21\r\n22\r\n23\r\n24\r\n25\r\n26\r\n27\r\n28\r\n29\r\n30\r\n31\r\n32\r\n33\r\n34\r\n35\r\n36\r\n37\r\n38\r\n39\r\n40\r\n41\r\n42\r\n43\r\n44\r\n45\r\n46\r\n47\r\n48\r\n49\r\n50\r\n51\r\n52\r\n53\r\n54\r\n55\r\n56\r\n57\r\n58\r\n59\r\n60\r\n61\r\n62\r\n63\r\n64\r\n65<\/pre>\n<\/div>\n<\/td>\n<td class=\"crayon-code\">\n<div class=\"crayon-pre\">\n<pre id=\"crayon-5f961f41e4f9c334220432-1\" class=\"crayon-line\"><span class=\"crayon-r \">&lt;ConstraintSet <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/layoutExpanded\"<\/span><span class=\"crayon-r \">&gt;<\/span>\r\n<span class=\"crayon-i \"> \u00a0 <\/span><span class=\"crayon-r \">&lt;Constraint<\/span>\r\n<span class=\"crayon-r \"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"0dp\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"0dp\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginStart<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"24dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginLeft<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"24dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginTop<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"32dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginEnd<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"24dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginRight<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"24dp\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginBottom<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"8dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintBottom_toBottomOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintEnd_toEndOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\">  \u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintTop_toTopOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span><span class=\"crayon-r \">&gt;<\/span>\r\n<span class=\"crayon-i \"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span class=\"crayon-r \">&lt;CustomAttribute<\/span>\r\n<span class=\"crayon-r \"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">attributeName<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"Round\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">customDimension<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"10dp\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n<span class=\"crayon-i \">\u00a0\u00a0 <\/span><span class=\"crayon-r \">&lt;\/Constraint&gt;<\/span>\r\n<span class=\"crayon-i \"> \u00a0 <\/span><span class=\"crayon-r \">&lt;Constraint<\/span>\r\n<span class=\"crayon-r \"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/btnCollapse\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"30dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"30dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginStart<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"24dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginTop<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"24dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">alpha<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"1\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintTop_toTopOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n<span class=\"crayon-i \"> \u00a0 <\/span><span class=\"crayon-r \">&lt;Constraint<\/span>\r\n<span class=\"crayon-r \"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/imageEmojiBottom\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"120dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"120dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginTop<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"150dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintEnd_toEndOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintTop_toTopOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/bottomContainer\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n<span class=\"crayon-i \"> \u00a0 <\/span><span class=\"crayon-r \">&lt;Constraint<\/span>\r\n<span class=\"crayon-r \"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/mainText\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginTop<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"200dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">alpha<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"0.2\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintEnd_toEndOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintTop_toTopOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n<span class=\"crayon-i \"> \u00a0 <\/span><span class=\"crayon-r \">&lt;Constraint<\/span>\r\n<span class=\"crayon-r \">  \u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/collapseMainText\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginTop<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"32dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintEnd_toEndOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintHorizontal_bias<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"0.498\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintTop_toBottomOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/imageEmojiBottom\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n<span class=\"crayon-i \">\u00a0\u00a0 <\/span><span class=\"crayon-r \">&lt;Constraint<\/span>\r\n<span class=\"crayon-r \">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/collapseTextMessage\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_width<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"0dp\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_height<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"wrap_content\"<\/span>\r\n<span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginStart<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"64dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginTop<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"24dp\"\r\n<\/span><span class=\"crayon-h\">  \u00a0\u00a0\u00a0\u00a0 <\/span>android<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_marginEnd<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"64dp\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintEnd_toEndOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintStart_toStartOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"parent\"<\/span>\r\n<span class=\"crayon-h\"> \u00a0\u00a0\u00a0\u00a0\u00a0 <\/span>motion<span class=\"crayon-o\">:<\/span><span class=\"crayon-e \">layout_constraintTop_toBottomOf<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">\"@+id\/collapseMainText\"<\/span><span class=\"crayon-r \"> \/&gt;<\/span>\r\n<span class=\"crayon-r \">&lt;\/ConstraintSet&gt;<\/span><\/pre>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Setelah selesai, selanjutnya menentukan interaksi seperti apa jika <i>motion<\/i> ingin dijalankan. Masih pada berkas yang sama, fokus pada elemen\u00a0<b><i>Transition<\/i><\/b> dan lengkapi kodenya menjadi seperti berikut :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7033 aligncenter\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Transition.png\" alt=\"\" width=\"675\" height=\"207\" srcset=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Transition.png 675w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Transition-640x196.png 640w, https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/Transition-400x123.png 400w\" sizes=\"auto, (max-width: 675px) 100vw, 675px\" \/><\/p>\n<p>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 <b><i>activity_main.xml<\/i><\/b>\u00a0dan masuk pada tab\u00a0<b><i>Design<\/i><\/b>. Pada Android Studio akan tampil preview layout yang sudah dibuat. Untuk menjalankan preview bisa mengikuti cara berikut :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7034 aligncenter\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/menjalankan-preview.gif\" alt=\"\" width=\"1553\" height=\"843\" \/><\/p>\n<p>Jika sudah sesuai bisa langsung menjalankannya pada emulator atau device yang digunakan. Kurang lebih akan seperti berikut saat dijalankan :<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-7037 aligncenter\" src=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/tampilan-emulator.gif\" alt=\"\" width=\"488\" height=\"885\" \/><\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-right kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;right&quot;,&quot;id&quot;:&quot;7026&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;1&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;0&quot;,&quot;greet&quot;:&quot;Jadilah yang pertama untuk memberi nilai&quot;,&quot;legend&quot;:&quot;5\\\/5 - (1 vote)&quot;,&quot;size&quot;:&quot;22&quot;,&quot;title&quot;:&quot;Mengenal Tentang MotionLayout&quot;,&quot;width&quot;:&quot;110&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} - ({count} {votes})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 110px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 0px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 22px; height: 22px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 17.6px;\">\n            5\/5 - (1 vote)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Apa itu MotionLayout ? MotionLayout adalah jenis tata letak yang dapat digunakan untuk mengelola motion\u00a0dan animasi pada widget yang berada di dalam aplikasi. Seperti yang sudah disebutkan sebelumnya, karena\u00a0MotionLayout\u00a0merupakan turunan dari kelas\u00a0ConstraintLayout, maka teman-teman akan mudah menerapkannya jika sebelumnya sudah familiar menyusun tampilan aplikasi menggunakan\u00a0ConstraintLayout. Hal menarik lainnya adalah bahwa MotionLayout ini mendukung kompatibilitas dari [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":7055,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rop_custom_images_group":[],"rop_custom_messages_group":[],"rop_publish_now":"initial","rop_publish_now_accounts":{"twitter_2392824914_2392824914":""},"rop_publish_now_history":[],"rop_publish_now_status":"pending","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[3],"tags":[2091,2088,2089,2090],"class_list":["post-7026","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","tag-mengatur-motion-scene","tag-motionlayout-adalah","tag-motionlayout-dukungan-penuh-android-studio","tag-penerapan-motionlayout"],"featured_image_src":{"landsacpe":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/MOTIONLAYOUT-1030x445.png",1030,445,true],"list":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/MOTIONLAYOUT-463x348.png",463,348,true],"medium":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/MOTIONLAYOUT-300x162.png",300,162,true],"full":["https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/MOTIONLAYOUT.png",1030,557,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Mengenal Tentang MotionLayout - Hosteko Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mengenal Tentang MotionLayout - Hosteko Blog\" \/>\n<meta property=\"og:description\" content=\"Apa itu MotionLayout ? MotionLayout adalah jenis tata letak yang dapat digunakan untuk mengelola motion\u00a0dan animasi pada widget yang berada di dalam aplikasi. Seperti yang sudah disebutkan sebelumnya, karena\u00a0MotionLayout\u00a0merupakan turunan dari kelas\u00a0ConstraintLayout, maka teman-teman akan mudah menerapkannya jika sebelumnya sudah familiar menyusun tampilan aplikasi menggunakan\u00a0ConstraintLayout. Hal menarik lainnya adalah bahwa MotionLayout ini mendukung kompatibilitas dari [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout\" \/>\n<meta property=\"og:site_name\" content=\"Hosteko Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-10-26T09:07:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/MOTIONLAYOUT.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1030\" \/>\n\t<meta property=\"og:image:height\" content=\"557\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Risa Y\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Risa Y\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout#article\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout\"},\"author\":{\"name\":\"Risa Y\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b\"},\"headline\":\"Mengenal Tentang MotionLayout\",\"datePublished\":\"2020-10-26T09:07:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout\"},\"wordCount\":536,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/MOTIONLAYOUT.png\",\"keywords\":[\"Mengatur Motion Scene\",\"motionlayout adalah\",\"motionlayout Dukungan penuh Android Studio\",\"Penerapan MotionLayout\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout\",\"url\":\"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout\",\"name\":\"Mengenal Tentang MotionLayout - Hosteko Blog\",\"isPartOf\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout#primaryimage\"},\"thumbnailUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/MOTIONLAYOUT.png\",\"datePublished\":\"2020-10-26T09:07:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout#primaryimage\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/MOTIONLAYOUT.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/MOTIONLAYOUT.png\",\"width\":1030,\"height\":557},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hosteko.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mengenal Tentang MotionLayout\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hosteko.com\/blog\/#website\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"name\":\"Hosteko Blog\",\"description\":\"Berita &amp; Informasi Dunia IT\",\"publisher\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hosteko.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/hosteko.com\/blog\/#organization\",\"name\":\"HOSTEKO\",\"url\":\"https:\/\/hosteko.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"contentUrl\":\"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png\",\"width\":195,\"height\":57,\"caption\":\"HOSTEKO\"},\"image\":{\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b\",\"name\":\"Risa Y\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g\",\"caption\":\"Risa Y\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mengenal Tentang MotionLayout - Hosteko Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout","og_locale":"en_US","og_type":"article","og_title":"Mengenal Tentang MotionLayout - Hosteko Blog","og_description":"Apa itu MotionLayout ? MotionLayout adalah jenis tata letak yang dapat digunakan untuk mengelola motion\u00a0dan animasi pada widget yang berada di dalam aplikasi. Seperti yang sudah disebutkan sebelumnya, karena\u00a0MotionLayout\u00a0merupakan turunan dari kelas\u00a0ConstraintLayout, maka teman-teman akan mudah menerapkannya jika sebelumnya sudah familiar menyusun tampilan aplikasi menggunakan\u00a0ConstraintLayout. Hal menarik lainnya adalah bahwa MotionLayout ini mendukung kompatibilitas dari [&hellip;]","og_url":"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout","og_site_name":"Hosteko Blog","article_published_time":"2020-10-26T09:07:49+00:00","og_image":[{"width":1030,"height":557,"url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/MOTIONLAYOUT.png","type":"image\/png"}],"author":"Risa Y","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Risa Y","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout#article","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout"},"author":{"name":"Risa Y","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b"},"headline":"Mengenal Tentang MotionLayout","datePublished":"2020-10-26T09:07:49+00:00","mainEntityOfPage":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout"},"wordCount":536,"commentCount":0,"publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"image":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/MOTIONLAYOUT.png","keywords":["Mengatur Motion Scene","motionlayout adalah","motionlayout Dukungan penuh Android Studio","Penerapan MotionLayout"],"articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout","url":"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout","name":"Mengenal Tentang MotionLayout - Hosteko Blog","isPartOf":{"@id":"https:\/\/hosteko.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout#primaryimage"},"image":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout#primaryimage"},"thumbnailUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/MOTIONLAYOUT.png","datePublished":"2020-10-26T09:07:49+00:00","breadcrumb":{"@id":"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout#primaryimage","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/MOTIONLAYOUT.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/MOTIONLAYOUT.png","width":1030,"height":557},{"@type":"BreadcrumbList","@id":"https:\/\/hosteko.com\/blog\/mengenal-tentang-motionlayout#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hosteko.com\/blog"},{"@type":"ListItem","position":2,"name":"Mengenal Tentang MotionLayout"}]},{"@type":"WebSite","@id":"https:\/\/hosteko.com\/blog\/#website","url":"https:\/\/hosteko.com\/blog\/","name":"Hosteko Blog","description":"Berita &amp; Informasi Dunia IT","publisher":{"@id":"https:\/\/hosteko.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hosteko.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/hosteko.com\/blog\/#organization","name":"HOSTEKO","url":"https:\/\/hosteko.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","contentUrl":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2019\/04\/logo-hosteko.png","width":195,"height":57,"caption":"HOSTEKO"},"image":{"@id":"https:\/\/hosteko.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/c1d3dbd7c27bd3574f8c7042165a660b","name":"Risa Y","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hosteko.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7eac241dffbc583c56ba1ff19703f5623dab2b6a88bbb0583e815230564dac5e?s=96&d=mm&r=g","caption":"Risa Y"}}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/hosteko.com\/htk-blog\/wp-content\/uploads\/2020\/10\/MOTIONLAYOUT.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/7026","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/comments?post=7026"}],"version-history":[{"count":0,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/posts\/7026\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media\/7055"}],"wp:attachment":[{"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/media?parent=7026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/categories?post=7026"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hosteko.com\/blog\/wp-json\/wp\/v2\/tags?post=7026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}