Create a Widget with Jetpack Compose

Jetpack Compose offers a powerful and declarative approach to building user interfaces for Android apps. But did you know you can leverage Compose to create beautiful and functional home screen widgets as well? This post will guide you through creating a simple widget using Jetpack Glance, a companion library to Compose designed specifically for widgets.

Dependencies

implementation("androidx.glance:glance-appwidget:1.1.0")

// Optional: only if you want to use Material3
implementation("androidx.glance:glance-material3:1.1.0")

Creating the Widget

Widget configuration

You can configure a widget in an xml file. In this file you can configure the essential qualities of your widget. In this example we only use a few parameters, but if you want to learn more you can always check out the official documentation

@xml/my_simple_widget_info.xml

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:description="@string/app_name"
    android:minWidth="130dp"
    android:minHeight="100dp"
    android:resizeMode="horizontal|vertical" <!-- Required for resizing widget -->
    android:widgetCategory="home_screen"
/>