Scale

Scaling capabilities#

• Proportional image scaling with Kotlin APIs
• Independent width/height scaling for creative effects
• Multi-element scaling with automatic grouping
• Scale constraints for template integrity

Scaling use cases#

Implement scaling to:

• Create responsive designs that adapt to different Android devices.
• Add pinch-to-zoom functionality for better user experience.
• Resize content dynamically based on available screen space.

Scale an image uniformly#

Scaling uses the scale(block: DesignBlock, scaleX: Float, scaleY: Float, anchorX: Float = 0f, anchorY: Float = 0f) function, with the following scale values:

• 1.0f: the original scale.
• Larger than 1.0f: increase the scale of the block
• Lower than 1.0f: scale the block smaller.

A value of 2.0f, for example, makes the block twice as large.

The following code scales the image to 150% of its original size. The origin anchor point remains unchanged, so the image expands down and to the right:

engine.block.scale(imageBlock, 1.5f, 1.5f)

The anchor point for the image when scaling has the following settings:

• Default: the origin point on the top left.
• Custom: Modify the x and y direction, with values between 0.0f and 1.0f.

The code below scales the image to 150% of its original size:

• The origin anchor point is 0.5, 0.5.
• The image expands from the center.

engine.block.scale(imageBlock, 1.5f, 1.5f, 0.5f, 0.5f)

Scale non-uniformly#

To stretch or compress only one axis to distort an image, combine:

• The crop scale function
• The width or height function

The way you decide to adjust produces different results. Below are three examples of scaling the original image in the x direction only.

import ly.img.engine.SizeMode

engine.block.setWidthMode(imageBlock, SizeMode.AUTO)
val newWidth = engine.block.getWidth(imageBlock) * 1.5f
engine.block.setWidth(imageBlock, newWidth)

The preceding code:

1. Modifies the width of the block.
2. Allows the engine to adjust the scale of the image to maintain it as a fill.

engine.block.setCropScaleX(imageBlock, 1.5f)
engine.block.setWidthMode(imageBlock, SizeMode.AUTO)
val newWidth = engine.block.getWidth(imageBlock) * 1.5f
engine.block.setWidth(imageBlock, newWidth)

The preceding code:

1. Uses crop scale to scale the image in a single direction.
2. Adjusts the block’s width to match the change.

The change in width doesn’t take the crop into account, and so distorts the image as it’s scaling the scaled image.

engine.block.setCropScaleX(imageBlock, 1.5f)
engine.block.setWidthMode(imageBlock, SizeMode.AUTO)
val newWidth = engine.block.getWidth(imageBlock) * 1.5f
engine.block.setWidth(imageBlock, newWidth, true) // maintainCrop = true

The preceding code distorts the image less by:

1. Setting the maintainCrop parameter to true.
2. Expanding the width of the image by the scale factor.
3. Respecting the crop scale.

Scale multiple elements together#

Group blocks to scale them proportionally:

val groupId = engine.block.group(listOf(imageBlock, textBlock))
engine.block.scale(groupId, 0.75f, 0.75f)

The preceding code scales the entire group to 75%.

Lock scaling#

When working with templates, you can lock a block from scaling by setting its scope. Remember that the global layer has to defer to the blocks using setGlobalScope.

engine.block.setScopeEnabled(imageBlock, "layer/resize", false)

To prevent users from transforming an element at all:

engine.block.setTransformLocked(imageBlock, true)