Glance Widget Advanced: Custom UI, WorkManager & Size-Responsive Layouts

#android #kotlin #compose #tutorial

Glance Widget Advanced: Custom UI, WorkManager & Size-Responsive Layouts

Glance simplifies widget development with Compose-like API. Advanced techniques include responsive layouts, custom UI components, and background updates.

Size-Responsive Layout

@Composable
fun ResponsiveWidget() {
    val size = LocalSize.current

    when {
        size.width < 120.dp -> SmallLayout()
        size.width < 200.dp -> MediumLayout()
        else -> LargeLayout()
    }
}

@Composable
fun SmallLayout() {
    Column(modifier = GlanceModifier.fillMaxSize().padding(8.dp)) {
        Text("Compact")
    }
}

@Composable
fun LargeLayout() {
    Row(modifier = GlanceModifier.fillMaxSize().padding(12.dp)) {
        Column(modifier = GlanceModifier.defaultWeight()) {
            Text("Large Widget")
        }
    }
}

WorkManager Integration

class WidgetUpdateWorker(context: Context, params: WorkerParameters) : Worker(context, params) {
    override fun doWork(): Result {
        // Fetch data
        val data = fetchLatestData()

        // Update widget state
        GlanceAppWidgetManager(applicationContext).updateAppWidget(MyWidget::class.java)
        return Result.success()
    }
}

// Schedule periodic updates
fun scheduleWidgetUpdates() {
    val updateWork = PeriodicWorkRequestBuilder<WidgetUpdateWorker>(
        30, TimeUnit.MINUTES
    ).build()

    WorkManager.getInstance(context).enqueueUniquePeriodicWork(
        "widget_update",
        ExistingPeriodicWorkPolicy.KEEP,
        updateWork
    )
}

Custom Clickable Areas

@Composable
fun InteractiveWidget() {
    Column(
        modifier = GlanceModifier.fillMaxSize().clickable(
            onClick = ActionStartActivity(MainActivity::class.java)
        )
    ) {
        Text("Click me!")
    }
}

Data Persistence with GlanceStateDefinition

class MyWidgetStateDefinition : GlanceStateDefinition<MyWidgetState> {
    override suspend fun getState(context: Context): MyWidgetState {
        // Load from preferences or database
        return MyWidgetState(data = "loaded")
    }

    override suspend fun updateState(context: Context, state: MyWidgetState) {
        // Save state
    }
}