Search
Loading...
Skip to content

Resize

This guide shows how to resize videos using CE.SDK in your Android app. You’ll learn how to change the size of individual video elements or groups, maintain aspect ratios, and apply responsive resizing rules within templates.

What you’ll learn#

  • Resize blocks using the UI
  • Resize videos programmatically using Kotlin
  • Resize multiple blocks as a group
  • Lock a user’s ability to resize a block

When to use#

Use resizing to:

  • Match specific dimensions for social media, print, or product design
  • Maintain consistent layouts across templates
  • Enable responsive behaviors for dynamic asset generation

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. The visibility of the handles is controlled by a setting in the editor. When the handles are invisible, a user cannot resize using touch or a mouse.

engine.editor.setSettingBoolean("controlGizmo/showResizeHandles", false)

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

In the image above the block on the right has its resize handles hidden. It cannot be resized by the user. The scale handles on the corner and the rotate handle below are still visible and the user can use those to modify the video block.

Resize a block programmatically#

Each block has a width and height property you can update to resize the block. These can be SizeMode.AUTO values or SizeMode.PERCENT values for their mode. A SizeMode.PERCENT value is the relationship between a block and its parent. Setting the width of a block to 1.0f in SizeMode.PERCENT mode will make it size to 100% of its parent’s width.

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

Sets a block to be 400 × 400 px.

Video resized to 400px by 400px

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

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

Two blocks sized by percentage

import ly.img.engine.SizeMode


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

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(videoBlock, 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(videoBlock, "layer/resize", false)

To prevent users from transforming an element at all:

engine.block.setTransformLocked(videoBlock, true)