From be2ced9295e8ef7409abe6751cc99112acccf4cf Mon Sep 17 00:00:00 2001
From: GeorgCantor <cupsman1986@gmail.com>
Date: Fri, 11 Sep 2020 21:30:06 +0300
Subject: [PATCH] Added MotionLayout for transition animation

---
 .../newsapp/news/ui/activity/NewsActivity.kt  |  1 -
 app/src/main/res/layout/activity_main.xml     |  1 +
 app/src/main/res/layout/row_news_article.xml  | 90 ++++++++++---------
 .../main/res/xml/row_news_article_scene.xml   | 26 ++++++
 4 files changed, 77 insertions(+), 41 deletions(-)
 create mode 100644 app/src/main/res/xml/row_news_article_scene.xml

diff --git a/app/src/main/java/com/akshay/newsapp/news/ui/activity/NewsActivity.kt b/app/src/main/java/com/akshay/newsapp/news/ui/activity/NewsActivity.kt
index 722afc4..2a6299c 100644
--- a/app/src/main/java/com/akshay/newsapp/news/ui/activity/NewsActivity.kt
+++ b/app/src/main/java/com/akshay/newsapp/news/ui/activity/NewsActivity.kt
@@ -32,7 +32,6 @@ class NewsActivity : BaseActivity() {
 
         val adapter = NewsArticlesAdapter { toast("Clicked on item") }
         newsList.adapter = adapter
-        newsList.layoutManager = LinearLayoutManager(this)
 
         // Update the UI on state change
         newsArticleViewModel.getNewsArticles().observeNotNull(this) { state ->
diff --git a/app/src/main/res/layout/activity_main.xml b/app/src/main/res/layout/activity_main.xml
index 8e99f2b..880f12a 100644
--- a/app/src/main/res/layout/activity_main.xml
+++ b/app/src/main/res/layout/activity_main.xml
@@ -13,6 +13,7 @@
         android:id="@+id/newsList"
         android:layout_width="0dp"
         android:layout_height="0dp"
+        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintLeft_toLeftOf="parent"
         app:layout_constraintRight_toRightOf="parent"
diff --git a/app/src/main/res/layout/row_news_article.xml b/app/src/main/res/layout/row_news_article.xml
index a1075cd..1a6b0bd 100644
--- a/app/src/main/res/layout/row_news_article.xml
+++ b/app/src/main/res/layout/row_news_article.xml
@@ -1,60 +1,70 @@
 <?xml version="1.0" encoding="utf-8"?>
-<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
+<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"
-    style="@style/NewsArticle.View"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    app:cardElevation="@dimen/card_elevation">
+    app:layoutDescription="@xml/row_news_article_scene">
 
-    <RelativeLayout
+    <androidx.cardview.widget.CardView
+        android:id="@+id/cardView"
+        style="@style/NewsArticle.View"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:background="@drawable/drawable_list_item">
+        app:cardElevation="@dimen/card_elevation"
+        app:layout_constraintTop_toTopOf="parent">
 
-        <!-- News block -->
         <RelativeLayout
-            android:id="@+id/newsImageView"
+            android:id="@+id/rootLayout"
             android:layout_width="match_parent"
-            android:layout_height="180sp">
+            android:layout_height="wrap_content"
+            android:background="@drawable/drawable_list_item">
 
-            <ImageView
-                android:id="@+id/newsImage"
-                style="@style/NewsArticle.Image"
+            <!-- News block -->
+            <RelativeLayout
+                android:id="@+id/newsImageView"
                 android:layout_width="match_parent"
-                android:layout_height="@dimen/image_size"
-                android:contentDescription="@string/news_image"
-                tools:src="@drawable/tools_placeholder" />
+                android:layout_height="180sp">
+
+                <ImageView
+                    android:id="@+id/newsImage"
+                    style="@style/NewsArticle.Image"
+                    android:layout_width="match_parent"
+                    android:layout_height="@dimen/image_size"
+                    android:contentDescription="@string/news_image"
+                    tools:src="@drawable/tools_placeholder" />
+
+                <TextView
+                    android:id="@+id/newsAuthor"
+                    style="@style/NewsArticle.Author"
+                    android:layout_width="match_parent"
+                    android:layout_height="wrap_content"
+                    android:layout_alignParentBottom="true"
+                    tools:text="ABC News" />
 
+            </RelativeLayout>
+
+            <!-- News Title -->
             <TextView
-                android:id="@+id/newsAuthor"
-                style="@style/NewsArticle.Author"
+                android:id="@+id/newsTitle"
+                style="@style/NewsArticle.Title"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_alignParentBottom="true"
-                tools:text="ABC News" />
+                android:layout_below="@+id/newsImageView"
+                tools:text="Elon Musk says Tesla can't yet launch in India" />
 
-        </RelativeLayout>
+            <!-- Publish at -->
+            <TextView
+                android:id="@+id/newsPublishedAt"
+                style="@style/NewsArticle.PublishedAt"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_below="@+id/newsTitle"
+                android:layout_marginStart="@dimen/normal_padding"
+                android:layout_marginLeft="@dimen/normal_padding"
+                tools:text="@string/str_test_date" />
 
-        <!-- News Title -->
-        <TextView
-            android:id="@+id/newsTitle"
-            style="@style/NewsArticle.Title"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_below="@+id/newsImageView"
-            tools:text="Elon Musk says Tesla can't yet launch in India" />
-
-        <!-- Publish at -->
-        <TextView
-            android:id="@+id/newsPublishedAt"
-            style="@style/NewsArticle.PublishedAt"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:layout_below="@+id/newsTitle"
-            android:layout_marginStart="@dimen/normal_padding"
-            android:layout_marginLeft="@dimen/normal_padding"
-            tools:text="@string/str_test_date" />
+        </RelativeLayout>
+    </androidx.cardview.widget.CardView>
 
-    </RelativeLayout>
-</androidx.cardview.widget.CardView>
\ No newline at end of file
+</androidx.constraintlayout.motion.widget.MotionLayout>
\ No newline at end of file
diff --git a/app/src/main/res/xml/row_news_article_scene.xml b/app/src/main/res/xml/row_news_article_scene.xml
new file mode 100644
index 0000000..12229df
--- /dev/null
+++ b/app/src/main/res/xml/row_news_article_scene.xml
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <ConstraintSet android:id="@+id/start">
+        <Constraint android:id="@+id/widget" />
+        <Constraint
+            android:id="@+id/cardView"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:layout_marginStart="300dp"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
+    </ConstraintSet>
+
+    <ConstraintSet android:id="@+id/end">
+        <Constraint android:id="@id/widget" />
+    </ConstraintSet>
+
+    <Transition
+        app:autoTransition="animateToEnd"
+        app:constraintSetEnd="@id/end"
+        app:constraintSetStart="@+id/start"
+        app:layoutDuringTransition="honorRequest" />
+
+</MotionScene>