#Android Introduction

Voltra brings the power of JSX-based UI to Android Home Screen widgets. Using Jetpack Compose Glance under the hood, Voltra allows you to define Android widgets using a set of primitives that map directly to Glance components.

#Widgets on Android

Android widgets have different layout and styling rules compared to iOS Live Activities. While iOS uses SwiftUI-based primitives (VStack, HStack, etc.), Android uses Jetpack Compose Glance primitives (Column, Row, Box).

Voltra abstracts these differences where possible, but provides platform-specific namespaces to ensure your UI looks and behaves correctly on each platform.

Voltra also exposes Android-specific semantic dynamic colors through AndroidDynamicColors, which lets widgets follow the current Material palette without requiring a JavaScript re-render. See Dynamic Colors.

Voltra also supports Android ongoing notifications for app-driven, persistent status updates. See Managing Android Ongoing Notifications.

#Simple Android Widget

import { VoltraAndroid } from 'voltra'

const MyWidget = () => (
  <VoltraAndroid.Column
    style={{
      padding: 16,
      backgroundColor: '#3DDC84',
      width: '100%',
      height: '100%'
    }}
    verticalAlignment="center-vertically"
    horizontalAlignment="center-horizontally"
  >
    <VoltraAndroid.Text
      style={{
        color: 'white',
        fontSize: 18,
        fontWeight: 'bold'
      }}
    >
      Android Widget
    </VoltraAndroid.Text>
    <VoltraAndroid.Text
      style={{
        color: 'white'
      }}
    >
      Powered by Voltra & Glance
    </VoltraAndroid.Text>
  </VoltraAndroid.Column>
)

#Key Differences

• Primitives: Use VoltraAndroid.Column, VoltraAndroid.Row, and VoltraAndroid.Box instead of stacks.
• Alignment: Android uses specific alignment props like verticalAlignment and horizontalAlignment.
• Sizing: Use "100%" for full size or "auto" for wrapping content.

#Testing and Previews

You can preview your Android widgets directly in your app using the VoltraWidgetPreview component. This allows for fast iteration without needing to constantly check the home screen.

Learn more in the Testing and Previews guide.

#Next Steps

Check out the Setup guide to set up Voltra for Android.

For notification-based experiences, see Managing Android Ongoing Notifications.