Animate swipe down to close images

androidApp/src/main/java/bou/amine/apps/readerforselfossv2/android/fragments/ImageFragment.kt

@@ -4,6 +4,7 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.constraintlayout.motion.widget.MotionLayout
 import androidx.fragment.app.Fragment
 import bou.amine.apps.readerforselfossv2.android.databinding.FragmentImageBinding
 import com.bumptech.glide.Glide
@@ -27,11 +28,6 @@ class ImageFragment : Fragment() {
         _binding = FragmentImageBinding.inflate(inflater, container, false)
         val view = binding?.root
 
-        binding?.swipeRefreshLayout?.setProgressViewEndTarget(false, 0)
-        binding?.swipeRefreshLayout?.setOnRefreshListener {
-            activity?.finish()
-        }
-
         binding!!.photoView.visibility = View.VISIBLE
         Glide.with(requireActivity())
                 .asBitmap()
@@ -39,6 +35,26 @@ class ImageFragment : Fragment() {
                 .load(imageUrl)
                 .into(binding!!.photoView)
 
+        val transitionListener = object : MotionLayout.TransitionListener {
+            override fun onTransitionStarted(motionLayout: MotionLayout?, startId: Int, endId: Int) {
+                // Nothing
+            }
+
+            override fun onTransitionChange(motionLayout: MotionLayout?, startId: Int, endId: Int, progress: Float
+            ) {
+                // Nothing
+            }
+
+            override fun onTransitionCompleted(motionLayout: MotionLayout?, currentId: Int) {
+                activity?.finish()
+            }
+
+            override fun onTransitionTrigger(motionLayout: MotionLayout?, triggerId: Int, positive: Boolean, progress: Float) {
+                // Nothing
+            }
+        }
+        binding!!.root.setTransitionListener(transitionListener)
+
         return view
     }
 

androidApp/src/main/res/layout/fragment_image.xml

@@ -1,13 +1,10 @@
 <?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout 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"
+    android:id="@+id/container"
     android:layout_width="match_parent"
-    android:layout_height="match_parent">
+    android:layout_height="match_parent"
-
+    app:layoutDescription="@xml/image_close_scene">
-    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
-        android:id="@+id/swipeRefreshLayout"
-        android:layout_width="match_parent"
-        android:layout_height="match_parent">
 
         <com.github.chrisbanes.photoview.PhotoView
             android:id="@+id/photoView"
@@ -17,6 +14,5 @@
             android:adjustViewBounds="true"
             android:background="@drawable/checkerboard"
             app:srcCompat="@android:drawable/screen_background_dark" />
-    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
 
-</RelativeLayout>
+</androidx.constraintlayout.motion.widget.MotionLayout>

androidApp/src/main/res/xml/image_close_scene.xml

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:motion="http://schemas.android.com/apk/res-auto"
+    android:id="@+id/motionLayout">
+
+    <Transition
+        motion:constraintSetStart="@+id/start"
+        motion:constraintSetEnd="@+id/end"
+        motion:duration="1000"
+        motion:motionInterpolator="linear">
+
+        <OnSwipe
+            motion:touchRegionId="@+id/container"
+            motion:dragDirection="dragDown"
+            motion:onTouchUp="autoCompleteToStart"/>
+    </Transition>
+
+    <ConstraintSet android:id="@+id/start">
+
+        <Constraint
+            android:id="@id/photoView"
+            android:layout_width="match_parent"
+            android:layout_height="0dp"
+            motion:layout_constraintBottom_toBottomOf="parent"
+            motion:layout_constraintTop_toTopOf="parent">
+        </Constraint>
+    </ConstraintSet>
+
+    <ConstraintSet android:id="@+id/end">
+
+        <Constraint
+            android:id="@+id/photoView"
+            android:layout_width="100dp"
+            android:layout_height="100dp"
+            android:layout_marginBottom="32dp"
+            motion:layout_constraintStart_toStartOf="parent"
+            motion:layout_constraintBottom_toBottomOf="parent"
+            motion:layout_constraintEnd_toEndOf="parent">
+        </Constraint>
+    </ConstraintSet>
+</MotionScene>