Search
Loading...
Skip to content

Resize

The CreativeEditor SDK (CE.SDK) provides a resize feature for Android apps. Precise image sizing is crucial for fitting content into specific layouts, or exporting to various formats. CE.SDK offers both interactive resize controls and powerful Kotlin APIs for dimensional control.

Whether you’re building social media templates or responsive interfaces, this guide covers all resizing scenarios.

Resizing features#

CE.SDK provides comprehensive tools for adjusting image dimensions in your Android app. The resizing feature enables the following actions:

  • Interactive resize handles for user control
  • Programmatic dimension setting with Kotlin
  • Group resizing for maintaining element relationships
  • Resize restrictions for layout protection

Common resizing scenarios#

Apply resizing for:

  • Fitting images to Android layout constraints
  • Creating content for different screen densities
  • Implementing template-based designs with fixed dimensions

Resize a block using the UI#

When a block is selected:

  • Handles appear on the four sides to allow the user to resize either the width or the height of the block.
  • A setting in the editor controls the visibility of the handles.
  • When the handles are invisible, a user can’t resize using tapping or a mouse.
engine.editor.setSettingBoolean("controlGizmo/showResizeHandles", false)

The image on the left has resize handles, the one on the right does not

The image on the left displays all resize handles, while the right image has them disabled. Even with resize handles hidden, users can still access scale and rotation controls.

Resize a block programmatically#

Each block contains the following properties that you can update to resize the block:

  • width
  • height

The values of each property can be:

  • SizeMode.AUTO: automatic sizing.
  • SizeMode.PERCENT: the relationship between a block and its parent.

For example, a block containing the following properties:

  • SizeMode.PERCENT mode
  • width set to 1.0f

will make its size to 100% of its parent’s width.

The following code sets a block to be 400 × 400 px:

engine.block.setWidth(imageBlock, 400.0f)
engine.block.setHeight(imageBlock, 400.0f)

Image resized to 400px by 400px

There’s also a convenience function for setting both width and height at once:

engine.block.resize(imageBlock, 400.0f, 400.0f)

Two blocks sized by percentage

import ly.img.engine.SizeMode


engine.block.setWidthMode(imageBlock, SizeMode.PERCENT)
engine.block.setWidth(imageBlock, 0.5f) // 50% of parent width
engine.block.setHeightMode(imageBlock, SizeMode.PERCENT)
engine.block.setHeight(imageBlock, 0.5f) // 50% of parent height

In this code:

  • The block on the left takes up 50% of the width and height of its parent.
  • The block on the right has been set to 25% of the width and height of its parent.

Resize blocks as a group#

Group blocks to resize them together:

val groupId = engine.block.group(listOf(imageBlock, textBlock))
engine.block.resize(groupId, 600.0f, 400.0f)

Lock resizing#

When working with templates, you can lock a block from being resized by setting its scope:

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

To prevent users from transforming an element at all:

engine.block.setTransformLocked(imageBlock, true)