Fixed cardview clipping in sharedElement transitions

app/src/main/java/code/name/monkey/retromusic/adapter/album/AlbumAdapter.kt

@@ -68,7 +68,7 @@ open class AlbumAdapter(
         return ViewHolder(view)
     }
 
-    private fun getAlbumTitle(album: Album): String? {
+    private fun getAlbumTitle(album: Album): String {
         return album.title
     }
 
@@ -88,7 +88,13 @@ open class AlbumAdapter(
         holder.itemView.isActivated = isChecked
         holder.title?.text = getAlbumTitle(album)
         holder.text?.text = getAlbumText(album)
-        ViewCompat.setTransitionName(holder.image!!, album.id.toString())
+        // Check if imageContainer exists so we can have a smooth transition without
+        // CardView clipping, if it doesn't exist in current layout set transition name to image instead.
+        if (holder.imageContainer != null) {
+            ViewCompat.setTransitionName(holder.imageContainer!!, album.id.toString())
+        } else {
+            ViewCompat.setTransitionName(holder.image!!, album.id.toString())
+        }
         loadAlbumCover(album, holder)
     }
 
@@ -177,7 +183,7 @@ open class AlbumAdapter(
                 toggleChecked(layoutPosition)
             } else {
                 image?.let {
-                    listener?.onAlbumClick(dataSet[layoutPosition].id, it)
+                    listener?.onAlbumClick(dataSet[layoutPosition].id, imageContainer ?: it)
                 }
             }
         }

app/src/main/java/code/name/monkey/retromusic/adapter/artist/ArtistAdapter.kt

@@ -85,12 +85,12 @@ class ArtistAdapter(
         holder.itemView.isActivated = isChecked
         holder.title?.text = artist.name
         holder.text?.hide()
-        holder.image?.let {
-            if (PreferenceUtil.albumArtistsOnly) {
-                ViewCompat.setTransitionName(it, artist.name)
-            } else {
-                ViewCompat.setTransitionName(it, artist.id.toString())
-            }
+        val transitionName =
+            if (PreferenceUtil.albumArtistsOnly) artist.name else artist.id.toString()
+        if (holder.imageContainer != null) {
+            ViewCompat.setTransitionName(holder.imageContainer!!, transitionName)
+        } else {
+            ViewCompat.setTransitionName(holder.image!!, transitionName)
         }
         loadArtistImage(artist, holder)
     }
@@ -169,9 +169,9 @@ class ArtistAdapter(
                 val artist = dataSet[layoutPosition]
                 image?.let {
                     if (PreferenceUtil.albumArtistsOnly && IAlbumArtistClickListener != null) {
-                        IAlbumArtistClickListener.onAlbumArtist(artist.name, it)
+                        IAlbumArtistClickListener.onAlbumArtist(artist.name, imageContainer ?: it)
                     } else {
-                        IArtistClickListener.onArtist(artist.id, it)
+                        IArtistClickListener.onArtist(artist.id, imageContainer ?: it)
                     }
                 }
             }

app/src/main/java/code/name/monkey/retromusic/adapter/base/MediaEntryViewHolder.java

@@ -16,6 +16,7 @@ package code.name.monkey.retromusic.adapter.base;
 
 import android.graphics.Color;
 import android.view.View;
+import android.widget.FrameLayout;
 import android.widget.ImageView;
 import android.widget.TextView;
 
@@ -50,6 +51,9 @@ public class MediaEntryViewHolder extends AbstractDraggableSwipeableItemViewHold
     @Nullable
     public MaterialCardView imageContainerCard;
 
+    @Nullable
+    public FrameLayout imageContainer;
+
     @Nullable
     public TextView imageText;
 
@@ -88,13 +92,13 @@ public class MediaEntryViewHolder extends AbstractDraggableSwipeableItemViewHold
         text2 = itemView.findViewById(R.id.text2);
 
         image = itemView.findViewById(R.id.image);
-        artistImage = itemView.findViewById(R.id.artistImage);
         playerImage = itemView.findViewById(R.id.player_image);
         time = itemView.findViewById(R.id.time);
 
         imageText = itemView.findViewById(R.id.imageText);
         imageTextContainer = itemView.findViewById(R.id.imageTextContainer);
         imageContainerCard = itemView.findViewById(R.id.imageContainerCard);
+        imageContainer = itemView.findViewById(R.id.imageContainer);
 
         menu = itemView.findViewById(R.id.menu);
         dragView = itemView.findViewById(R.id.drag_view);

app/src/main/java/code/name/monkey/retromusic/fragments/albums/AlbumDetailsFragment.kt

@@ -104,10 +104,7 @@ class AlbumDetailsFragment : AbsMainActivityFragment(R.layout.fragment_album_det
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         sharedElementEnterTransition = MaterialContainerTransform().apply {
-            drawingViewId = R.id.fragment_container
-            duration = 300L
             scrimColor = Color.TRANSPARENT
-            setAllContainerColors(requireContext().resolveColor(R.attr.colorSurface))
             setPathMotion(MaterialArcMotion())
         }
     }

app/src/main/java/code/name/monkey/retromusic/fragments/artists/AbsArtistDetailsFragment.kt

@@ -73,10 +73,7 @@ abstract class AbsArtistDetailsFragment : AbsMainActivityFragment(R.layout.fragm
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         sharedElementEnterTransition = MaterialContainerTransform().apply {
-            drawingViewId = R.id.fragment_container
-            duration = 300L
             scrimColor = Color.TRANSPARENT
-            setAllContainerColors(requireContext().resolveColor(R.attr.colorSurface))
         }
     }
 

app/src/main/res/layout/item_image_gradient.xml

@@ -10,6 +10,7 @@
     tools:ignore="MissingPrefix">
 
     <com.google.android.material.card.MaterialCardView
+        android:id="@+id/imageContainer"
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:layout_margin="4dp"