#Testing and Previews (Android)

Voltra provides multiple ways to preview your Android widgets:

1. In-App Previews - Preview layouts within your development app using VoltraWidgetPreview
2. Widget Picker Previews - Customize what users see in the Android widget picker when adding your widget

This page covers in-app previews for development. For widget picker previews, see Plugin Configuration - Widget Picker Previews.

#VoltraWidgetPreview

The VoltraWidgetPreview component renders Voltra Android JSX content at the exact dimensions of standard Android widget sizes.

#Usage

import { VoltraAndroid } from 'voltra/android'
import { VoltraWidgetPreview } from 'voltra/android/client'

export function MyWidgetPreview() {
  return (
    <VoltraWidgetPreview
      family="mediumWide"
      style={{ backgroundColor: '#f0f0f0', borderRadius: 16 }}
    >
      <VoltraAndroid.Column style={{ padding: 16 }}>
        <VoltraAndroid.Text style={{ fontSize: 20, fontWeight: 'bold' }}>
          My Awesome Widget
        </VoltraAndroid.Text>
        <VoltraAndroid.Text>
          This is how it looks on the home screen!
        </VoltraAndroid.Text>
      </VoltraAndroid.Column>
    </VoltraWidgetPreview>
  )
}

#Supported Families

Android widgets use responsive sizing. Voltra provides several standard families based on typical grid dimensions:

#VoltraView (Android)

If you need more control or want to test custom dimensions, you can use the low-level VoltraView component.

import { VoltraView } from 'voltra/android/client'

<VoltraView style={{ width: 200, height: 100 }}>
  <VoltraAndroid.Box style={{ backgroundColor: 'blue', flex: 1 }}>
    <VoltraAndroid.Text color="white">Custom Preview</VoltraAndroid.Text>
  </VoltraAndroid.Box>
</VoltraView>

#Accuracy

The Android preview components use the actual native Glance renderers under the hood. When you provide JSX to VoltraWidgetPreview, it is converted to a native RemoteViews object and rendered using the same logic that Android uses on the home screen.

This ensures that:

• Layout constraints are respected.
• Styling (colors, fonts, spacing) is accurate.
• Component mapping is identical to the production widget.