Build your first resizable panel

Updated: Mar 4, 2026

Panels in Spatial SDK can include interactive resize handles that allow users to adjust dimensions using hand tracking or controllers. Adding the IsdkPanelResize component enables resize functionality with automatic handle generation.

What you’ll learn

In this tutorial, you’ll learn how to:

Enable resize functionality on panels

Configure resize behavior modes

Set dimension constraints and aspect ratio preservation

Combine resize handles with grabbable panels

Prerequisites

Requirement	Details
Spatial SDK	v0.9.0 or later
Android Studio	Hedgehog or later
Knowledge	Basic panel creation, component system
Target device	Meta Quest 3/3S

Step 1: Download and open the StarterTemplate project

Download the latest version of the StarterTemplate project from the Spatial SDK releases page⁠. The StarterTemplate project contains a panel that you’ll make resizable.

Step 2: Update your imports

At the top of ImmersiveActivity.kt, add these imports.

import com.meta.spatial.isdk.IsdkPanelResize
import com.meta.spatial.core.Vector2
import com.meta.spatial.isdk.ResizeMode

Step 3: Add the IsdkPanelResize component

In registerPanels(), add the IsdkPanelResize component to ComposeViewPanelRegistration() to make the Compose panel resizable.

ComposeViewPanelRegistration(
    R.id.options_panel,
    composeViewCreator = { _, context ->
        ComposeView(context).apply { setContent { OptionsPanel(::playVideo) } }
    },
    settingsCreator = {
        UIPanelSettings(
            shape =
                QuadShapeOptions(width = OPTIONS_PANEL_WIDTH, height = OPTIONS_PANEL_HEIGHT),
            style = PanelStyleOptions(themeResourceId = R.style.PanelAppThemeTransparent),
            display = DpPerMeterDisplayOptions(),
        )
    },
    IsdkPanelResize(    // Add this line
        enabled = true, // Add this line
    )                   // Add this line
),

When IsdkPanelResize is enabled, the system automatically adds IsdkPanelGrabHandle, which provides interactive colliders for edges and corners.

Step 4: Choose a resize mode

Add the resizeMode property inside IsdkPanelResize from the previous step.

IsdkPanelResize(
    enabled = true,
    resizeMode = ResizeMode.Relayout, // Add this line
)

resizeMode determines how resizing affects the panel.

Mode	Behavior	Best for
`ResizeMode.Simple`	Modifies entity scale; content scales proportionally	Static content, images
`ResizeMode.Relayout`	Adjusts panel dimensions and re-renders UI at new resolution	Dynamic UI, text, interactive elements
`ResizeMode.None`	Handles visible but non-functional; use for custom logic	Custom resize implementations

Note: When using ResizeMode.None, the resize handles appear but no automatic resize occurs. Monitor the activeResizeCorner property to track which corner is being manipulated, then implement your own resize logic using an InputListener component.

Step 5: Set the dimension constraints

Use minDimensions and maxDimensions to constrain the panel size (values in meters).

IsdkPanelResize(
    enabled = true,
    resizeMode = ResizeMode.Relayout,
    minDimensions = Vector2(0.5f, 0.3f), // Add this line
    maxDimensions = Vector2(3.0f, 2.0f), // Add this line
)

Step 6: Preserve the aspect ratio

Set preserveAspectRatio to maintain the panel’s width-to-height ratio during resize.

IsdkPanelResize(
    enabled = true,
    resizeMode = ResizeMode.Relayout,
    minDimensions = Vector2(0.5f, 0.3f),
    maxDimensions = Vector2(3.0f, 2.0f),
    preserveAspectRatio = true, // Add this line
)

Step 7: Combine resize with grabbing

Add the IsdkGrabbable component.

IsdkPanelResize(
    enabled = true,
    resizeMode = ResizeMode.Relayout,
    minDimensions = Vector2(0.5f, 0.3f),
    maxDimensions = Vector2(3.0f, 2.0f),
    preserveAspectRatio = true,
),
IsdkGrabbable(enabled = true) // Add this line

Panels with both IsdkPanelResize and IsdkGrabbable components allow users to both move and resize them. The system automatically distinguishes between grab handles (for moving) and resize handles (for resizing).

Troubleshooting

Issue	Solution
Resize handles not visible	Verify `VRFeature` is registered in `registerFeatures()`
Resize not working	Check that `enabled = true` and `resizeMode` is not `None`
Panel resizes beyond bounds	Set `minDimensions` and `maxDimensions` constraints

Did you find this page helpful?