Merge pull request #456 from vector-im/feature/fix_image_transition_overlap

Fix / Shared element transition overlap

vector/src/main/java/im/vector/riotx/features/home/room/detail/RoomDetailFragment.kt

@@ -22,6 +22,7 @@ import android.content.Context
 import android.content.Intent
 import android.graphics.drawable.ColorDrawable
 import android.net.Uri
+import android.os.Build
 import android.os.Bundle
 import android.os.Parcelable
 import android.text.Editable
@@ -35,6 +36,7 @@ import androidx.annotation.DrawableRes
 import androidx.appcompat.app.AlertDialog
 import androidx.core.app.ActivityOptionsCompat
 import androidx.core.content.ContextCompat
+import androidx.core.util.Pair
 import androidx.core.view.ViewCompat
 import androidx.core.view.forEach
 import androidx.lifecycle.ViewModelProviders
@@ -708,9 +710,21 @@ class RoomDetailFragment :
         // TODO Use navigator
 
         val intent = ImageMediaViewerActivity.newIntent(vectorBaseActivity, mediaData, ViewCompat.getTransitionName(view))
+        val pairs = ArrayList<Pair<View, String>>()
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
+            requireActivity().window.decorView.findViewById<View>(android.R.id.statusBarBackground)?.let {
+                pairs.add(Pair(it, Window.STATUS_BAR_BACKGROUND_TRANSITION_NAME))
+            }
+            requireActivity().window.decorView.findViewById<View>(android.R.id.navigationBarBackground)?.let {
+                pairs.add(Pair(it, Window.NAVIGATION_BAR_BACKGROUND_TRANSITION_NAME))
+            }
+        }
+        pairs.add(Pair(view, ViewCompat.getTransitionName(view) ?: ""))
+        pairs.add(Pair(roomToolbar, ViewCompat.getTransitionName(roomToolbar) ?: ""))
+        pairs.add(Pair(composerLayout, ViewCompat.getTransitionName(composerLayout) ?: ""))
+
         val bundle = ActivityOptionsCompat.makeSceneTransitionAnimation(
-                requireActivity(), view, ViewCompat.getTransitionName(view)
+                requireActivity(), *pairs.toTypedArray()).toBundle()
-                                         ?: "").toBundle()
         startActivity(intent, bundle)
     }
 

vector/src/main/res/layout/activity_image_media_viewer.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
@@ -10,22 +10,29 @@
         android:id="@+id/imageMediaViewerToolbar"
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
-        android:elevation="4dp" />
+        android:elevation="4dp"
+        android:transitionName="toolbar"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toTopOf="parent" />
 
 
     <FrameLayout
         android:layout_width="match_parent"
-        android:layout_height="match_parent">
+        android:layout_height="0dp"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="@id/imageMediaViewerToolbar">
 
         <ImageView
             android:id="@+id/imageTransitionView"
-            android:transitionName="imagePreview"
-            android:scaleType="fitCenter"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
-            tools:visibility="visible"
+            android:scaleType="fitCenter"
+            android:transitionName="imagePreview"
             android:visibility="gone"
-            />
+            tools:visibility="visible" />
 
         <com.github.piasy.biv.view.BigImageView
             android:id="@+id/imageMediaViewerImageView"
@@ -43,4 +50,13 @@
 
     </FrameLayout>
 
-</LinearLayout>
+    <FrameLayout
+        android:id="@+id/fakeContainerForTransition"
+        android:layout_width="match_parent"
+        android:layout_height="50dp"
+        android:transitionName="composer"
+        android:background="?riotx_background"
+        app:layout_constraintEnd_toEndOf="parent"
+        app:layout_constraintStart_toStartOf="parent"
+        app:layout_constraintTop_toBottomOf="parent" />
+</androidx.constraintlayout.widget.ConstraintLayout>

vector/src/main/res/layout/fragment_room_detail.xml

@@ -11,6 +11,7 @@
         style="@style/VectorToolbarStyle"
         android:layout_width="0dp"
         android:layout_height="?actionBarSize"
+        android:transitionName="toolbar"
         android:elevation="4dp"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent"
@@ -91,6 +92,8 @@
         android:id="@+id/composerLayout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
+        android:background="?riotx_background"
+        android:transitionName="composer"
         app:layout_constraintBottom_toBottomOf="parent"
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintStart_toStartOf="parent" />