Tablet & Orientation

At a Glance

The Unveily SDK supports tablet layout optimization and screen rotation (landscape/portrait) out of the box for all plans (Basic, Standard, and Pro). These features are applied automatically without any extra configuration.

Screen Rotation Handling

How It Works

Because android:configChanges is declared in AndroidManifest.xml, the Activity is not recreated when the device rotates.

<!-- AndroidManifest.xml — handled automatically, no changes needed -->
<activity
    android:name=".MainActivity"
    android:configChanges="orientation|screenSize|keyboardHidden|screenLayout|smallestScreenSize"
    ... />

Thanks to this, when the device rotates:

The WebView's load state (URL, scroll position) is preserved.
The JavaScript execution context is not reset.
Login sessions, form inputs, etc. are kept intact.

Automatic Handling on Rotation

When a rotation occurs, the SDK automatically:

Closes all open panels (side drawer, top-down menu, etc.).
Reapplies system bar insets (padding) for the new orientation.
Sends an onOrientationChanged event to the web page.

Web ↔ App Orientation API

Get Current Orientation (synchronous)

// Returns "portrait" or "landscape"
const dir = window.unveilyBridge.app.orientation();
console.log(dir); // "portrait"

Listen for Rotation Events

The native side calls this function automatically whenever a rotation occurs.

function onOrientationChanged(info) {
  // info.orientation  — "portrait" | "landscape"
  // info.isLandscape  — boolean
  console.log('Orientation changed:', info.orientation);

  if (info.isLandscape) {
    // Handle landscape layout
    document.body.classList.add('landscape');
  } else {
    document.body.classList.remove('landscape');
  }
}

The onOrientationChanged function is only called after the page has loaded. Use window.unveilyBridge.app.orientation() to check the initial orientation directly.

Tablet Support

Automatic Drawer Width Adjustment

The side drawer width changes automatically based on screen size.

Device Type	Minimum Width	Drawer Width
Smartphone	< 600dp	280dp
7" Tablet	≥ 600dp	320dp
10" Tablet	≥ 720dp	380dp

This is implemented using Android's values-sw600dp / values-sw720dp resource system and is selected automatically.

Check if Tablet (synchronous)

const tablet = window.unveilyBridge.app.isTablet();
// Returns true if smallestWidth ≥ 600dp

if (tablet) {
  // Apply tablet-specific layout
  document.documentElement.setAttribute('data-device', 'tablet');
} else {
  document.documentElement.setAttribute('data-device', 'phone');
}

Check via App Info Callback

It is also included in the getInfo callback:

window.unveilyBridge.app.getInfo(function(info) {
  console.log(info.isTablet);    // true | false
  console.log(info.orientation); // "portrait" | "landscape"
});

Recommended Initialization Pattern

We recommend reading both orientation and device type once on page load and applying the layout together.

document.addEventListener('DOMContentLoaded', function () {
  if (!window.unveilyBridge) return;

  const isTablet = window.unveilyBridge.app.isTablet();
  const orientation = window.unveilyBridge.app.orientation();

  applyLayout(isTablet, orientation);
});

function onOrientationChanged(info) {
  const isTablet = window.unveilyBridge.app.isTablet();
  applyLayout(isTablet, info.orientation);
}

function applyLayout(isTablet, orientation) {
  const root = document.documentElement;
  root.dataset.device = isTablet ? 'tablet' : 'phone';
  root.dataset.orientation = orientation;
}

/* CSS example */
[data-device="tablet"] .sidebar { width: 280px; }
[data-device="phone"]  .sidebar { display: none; }

[data-orientation="landscape"] .hero { height: 50vh; }
[data-orientation="portrait"]  .hero { height: 70vh; }

QR Scan and Rotation

The QR scan screen (QRScanActivity) is locked to portrait for scanning stability. Even if you rotate the device during a QR scan, the scan screen stays in portrait mode. After the scan completes and you return to the main screen, the current device orientation is applied.

API Summary

API	Return Type	Description
`unveilyBridge.app.isTablet()`	`boolean`	Whether it's a tablet (sw ≥ 600dp)
`unveilyBridge.app.orientation()`	`"portrait" \| "landscape"`	Current orientation
`onOrientationChanged(info)`	Callback function	Called by native on rotation
`info.isLandscape`	`boolean`	Whether in landscape orientation
`info.orientation`	`string`	`"portrait"` or `"landscape"`

Tablet & Orientation

On this page