instructions

Reference:Jetpack Compose Image Content ScaleType Fully Illustrated

The author:elye

Remark:

  • This article is only for translation and handling, if there is infringement, delete
  • Please correct any mistakes. Thanks to the authors, thanks to open source.

Read the instructions

ImageView

In the original Android XML view, we could specify a variety of zoom modes to display images. Different zoom modes, the effect of the display, in fact, and the size of the image itself, but a lot of times we will be confused, we will analyze various situations.

Android ImageView ScaleType Fully Illustrated Android ImageView ScaleType Fully Illustrated

ScaleType, ContentScale

For example, in Compose, the ImageView zoom is ContentScale. For example, in Compose, the ImageView zoom is ContentScale

Jetpack Compose Image

In Jetpack Compose, the ContentScale strategy is different. Instead of working on scale and scale together like ScaleType, it now has two different properties, which scale is scale and scale is scale, as shown in the code below.

Image(imagePicture,

    contentDescription = null,

    modifier = Modifier.fillMaxSize(),

    alignment = alignment.alignment,

    contentScale = scale.scaleType

)

This is a good thing for us because we only care about the zoom of the image itself, and don’t have to worry about how it should be aligned. Just leave it to the alignment:

  • In the original ImageView, we set FitStart, FitEnd, and FitCenter in XML, but in Jetpack Compose, we just need Fit, which is aligned with Start, End, and Center

  • In the original ImageView, the ImageView only had CenterCrop and no “StartCrop” or “EndCrop” properties. See Android Image StartCrop and EndCrop Scaling below), but in Jetpack Compose we can combine Crop and Alignment properties, Implement the “StartCrop” and “EndCrop” effects.

ContentScale vs. ScaleType

If you are familiar with the ImageView ScaleType, the following comparison should be easy to understand

As you can see from the table above, ScaleType covers only five of ContentScale7 schemas. ContentScale’s FitWidth and FitHeight are not included because they are ScaleType and are not directly supported.

If you want to implement FitWidth and FitHeight effects accurately in ImageView, you can refer to the following illustration:

ContentScale.FillHeight

In contentScale.fillHeight mode, it ensures that the height of the image reaches the upper and lower boundaries of the view.

  • If the height of the image is greater than the width, FillHeight is equivalent to scaleType. FitCenter, with white space on the left and right sides of the image
  • If the height of the image is less than the width, FillHeight is equivalent to scaletype. CenterCrop, and the excess width of the image is clipped

ContentScale.FillWidth

In contentScale.fillWidth mode, it ensures that the image’s width reaches the left and right edges of the view.

  • If the height of the image is greater than the width, FillWidth is equivalent to scaletype. CenterCrop, and the excess height is clipped
  • If the height of the image is less than the width, FillWidth is equivalent to scaleType. FitCenter and the image is left white on both sides

In short, Jetpack Compose’s ContentScale is more basic and useful for zooming in and out of images.

ContentScale tutorial

Most of the time, each attribute of ContentScale will be used in the same way, which is confusing. Next, I will illustrate it through four pictures of different sizes

  • Bigger Image: the width and height of the picture are greater than the width and height of the equipment. See the waterfall picture for details
  • Smaller Image: the width and height of the Image are Smaller than the width and height of the device. For details, see the lion Image
  • Taller Image: the height of the picture is greater than the height of the device, but the width is smaller than the width of the device. See the picture of the coconut tree
  • Longer Image: the Image is smaller than the device height and wider than the device width. For details, see the picture of the Long Bridge

ContentScale.Inside

The contentScale.inside property has the following effects:

  • Keep the image original aspect ratio
  • Make sure all images are displayed in the view, but may be up, down, left and right white
  • Images will not be stretched or cropped

ContentScale.Crop

The contentScale.crop property has the following effects:

  • Keep the original aspect ratio of the image (for non-view display, the excess will be cropped so it doesn’t look like the original aspect ratio)
  • The image may be proportionally reduced until the width and height of the view are equal
  • The image may be proportionally enlarged until the width and height of the view are equal
  • There is no white space above, below, or left or right of the control
  • Content outside control boundaries is clipped

ContentScale.Fit

The contentScale.fit property has the following effects:

  • Keep the image original aspect ratio
  • If the image height is greater than the space height, scale down the image to ensure that the image height coincides with the upper and lower boundaries of the control
  • If the width of the image is less than the width of the space, enlarge the image in equal proportions until one side can coincide with the upper, lower, or left and right edges of the control
  • Controls may have white space above, below, or to the left and right
  • Images will not be cropped

ContentScale.FillBounds

The contentScale.fillbounds property has the following effects

  • The original aspect ratio of the image will not be maintained
  • If the image size is larger than the control size, the image is reduced until each side coincides with the control boundary
  • If the image size is smaller than the control size, the image is stretched until each side coincides with the control boundary
  • The upper, lower, and left margins of the control do not have white space
  • Images will not be cropped

ContentScale.FillHeight

The contentScale.fillHeight property has the following effects

  • Keep the image original aspect ratio
  • The image may be reduced to the original aspect ratio until the height coincides with the upper and lower boundaries of the control
  • The image may be enlarged in the original aspect ratio until the height coincides with the upper and lower boundaries of the control
  • If the image width is less than the height, the left and right edges of the control are left blank
  • If the image width is greater than the height, the left and right excess will be clipped

ContentScale.FillWidth

The contentScale.fillWidth property has the following effects:

  • Keep the image original aspect ratio
  • The image may be reduced to the original aspect ratio until the width coincides with the left and right boundaries of the control
  • The image may be enlarged to the original aspect ratio until the width coincides with the left and right edges of the control
  • If the image width is greater than the height, the upper and lower boundaries of the control will have white space
  • If the width of the image is less than the height, there will be a clipping above and below the excess

Through the following several renderings, you can quickly see the display effect of the same picture under different content scales


conclusion

To simplify the description of the ContentScale, I made the following table

Depending on the actual requirements of the project, you can choose the desired effect from the diagram.

Hopefully this article will be useful for you using ContentScale.

Making the demo source code