fix(android): much better crossfading between images of different ratio

Author: farfromrefug

demo-snippets/vue/CrossFadeTest.vue

@@ -0,0 +1,66 @@
+<template>
+    <Page>
+        <ActionBar>
+            <Label text="CrossFade Test" />
+        </ActionBar>
+
+        <GridLayout rows="*, auto">
+            <NSImg width="500" height="500" fadeDuration="500" :preventPreClearDrawable="true" alwaysFade="true" :src="src" stretch="aspectFit" backgroundColor="red"/>
+            <WrapLayout row="1" marginTop="8">
+                <Button text="start" @tap="start()" />
+                <Button text="stop" @tap="stop()" />
+            </WrapLayout>
+        </GridLayout>
+    </Page>
+</template>
+
+<script lang="ts">
+const images = [
+    'https://plus.unsplash.com/premium_photo-1764446765006-2976436e8ac3?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1764773965937-8c6c0f2ad915?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1764782979306-1e489462d895?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    'https://images.unsplash.com/photo-1764712754802-efe14d4478b6?q=80&w=1964&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
+];
+
+let testInterval: any;
+export default {
+    data() {
+        return {
+            src: images[0]
+        };
+    },
+    methods: {
+        start() {
+            if (!testInterval) {
+                testInterval = setInterval(() => {
+                    const index = images.indexOf(this.src);
+                    console.log('updating src', index, images[(index + 1) % images.length], Date.now());
+                    this.src = images[(index + 1) % images.length];
+                }, 400);
+            }
+        },
+        stop() {
+            if (testInterval) {
+                clearInterval(testInterval);
+            }
+        }
+    }
+};
+</script>
+
+<style scoped lang="scss">
+ActionBar {
+    background-color: #42b883;
+}
+.item {
+    padding: 10;
+    color: white;
+    .title {
+        font-size: 17;
+        font-weight: bold;
+    }
+    .subtitle {
+        font-size: 14;
+    }
+}
+</style>

demo-snippets/vue/install.ts

@@ -21,6 +21,7 @@ import ZoomImage from './ZoomImage.vue';
 import ColorFilter from './ColorFilter.vue';
 import Failure from './Failure.vue';
 import NavigationTest from './NavigationTest.vue';
+import CrossFadeTest from './CrossFadeTest.vue';
 
 // Trace.addCategories('NativescriptImage');
 // Trace.enable();
@@ -34,6 +35,7 @@ export function installPlugin() {
 
 export const demos = [
     { name: 'Simple', path: 'simple', component: Simple },
+    { name: 'CrossFadeTest', path: 'CrossFadeTest', component: CrossFadeTest },
     { name: 'Animated', path: 'animated', component: Animated },
     { name: 'Advanced', path: 'advanced', component: Advanced },
     { name: 'Events', path: 'events', component: Events },

packages/image/platforms/android/java/com/nativescript/image/ConditionalCrossFadeFactory.java

@@ -4,9 +4,9 @@
 import androidx.annotation.NonNull;
 
 import com.bumptech.glide.load.DataSource;
-import com.bumptech.glide.request.transition.DrawableCrossFadeFactory;
 import com.bumptech.glide.request.transition.NoTransition;
 import com.bumptech.glide.request.transition.Transition;
+import com.bumptech.glide.request.transition.DrawableCrossFadeFactory;
 
 import android.util.Log;
 /**
@@ -15,19 +15,27 @@
  */
 public class ConditionalCrossFadeFactory extends DrawableCrossFadeFactory {
     private final boolean onlyOnNetwork;
+    private final int duration;
+    private MatrixPreservingCrossFadeTransition resourceTransition;
 
-    public ConditionalCrossFadeFactory(int durationMs, boolean onlyOnNetwork) {
+    public ConditionalCrossFadeFactory(int duration, boolean onlyOnNetwork) {
         // Call the base class constructor which requires (durationMs, crossFadeEnabled)
-        super(durationMs, true);
+        super(duration, true);
+        this.duration = duration;
         this.onlyOnNetwork = onlyOnNetwork;
     }
-
+    private Transition<Drawable> getResourceTransition() {
+        if (resourceTransition == null) {
+            resourceTransition = new MatrixPreservingCrossFadeTransition(duration);
+        }
+        return resourceTransition;
+    }
     @NonNull
     @Override
     public Transition<Drawable> build(DataSource dataSource, boolean isFirstResource) {
         if (this.onlyOnNetwork && dataSource != DataSource.REMOTE) {
             return NoTransition.get();
         }
-        return super.build(DataSource.REMOTE, isFirstResource);
+        return getResourceTransition();
     }
 }

packages/image/platforms/android/java/com/nativescript/image/MatrixDrawable.java

@@ -51,10 +51,16 @@ public MatrixDrawable(@NonNull Drawable wrapped) {
         mWrapped.setCallback(this);
     }
 
+    /**
+     * Expose the wrapped drawable for callers that need to inspect.
+     */
+    public Drawable getWrappedDrawable() {
+        return mWrapped;
+    }
+
     /**
      * Re-assert that the wrapped drawable's callback is this wrapper.
-     * Call this if you suspect the wrapped drawable's callback may have been
-     * changed.
+     * Call this if you suspect the wrapped drawable's callback may have been changed.
      */
     public void refreshWrappedCallback() {
         mWrapped.setCallback(this);
@@ -72,6 +78,13 @@ public void setMatrix(@Nullable Matrix matrix) {
         invalidateSelf();
     }
 
+    /**
+     * Get a copy of the current transformation matrix.
+     */
+    public Matrix getMatrix() {
+        return new Matrix(mMatrix);
+    }
+
     @Override
     public void draw(@NonNull Canvas canvas) {
         int save = canvas.save();

packages/image/platforms/android/java/com/nativescript/image/MatrixDrawableImageViewTarget.java

@@ -42,8 +42,8 @@ public MatrixDrawableImageViewTarget(ImageView view, boolean waitForLayout) {
    * Default is true (clear). Call this immediately after creating the target if you want
    * to disable this with false.
    */
-  public void setClearFirst(boolean preserve) {
-      this.mClearFirst = preserve;
+  public void setClearFirst(boolean value) {
+      this.mClearFirst = value;
   }
 
     /**

packages/image/platforms/android/java/com/nativescript/image/MatrixImageView.java

@@ -12,6 +12,7 @@
 
 import androidx.annotation.Nullable;
 import androidx.appcompat.widget.AppCompatImageView;
+import android.graphics.drawable.TransitionDrawable;
 
 import android.graphics.Canvas;
 import android.graphics.Path;
@@ -32,27 +33,6 @@
  * ImageView that exposes setImageRotation(float) and coordinates rotation +
  * scaleType.
  *
- * Enhancements:
- * - Re-asserts MatrixDrawable -> wrapped drawable callback binding after the
- * wrapper is set on the ImageView,
- * to ensure the wrapped drawable's invalidation/schedule callbacks are received
- * by the wrapper.
- * - Starts/stops Animatable wrapped drawables consistently on
- * attach/detach/visibility changes.
- * - Aspect-ratio support (like MatrixImageView): setAspectRatio(float) to force
- * measured width/height to respect ratio.
- * - Supports rotation-aware measurement: when imageRotation is 90 or 270
- * degrees, the enforced aspect ratio
- * is inverted so measurement reflects the rotated content.
- * - Adds a noRatioEnforce flag that disables all aspect-ratio measurement logic
- * and simply calls super.onMeasure().
- * - Auto-size support: when width or height measure is not finite, the view can
- * size itself using
- * explicit imageWidth/imageHeight (setImageSize) or the drawable intrinsic
- * size.
- *
- * Protected fields allow subclasses (e.g. ZoomableMatrixImageView) to inspect
- * base matrix for clamping.
  */
 public class MatrixImageView extends AppCompatImageView {
     // made protected so ZoomableMatrixImageView can compute clamped translations
@@ -402,6 +382,26 @@ public void cancelRotationAnimation() {
         }
     }
 
+    /**
+     * Compute the transformation matrix for a given drawable based on current view size,
+     * rotation, and scale type.
+     */
+    public Matrix computeMatrixForDrawable(Drawable drawable) {
+        Matrix matrix = new Matrix();
+        if (drawable == null) {
+            return matrix;
+        }
+        
+        int vw = getWidth() - getPaddingLeft() - getPaddingRight();
+        int vh = getHeight() - getPaddingTop() - getPaddingBottom();
+        
+        if (vw > 0 && vh > 0) {
+            ScaleUtils.getImageMatrix(drawable, vw, vh, mImageRotation, mAppliedScaleType, matrix);
+        }
+        
+        return matrix;
+    }
+
     @Override
     public void setImageDrawable(@Nullable Drawable drawable) {
         if (drawable == null) {
@@ -412,45 +412,55 @@ public void setImageDrawable(@Nullable Drawable drawable) {
             }
             setImageSize(0, 0);
             super.setImageDrawable(null);
-            // clear implicit image size when drawable removed
-            // (do not clear explicit mImageWidth/mImageHeight set by caller)
             return;
         }
+        
+        // Special handling for TransitionDrawable - use it directly without wrapping
+        if (drawable instanceof TransitionDrawable) {
+            setImageSize(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
+            super.setImageDrawable(drawable);
+            mLastComposedDrawable = null;
+            // Don't call updateBaseMatrix here - let the transition finish
+            return;
+        }
+        
         setImageSize(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
-        MatrixDrawable md = new MatrixDrawable(drawable);
-        // set the wrapper as the ImageView drawable - AppCompatImageView will set the
-        // wrapper's callback to the view.
-        super.setImageDrawable(md);
-
-        // Re-assert the wrapped drawable's callback -> wrapper relationship (safe no-op
-        // if already set).
-        md.refreshWrappedCallback();
-
-        // If caller hasn't set an explicit image size, capture drawable intrinsic size
-        // as a hint for measuring
-        if (mImageWidth <= 0 || mImageHeight <= 0) {
-            int iw = drawable.getIntrinsicWidth();
-            int ih = drawable.getIntrinsicHeight();
-            if (iw > 0 && ih > 0) {
-                mImageWidth = iw;
-                mImageHeight = ih;
-                // we captured a size that may affect measurement
-                requestLayout();
-            }
+        
+        // If already a MatrixDrawable, use it directly
+        if (drawable instanceof MatrixDrawable) {
+            super.setImageDrawable(drawable);
+            ((MatrixDrawable) drawable).refreshWrappedCallback();
+        } else {
+            // Wrap in MatrixDrawable
+            MatrixDrawable md = new MatrixDrawable(drawable);
+            super.setImageDrawable(md);
+            md.refreshWrappedCallback();
         }
 
-        // Ensure the next updateBaseMatrix applies the matrix to the new wrapper instance.
-        mLastComposedDrawable = null;
-        updateBaseMatrix();
-
-        // If underlying drawable is animatable and ImageView is visible, start it
-        if (drawable instanceof Animatable && getVisibility() == VISIBLE) {
-            ((Animatable) drawable).start();
+    // If caller hasn't set an explicit image size, capture drawable intrinsic size
+    // as a hint for measuring
+    if (mImageWidth <= 0 || mImageHeight <= 0) {
+        int iw = drawable.getIntrinsicWidth();
+        int ih = drawable.getIntrinsicHeight();
+        if (iw > 0 && ih > 0) {
+            mImageWidth = iw;
+            mImageHeight = ih;
+            requestLayout();
         }
     }
 
-    // cache last composed matrix so we can no-op identical updates (avoid repeated invalidates)
-    private final Matrix mLastComposedMatrix = new Matrix();
+    mLastComposedDrawable = null;
+    updateBaseMatrix();
+
+    // If underlying drawable is animatable and ImageView is visible, start it
+    Drawable inner = drawable instanceof MatrixDrawable ? ((MatrixDrawable) drawable).getWrappedDrawable() : drawable;
+    if (inner instanceof Animatable && getVisibility() == VISIBLE) {
+        ((Animatable) inner).start();
+    }
+}
+
+// cache last composed matrix so we can no-op identical updates (avoid repeated invalidates)
+private final Matrix mLastComposedMatrix = new Matrix();
     // The drawable instance we last applied mLastComposedMatrix to. If a new drawable is
     // installed (wrapper changed), we must still apply the composed matrix even if values match.
     private Drawable mLastComposedDrawable = null;

packages/image/platforms/android/java/com/nativescript/image/MatrixPreservingCrossFadeTransition.java

@@ -0,0 +1,66 @@
+package com.nativescript.image;
+
+import android.graphics.Matrix;
+import android.graphics.drawable.Drawable;
+import android.graphics.drawable.TransitionDrawable;
+import android.widget.ImageView;
+import androidx.annotation.NonNull;
+import com.bumptech.glide.request.transition.Transition;
+
+public class MatrixPreservingCrossFadeTransition implements Transition<Drawable> {
+    private final int duration;
+    
+    public MatrixPreservingCrossFadeTransition(int duration) {
+        this.duration = duration;
+    }
+    
+    @Override
+    public boolean transition(@NonNull Drawable current, @NonNull ViewAdapter adapter) {
+        Drawable previous = adapter.getCurrentDrawable();
+        if (previous == null) {
+            return false;
+        }
+        
+        // Get the ImageView from the adapter
+        ImageView view = null;
+        if (adapter instanceof com.bumptech.glide.request.target.ViewTarget) {
+            view = (ImageView) ((com.bumptech.glide.request.target.ViewTarget<?, ?>) adapter).getView();
+        }
+        
+        // Wrap current in MatrixDrawable with computed matrix if we have a MatrixImageView
+        Drawable wrappedCurrent;
+        if (view instanceof MatrixImageView) {
+            MatrixImageView miv = (MatrixImageView) view;
+            if (current instanceof MatrixDrawable) {
+                wrappedCurrent = ((MatrixDrawable) current);
+            } else {
+                wrappedCurrent = new MatrixDrawable(current);
+            }
+            Matrix matrix = miv.computeMatrixForDrawable((MatrixDrawable)wrappedCurrent);
+            ((MatrixDrawable)wrappedCurrent).setMatrix(matrix);
+        } else {
+            wrappedCurrent = current;
+        }
+        
+        // Create TransitionDrawable
+        final TransitionDrawable td = new TransitionDrawable(new Drawable[] { previous, wrappedCurrent });
+        td.setCrossFadeEnabled(true);
+        
+        // Set the TransitionDrawable - MatrixImageView will handle it specially
+        adapter.setDrawable(td);
+        
+        // After transition completes, set the final MatrixDrawable
+        // final MatrixDrawable finalDrawable = (MatrixDrawable)wrappedCurrent;
+        // if (view instanceof MatrixImageView) {
+        //     view.postDelayed(new Runnable() {
+        //         @Override
+        //         public void run() {
+        //             adapter.setDrawable(finalDrawable);
+        //         }
+        //     }, duration);
+        // }
+        
+        td.startTransition(duration);
+        return true;
+    }
+}