Summary

The website content provides a technical guide on implementing custom image scaling, specifically StartCrop and EndCrop scaling, for Android development using Matrix ScaleType transformation.

Abstract

The article on the undefined website delves into the nuances of Android image scaling, noting that while Android provides various ScaleType options, there is a lack of default scaling types for StartCrop and EndCrop. It explains the process of achieving these specific crops by using Matrix ScaleType, which involves calculating the minimal scale to fill the view bounds and applying transformations to the image matrix. The guide offers code snippets and visual examples for both StartCrop, which displays the beginning section of an image, and EndCrop, which shows the ending section. It also directs readers to an example app on GitHub for hands-on experimentation and suggests further reading on Android view scrolling for those interested in interactive image manipulation.

Opinions

The author suggests that the default ScaleType options in Android may not meet all scaling needs, implying a gap in the framework's functionality.
The use of Matrix ScaleType is presented as a flexible and powerful solution to achieve custom scaling, indicating the author's preference for this approach.
By providing detailed code examples and visual aids, the author conveys a didactic intent to clearly explain the concepts and facilitate understanding.
The mention of an example app and additional resources for scrolling logic implies that the author values practical implementation and continuous learning in Android development.
The author assumes that the reader has a certain level of proficiency in Android programming, as the article contains advanced topics and expects familiarity with concepts like image scaling and matrix transformations.

Learning Android Development

Android Image StartCrop and EndCrop Scaling

Complete the possible default scaling type possibly need

If you have learned all the possible ScaleType available on image provided by Android (as per the blog below), you might realize there’s are possible scaletypes it doesn’t have.

Android ImageView ScaleType Fully Illustrated

Clear all confusion of Android Image ScaleType

medium.com

It has CenterCrop scaling, where one can scale the image to fit to ensure all the views are filled with image, where either the top-bottom or the sides are matching the view.

Two examples are given below

However, at times, we want to Crop the start (top or left) and the end (bottom or right) of the image accordingly. There’s no available out of box scale type to do that.

Matrix Scale Type came to rescue

The good news is, we can do so using the Matrix Scale transformation. To understand it, you can refer to the below article.

Android Matrix ScaleType Explained

Making a custom scaling transformation on Android Image

medium.com

But if you are just interested in how to setup Start Crop or End Crop, just read the below.

Start Crop

To perform a Start Crop, one needs to get the minimal scale needed to get the image fully fill up the view bound.

val drawable = image_picture.drawable ?: return
val viewWidth: Float = getImageViewWidth(image_picture).toFloat()
val viewHeight: Float = getImageViewHeight(image_picture).toFloat()
val drawableWidth = drawable.intrinsicWidth
val drawableHeight = drawable.intrinsicHeight

val widthScale = viewWidth / drawableWidth
val heightScale = viewHeight / drawableHeight
val scale = widthScale.coerceAtLeast(heightScale)

Then after that just scale it accordingly.

// Start Crop
baseMatrix.reset()
baseMatrix.postScale(scale, scale)
image_picture.imageMatrix = baseMatrix

By default, the image will be aligned top or left, depends if the image is tall or long.

For a Long Image, StartCrop will show the left section

For a Tall Image, StartCrop will show the top section

End Crop

To perform an End Crop, one needs to get the minimal scale needed to get the image fully fill up the view bound as well.

val drawable = image_picture.drawable ?: return
val viewWidth: Float = getImageViewWidth(image_picture).toFloat()
val viewHeight: Float = getImageViewHeight(image_picture).toFloat()
val drawableWidth = drawable.intrinsicWidth
val drawableHeight = drawable.intrinsicHeight

val widthScale = viewWidth / drawableWidth
val heightScale = viewHeight / drawableHeight
val scale = widthScale.coerceAtLeast(heightScale)

Then after that just scale it accordingly, and also translating the image to the end of the image (bottom-right).

// End Crop
baseMatrix.reset()
val scale = widthScale.coerceAtLeast(heightScale)
baseMatrix.postScale(scale, scale)
baseMatrix.postTranslate(
    (viewWidth - drawableWidth * scale),
    (viewHeight - drawableHeight * scale)
)
image_picture.imageMatrix = baseMatrix

After the matrix transformation, now we get the EndCrop as below.

For Long Image, EndCrop will show the right section

For Tall Image, EndCrop will show the bottom section

Nice, now you can have StartCrop and EndScrop scaling as well.

You can get the example app code to experiment with it. In the code, it also has all the other scale types implemented using Matrix ScaleType transformation.

If you find the above interested, and like to explore how to move around the images by touch, check out

Android View Scrolling Made Simple

Program your own scrolling logic using OverScroller

medium.com