Zoom and Mask using Glide

Question

I'm just looking to see if anyone can point me in the right direction to learning how to accomplish this using Glide...

• We have a page with content.

• Content is displayed as a single image (think: image of magazine page)

• In easy reading mode, I want to center and zoom on the first block of text content and mask the rest

• When 'next' is clicked, I want to move to the next block of text content, recenter and rezoom

• When 'back' is clicked, I want to move to the previous block of text content, recenter and rezoom

• the mask will always been rectangular but the size will constantly change to fit the content

I've put a couple of simple images below to show what I mean. We're currently doing this with an imageview and 4 black views that we position but it's very janky and prone to misalignments. Can we accomplish this in Glide?

Thanks all!

Answer 1

Zoom and Mask function can be achieve in two ways. For masking the image use Glide and for zoom use PhotoView but as you mentioned that text content need to be zoom automatically then its complicated with the method you are following.

Glide gives you a functionality that you automatically limits the size of the image it holds in cache and memory to the ImageView dimensions like if the image should not be automatically fitted to the ImageView, call override(horizontalSize, verticalSize). This will resize the image before displaying it in the ImageView.

GlideApp  
  .with(context)
  .load("Image resource")
  .override(600, 200) // resizes the image to these dimensions (in pixel). resize does not respect aspect ratio
  .into(imageView);

This option might also be helpful when you load images when there is no target view with known dimension yet. For example, if the app wants to warm up the cache in the splash screen, it can't measure the ImageViews yet. However, if you know how large the images should be, use override() to provide a specific size. Check the other functions of Glide from here

Use PhotoView for zoom in and zoom out and even it's best for working in your scenario (magazine page). It can be attain by passing photoview instance as argument in glide .into() function

Also check this example

Answer 2

Use Text recognition API Mobile Vision to detect text in image and it results in Text structure. From which you can derive

• Block is a contiguous set of text lines, such as a paragraph or column,
• Line is a contiguous set of words on the same vertical axis, and
• Word is a contiguous set of alphanumeric characters on the same vertical axis.

Center and zoom on the first block of text content and mask the rest using Bounding box

You can refer to this example