Pan / zoom background images

app/src/main/res/values/colors.xml

@@ -23,6 +23,7 @@
     <color name="black_transp_light_darker">#99000000</color>
     <color name="black_transp_delete">#4D000000</color>
     <color name="black_transp_story_frame_selector">@color/black_transp_light</color>
+    <color name="black_opaque_bar">@color/black</color>
     <color name="black_transp_edit_mode_controls">@color/black_transp_light</color>
     <color name="black_transp_edit_mode_controls_pressed">@color/black_transp_light_darker</color>
     <color name="black_transp_error_scrim">#4D000000</color>

build.gradle

@@ -7,6 +7,7 @@ buildscript {
         google()
         jcenter()
         maven { url "https://dl.bintray.com/automattic/maven/" }
+        maven { url "https://jitpack.io" }
     }
     dependencies {
         classpath 'com.android.tools.build:gradle:3.5.1'
@@ -30,6 +31,7 @@ allprojects {
     repositories {
         google()
         jcenter()
+        maven { url "https://jitpack.io" }
     }
 
     if (tasks.findByPath('checkstyle') == null) {

photoeditor/build.gradle

@@ -54,6 +54,10 @@ 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')
 
     lintChecks 'org.wordpress:lint:1.0.1'

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

@@ -13,9 +13,11 @@ 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,13 +113,33 @@ 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
             adjustViewBounds = true
-            scaleType = CENTER_CROP
+            scaleType = FIT_CENTER
         }
 
         val imgSrcParam = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT).apply {
@@ -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

photoeditor/src/main/java/com/automattic/photoeditor/views/background/fixed/BackgroundImageView.kt

@@ -10,14 +10,14 @@ import android.graphics.drawable.Drawable
 import android.graphics.drawable.Icon
 import android.net.Uri
 import android.util.AttributeSet
-import androidx.appcompat.widget.AppCompatImageView
+import com.github.chrisbanes.photoview.PhotoView
 
 /**
  * @author [Burhanuddin Rashid](https://github.com/burhanrashid52)
  * @version 0.1.2
  * @since 5/21/2018
  */
-internal class BackgroundImageView : AppCompatImageView {
+class BackgroundImageView : PhotoView {
     private var mOnImageChangedListener: OnImageChangedListener? = null
 
     val bitmap: Bitmap?

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')
@@ -63,6 +65,8 @@ dependencies {
 
     implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:$coroutinesVersion"
 
+    implementation 'com.github.chrisbanes:PhotoView:2.3.0'
+
     lintChecks 'org.wordpress:lint:1.0.1'
 
     testImplementation 'junit:junit:4.12'