Skip to main content
‹ Back to Tutorials
Intermediate Unity

Unity VR XR Interaction Toolkit Grabbable UI Canvas Tablet

Sep 26, 2022
About this tutorial

In this Unity VR XR Toolkit tutorial, I'll show how to set up a UI Canvas on a tablet that is Grabbable. I'll also show how to add Toggle buttons that you can interact with as a checklist. ► Art Assets - Polygon City - Low Poly https://bit.ly/3ScOYa1 My discord link ► https://discord.gg/DgUdNDT7K

Written Guide

Set aboard a space transport where a supervisor needs a cargo checklist, this tutorial combines two XR Interaction Toolkit features that usually live separately: a grabbable object and a world space UI. The result is a tablet you can physically pick up, hold naturally in your hand, and tap with the ray interactor to check items off.

Make the tablet grabbable

On the tablet, add an XR Grab Interactable component — it brings a Rigidbody along automatically. Enable smooth position and smooth rotation so the tablet doesn't jitter while you move it around in your grip.

Fix the grip with an attach transform

By default, grabbing snaps your hand to the dead center of the object, which looks and feels wrong. The fix is an attach transform: add an empty child called grab point, then drag it into the grab interactable's Attach Transform slot. Test in the headset first — the tablet comes up facing the wrong way — then adjust the grab point's local transform until the blue Z axis points back toward you and the green Y points up. Offset it to the side and add a slight outward angle so the tablet sits in the hand a little askew, the way you'd actually hold one. That small imperfection is what sells the feel.

Attach a world space canvas

Right-click the tablet and add an XR UI Canvas — used instead of a regular canvas because it's pre-configured for world space rather than a camera overlay. Name it tablet UI and add a plain image so you can see the canvas at all. It spawns enormous: select the canvas, lock the scale axes together, and set it to about 0.01, then nudge it out of the tablet's thickness so it's visible on the surface.

Add toggles and fix inherited rotation

Add UI Toggle elements for the checklist — and notice they render upside down and sideways. That's inheritance: the tablet model itself is rotated, and the child canvas picks up those transforms. Correct it on the canvas, not the toggles: rotate 180 degrees on X to flip it right side up, then -90 on Z to bring it vertical. Swap the toggle's default label for a TextMeshPro text object, which renders much cleaner, and size everything to fit the panel.

Test the whole loop

In the headset, the tablet lifts off the table at a natural angle, and the ray interactor checks and unchecks each toggle — no extra wiring needed, since the XR canvas and toggles handle their own interaction. One grabbable, one canvas, one attach transform: a complete diegetic UI.

Unity tools by Bliz Studio
Built for our own games — now on the Asset Store

Multi Tag — unlimited hierarchical tags for any GameObject. Hierarchy Pro — style your whole hierarchy with rules. Made by a Unity dev, for Unity devs.

Explore our Unity assets →