Pinch to zoom / implemented Glide loading with FitCenter or CenterCrop

photoeditor/build.gradle

@@ -54,6 +54,8 @@ dependencies {
     implementation 'com.github.bumptech.glide:glide:4.10.0'
     kapt 'com.github.bumptech.glide:compiler:4.10.0'
 
+    implementation 'jp.wasabeef:glide-transformations:4.3.0'
+
     implementation 'com.github.chrisbanes:PhotoView:2.3.0'
 
     implementation project(path: ':mp4compose')

photoeditor/src/main/java/com/automattic/photoeditor/views/PhotoEditorView.kt

@@ -12,10 +12,12 @@ import android.view.TextureView.SurfaceTextureListener
 import android.view.View
 import android.view.ViewGroup
 import android.widget.ImageView
+import android.widget.ImageView.ScaleType.CENTER_CROP
 import android.widget.ImageView.ScaleType.FIT_CENTER
 import android.widget.ProgressBar
 import android.widget.RelativeLayout
 import androidx.annotation.RequiresApi
+import androidx.appcompat.widget.AppCompatImageView
 import com.automattic.photoeditor.OnSaveBitmap
 import com.automattic.photoeditor.R.styleable
 import com.automattic.photoeditor.views.background.fixed.BackgroundImageView
@@ -24,6 +26,9 @@ import com.automattic.photoeditor.views.brush.BrushDrawingView
 import com.automattic.photoeditor.views.filter.CustomEffect
 import com.automattic.photoeditor.views.filter.ImageFilterView
 import com.automattic.photoeditor.views.filter.PhotoFilter
+import com.bumptech.glide.Glide
+import com.bumptech.glide.request.RequestOptions
+import jp.wasabeef.glide.transformations.BlurTransformation
 
 /**
  *
@@ -40,9 +45,11 @@ import com.automattic.photoeditor.views.filter.PhotoFilter
 class PhotoEditorView : RelativeLayout {
     private lateinit var autoFitTextureView: AutoFitTextureView
     private lateinit var backgroundImage: BackgroundImageView
+    private lateinit var backgroundImageBlurred: AppCompatImageView
     private lateinit var brushDrawingView: BrushDrawingView
     private lateinit var imageFilterView: ImageFilterView
     private lateinit var progressBar: ProgressBar
+    private var attachedToWindow: Boolean = false
 
     private var surfaceListeners: ArrayList<SurfaceTextureListener> = ArrayList()
 
@@ -72,6 +79,9 @@ class PhotoEditorView : RelativeLayout {
     val source: ImageView
         get() = backgroundImage
 
+    val sourceBlurredBkg: ImageView
+        get() = backgroundImageBlurred
+
     val brush: BrushDrawingView
         get() = brushDrawingView
 
@@ -103,8 +113,28 @@ class PhotoEditorView : RelativeLayout {
         init(attrs)
     }
 
+    override fun onDetachedFromWindow() {
+        super.onDetachedFromWindow()
+        attachedToWindow = false
+    }
+
+    override fun onAttachedToWindow() {
+        super.onAttachedToWindow()
+        attachedToWindow = true
+    }
+
+    fun onComposerDestroyed() {
+        attachedToWindow = false
+    }
+
     @SuppressLint("Recycle")
     private fun init(attrs: AttributeSet?) {
+        backgroundImageBlurred = AppCompatImageView(context).apply {
+            id = imgBlurSrcId
+            adjustViewBounds = true
+            scaleType = CENTER_CROP
+        }
+
         // Setup image attributes
         backgroundImage = BackgroundImageView(context).apply {
             id = imgSrcId
@@ -159,6 +189,11 @@ class PhotoEditorView : RelativeLayout {
 
         backgroundImage.setOnImageChangedListener(object : BackgroundImageView.OnImageChangedListener {
             override fun onBitmapLoaded(sourceBitmap: Bitmap?) {
+                if (attachedToWindow) {
+                    Glide.with(context).load(sourceBitmap)
+                            .apply(RequestOptions.bitmapTransform(BlurTransformation(25, 3)))
+                            .into(backgroundImageBlurred)
+                }
                 imageFilterView.setFilterEffect(PhotoFilter.NONE)
                 imageFilterView.setSourceBitmap(sourceBitmap)
                 Log.d(TAG, "onBitmapLoaded() called with: sourceBitmap = [$sourceBitmap]")
@@ -179,6 +214,9 @@ class PhotoEditorView : RelativeLayout {
         // Add camera preview
         addView(autoFitTextureView, cameraParam)
 
+        // Add image source
+        addView(backgroundImageBlurred, imgSrcParam)
+
         // Add image source
         addView(backgroundImage, imgSrcParam)
 
@@ -254,23 +292,27 @@ class PhotoEditorView : RelativeLayout {
 
     internal fun turnTextureViewOn() {
         backgroundImage.visibility = View.INVISIBLE
+        backgroundImageBlurred.visibility = View.INVISIBLE
         autoFitTextureView.visibility = View.VISIBLE
     }
 
     internal fun turnTextureViewOff() {
         backgroundImage.visibility = View.VISIBLE
+        backgroundImageBlurred.visibility = View.VISIBLE
         autoFitTextureView.visibility = View.INVISIBLE
     }
 
     internal fun toggleTextureView(): Boolean {
         backgroundImage.visibility = autoFitTextureView.visibility.also {
             autoFitTextureView.visibility = backgroundImage.visibility
         }
+        backgroundImageBlurred.visibility = backgroundImage.visibility
         return autoFitTextureView.visibility == View.VISIBLE
     }
 
     internal fun turnTextureAndImageViewOff() {
         backgroundImage.visibility = View.INVISIBLE
+        backgroundImageBlurred.visibility = View.INVISIBLE
         autoFitTextureView.visibility = View.INVISIBLE
     }
 
@@ -286,6 +328,7 @@ class PhotoEditorView : RelativeLayout {
 
     companion object {
         private val TAG = "PhotoEditorView"
+        private val imgBlurSrcId = 5
         private val imgSrcId = 1
         private val brushSrcId = 2
         private val glFilterId = 3

stories/build.gradle

@@ -52,6 +52,8 @@ dependencies {
     implementation 'com.github.bumptech.glide:glide:4.10.0'
     kapt 'com.github.bumptech.glide:compiler:4.10.0'
 
+    implementation 'jp.wasabeef:glide-transformations:4.3.0'
+
     implementation 'org.greenrobot:eventbus:3.1.1'
 
     implementation project(path: ':photoeditor')