Android platformCompose module

Lumen for Android

Use the shared Lumen foundations through Jetpack Compose and Material 3 while preserving Android interaction and accessibility conventions.

Start building Browse components

Packagecom.santi020k:lumen-compose

Install com.santi020k:lumen-compose:2.1.0 for Android apps. Add com.santi020k:lumen-compose-wear:2.1.0 only to a Wear OS module, then wrap content in the appropriate Lumen theme.

Get started

Install and configure

Install com.santi020k:lumen-compose:2.1.0 for Android apps. Add com.santi020k:lumen-compose-wear:2.1.0 only to a Wear OS module, then wrap content in the appropriate Lumen theme.

Before you begin

What you need

Android Studio with JDK 21 or newer
Android SDK 37 and an emulator or USB-debuggable device
Maven Central enabled in the application repositories

Install from Maven Central
Add implementation("com.santi020k:lumen-compose:2.1.0") to the application module.
Add the Wear artifact when needed
For a watch target, add implementation("com.santi020k:lumen-compose-wear:2.1.0") to the Wear module. Keep it out of phone and tablet modules that do not render Wear UI.
Add the theme provider
Wrap application content in LumenTheme. It follows the system appearance by default and keeps Lumen and Material 3 content aligned.
Sync and run
Sync Gradle, then run an emulator, a connected Android device, or build a debug APK.

// app/build.gradle.kts
repositories {
    mavenCentral()
}

dependencies {
    implementation("com.santi020k:lumen-compose:2.1.0")
}

// wear/build.gradle.kts
repositories {
    mavenCentral()
}

dependencies {
    implementation("com.santi020k:lumen-compose-wear:2.1.0")
}

import com.santi020k.lumen.LumenTheme

LumenTheme {
    LumenSurface {
        LumenText("Welcome", variant = LumenTextVariant.Title)
        LumenButton(onClick = ::continueFlow) {
            Text("Continue")
        }
    }
}

Try every component

Run the Android playground

Open the Android playground directory in Android Studio, let Gradle sync, select an emulator or connected device, and press Run. The command-line build writes a directly installable debug APK under the app build directory.

Google Play · pending

Android store release is under review

The Android release is still awaiting Google Play approval. Until it is approved, run the local Compose playground or build the debug APK from the repository.

git clone https://github.com/santi020k/lumen.git
cd lumen
pnpm playground:android:build

open apps/playground-android

Installing locally versus publishing

You can run the gallery locally before configuring any store account.

Debug APKs can be installed directly and do not require Play Console credentials.
Google Play distribution requires a signed Android App Bundle and a Play Console application.
Configure the release keystore outside source control before creating the production bundle.

Appearance

Choose and change the theme

LumenTheme follows the device appearance by default and maps Lumen semantic colors into Material 3. Pass darkTheme explicitly only when the application offers its own saved appearance preference.

LumenTheme {
    AppNavigation()
}

var useDarkTheme by rememberSaveable { mutableStateOf(false) }

LumenTheme(darkTheme = useDarkTheme) {
    AppNavigation()
}

Style with semantic roles

LumenTheme provides both LocalLumenTheme and MaterialTheme. Prefer Lumen components and semantic roles so Lumen and Material content stay visually consistent inside the same hierarchy.

Verify both appearances

Change the emulator or device appearance while the app is running.
Check system bars, dialogs, fields, and disabled or error states in both schemes.
Test large font sizes, high-contrast settings, and TalkBack descriptions.

Continue with AI

Give your coding tool the Lumen workflow

Install the portable skill once, open your application in a compatible coding tool, and name the target platform in the request. The skill reads the native package and documentation before selecting components.

1 · Install the skill

npx skills add santi020k/lumen --skill lumen-ui

npx skills add santi020k/lumen --skill lumen-ui

Follow the installer prompts and select the AI coding tools available on your machine.

2 · Ask for the native target

Use $lumen-ui to build this screen with Jetpack Compose.
Use the local lumen-compose module, LumenTheme, and public Compose components.
Preserve Android navigation and state, and include loading, empty, error, and TalkBack behavior.

Use $lumen-ui to build this screen with Jetpack Compose.
Use the local lumen-compose module, LumenTheme, and public Compose components.
Preserve Android navigation and state, and include loading, empty, error, and TalkBack behavior.

Review the generated package imports, component states, and platform accessibility behavior.

The Agent Skill and optional MCP server cover web and native adapters. MCP can list the components available for this platform and return installation, setup, API examples, accessibility guidance, and reference source for each documented native component.

Open the complete AI setup guide

Real platform output

Rendered by Android / Compose

This verified capture comes from the native preview host using the package in this repository. The controls are rendered by Android, not by HTML.

Lumen component gallery running in a native Jetpack Compose Android application

Supported surface

Components and capabilities

Compose implements the shared native tier using Kotlin and Material 3 conventions. Watch-only primitives ship separately so phone and tablet applications do not acquire Wear dependencies.

Sparkline

Line chart

Bar chart

Pie chart

Scatter chart

Heatmap

Range chart

Combo chart

Theme

Text

Surface

Icon

Icon button

Button

Text field

Badge

Divider

Spinner

Card

Alert

Progress

Skeleton

Disclosure

Avatar

Textarea

Field group

Chip

Button group

Toast

Toggle

Settings row

Picker

Slider

Search field

Phone input

Checkbox

Radio group

Segmented control

Tabs

Navigation bar

Empty state

Error state

List row

Banner

Stat

Gauge

Section header

Status bar

Navigation bar scroll behavior

Navigation bar accessory

Adaptive navigation scaffold

Date field

Date range field

Floating action button

Graphic

Backdrop

Illustration

Image

Alert dialog

Sheet

Share button

Wearable action

Wearable progress

Wearable status

Wearable metric

Wearable list row

Open the full component reference

Platform contract

Designed for Android / Compose

Generated foundations

Generated colors, dimensions, typography, motion, and elevation map into Compose-native values.

Material 3 integration

LumenTheme maps the shared semantic palette into Material 3 while exposing the full token object.

Android accessibility

Components preserve native focus, state, input, and TalkBack semantics.

Move between platform guidance without losing the shared Lumen design language.