Skip to main content
This guide walks you through setting up Lumo UI in a new or existing Android project using Jetpack Compose.

​
Prerequisites

Before you begin, ensure you have:
  • Android Studio Hedgehog (2023.1.1) or later
  • Kotlin 2.1.0 or later
  • Minimum SDK 24 (Android 7.0)
  • Target SDK 35 (Android 15)

​
Project Setup

1

Create or Open Android Project

If you’re starting fresh, create a new Android project with Jetpack Compose support in Android Studio.Choose:
  • Empty Compose Activity template
  • Minimum SDK: API 24
  • Language: Kotlin
2

Configure Gradle Version Catalog

Add Lumo UI dependencies to your gradle/libs.versions.toml file:
gradle/libs.versions.toml
[versions]
compileSdk = "35"
minSdk = "24"
targetSdk = "35"

kotlin = "2.1.0"
android-gradle-plugin = "8.7.3"

androidx-activity-compose = "1.9.3"
androidx-compose-bom = "2024.12.01"
nomanr-composables = "1.1.0"

[libraries]
androidx-activity-compose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activity-compose" }
androidx-compose-bom = { module = "androidx.compose:compose-bom", version.ref = "androidx-compose-bom" }
androidx-compose-ui = { module = "androidx.compose.ui:ui" }
androidx-compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling" }
androidx-compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview" }
androidx-compose-foundation = { module = "androidx.compose.foundation:foundation" }
androidx-compose-foundation-layout = { module = "androidx.compose.foundation:foundation-layout" }
androidx-compose-material-iconsExtended = { module = "androidx.compose.material:material-icons-extended" }
androidx-compose-ripple = { module = "androidx.compose.material:material-ripple", version = "1.7.5" }
nomanr-composables = { group = "com.nomanr", name = "composables", version.ref = "nomanr-composables" }

[plugins]
android-application = { id = "com.android.application", version.ref = "android-gradle-plugin" }
android-library = { id = "com.android.library", version.ref = "android-gradle-plugin" }
kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
3

Configure App Module build.gradle.kts

Update your app-level build.gradle.kts file:
build.gradle.kts
plugins {
    alias(libs.plugins.android.application)
    alias(libs.plugins.kotlin.android)
    alias(libs.plugins.compose.compiler)
    id("com.nomanr.plugin.lumo")
}

android {
    namespace = "com.example.yourapp"
    compileSdk = libs.versions.compileSdk.get().toInt()

    defaultConfig {
        applicationId = "com.example.yourapp"
        minSdk = libs.versions.minSdk.get().toInt()
        targetSdk = libs.versions.targetSdk.get().toInt()
        versionCode = 1
        versionName = "1.0"

        vectorDrawables {
            useSupportLibrary = true
        }
    }

    buildTypes {
        release {
            isMinifyEnabled = false
            proguardFiles(
                getDefaultProguardFile("proguard-android-optimize.txt"),
                "proguard-rules.pro"
            )
        }
    }
    
    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_17
        targetCompatibility = JavaVersion.VERSION_17
    }
    
    kotlinOptions {
        jvmTarget = "17"
    }
    
    buildFeatures {
        compose = true
    }
    
    packaging {
        resources {
            excludes += "/META-INF/{AL2.0,LGPL2.1}"
        }
    }
}

dependencies {
    implementation(libs.androidx.activity.compose)
    implementation(platform(libs.androidx.compose.bom))
    implementation(libs.androidx.compose.ui)
    implementation(libs.androidx.compose.ui.tooling)
    implementation(libs.androidx.compose.ui.tooling.preview)
    implementation(libs.androidx.compose.foundation)
    implementation(libs.androidx.compose.foundation.layout)
    implementation(libs.androidx.compose.material.iconsExtended)
    implementation(libs.nomanr.composables)
    implementation(libs.androidx.compose.ripple)
}
The com.nomanr.plugin.lumo plugin generates UI component templates for your project.
4

Create UI Components Module (Optional)

For better separation, create a separate library module for your UI components:
ui-components/build.gradle.kts
plugins {
    alias(libs.plugins.android.library)
    alias(libs.plugins.kotlin.android)
    alias(libs.plugins.compose.compiler)
}

android {
    namespace = "com.example.yourapp.ui_components"
    compileSdk = libs.versions.compileSdk.get().toInt()

    defaultConfig {
        minSdk = libs.versions.minSdk.get().toInt()
    }

    buildFeatures {
        compose = true
    }

    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_17
        targetCompatibility = JavaVersion.VERSION_17
    }

    kotlinOptions {
        jvmTarget = "17"
    }
}

dependencies {
    api(libs.androidx.activity.compose)
    api(platform(libs.androidx.compose.bom))
    api(libs.androidx.compose.ui)
    api(libs.androidx.compose.ui.tooling)
    api(libs.androidx.compose.ui.tooling.preview)
    api(libs.androidx.compose.foundation)
    api(libs.androidx.compose.foundation.layout)
    api(libs.androidx.compose.material.iconsExtended)
    api(libs.nomanr.composables)

    implementation(libs.androidx.compose.ripple)
}
Then reference it in your app module:
build.gradle.kts
dependencies {
    implementation(project(":ui-components"))
    // ... other dependencies
}
5

Initialize Theme in MainActivity

Wrap your app content with AppTheme:
MainActivity.kt
package com.example.yourapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.nomanr.lumo.ui.AppTheme
import com.nomanr.lumo.ui.components.Button
import com.nomanr.lumo.ui.components.ButtonVariant
import com.nomanr.lumo.ui.components.Scaffold

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AppTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    MainScreen(modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

@Composable
fun MainScreen(modifier: Modifier = Modifier) {
    Button(
        text = "Hello Lumo UI",
        variant = ButtonVariant.Primary,
        onClick = { /* Handle click */ },
        modifier = modifier.padding(16.dp)
    )
}
6

Sync and Build

Click Sync Now in Android Studio to download dependencies, then build and run your app.

​
Project Structure

A typical Lumo UI Android project follows this structure: 
your-app/
├── app/                          # Application module
│   ├── src/main/
│   │   ├── java/com/example/yourapp/
│   │   │   └── MainActivity.kt
│   │   ├── res/
│   │   └── AndroidManifest.xml
│   └── build.gradle.kts
├── ui-components/                # Optional UI library module
│   ├── src/main/java/
│   └── build.gradle.kts
├── gradle/
│   └── libs.versions.toml        # Version catalog
├── build.gradle.kts
└── settings.gradle.kts

​
Troubleshooting

Ensure you’ve added the nomanr-composables dependency and synced your project. The theme is provided by this library.
implementation(libs.nomanr.composables)
Make sure your Kotlin version matches the Compose compiler version:
kotlin = "2.1.0"
compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
Lumo UI requires minimum SDK 24. Update your minSdk:
defaultConfig {
    minSdk = 24
}
Enable vector drawable support in your defaultConfig:
defaultConfig {
    vectorDrawables {
        useSupportLibrary = true
    }
}

​
Next Steps

Explore Components

Browse all available Lumo UI components

Customize Theme

Learn how to customize colors, typography, and shapes

Component Customization

Deep dive into customizing individual components

Multiplatform Setup

Use Lumo UI across Android, iOS, Desktop, and Web

Build docs developers (and LLMs) love

Get started for freeTalk to us