Android Widget With Compose

A modern Android Widget implementation using Jetpack Compose Glance. This project demonstrates how to build interactive home screen widgets.

[!IMPORTANT]
Check out the full guide here:
👉 Android Widget Setup with Jetpack Compose Glance - Medium 👈

[!IMPORTANT] Similar project with (Dart Language) :point_right: Android_Widget_With_Compose_With_Flutter :point_left: <br />

✨ Features

• Glance Framework: Leverages androidx.glance for building app widgets with Compose-like syntax.
• Material 3 Support: Fully compatible with the latest Material Design systems for widgets.
• Edge-to-Edge Optimized: Configured for the latest Android standards (Target SDK 36).
• Clean Architecture: Demonstrates a clear separation between the Widget Receiver and the UI Content.

🛠️ Setup

Step 1 add the follow dependencies libraries

val composeGlanceWidgetVersion by extra("1.1.1")

dependencies {

    //...
    //Glance Widget
    implementation("androidx.glance:glance-appwidget:$composeGlanceWidgetVersion")
    //Using Material 2
    implementation("androidx.glance:glance-material:$composeGlanceWidgetVersion")
    //Using Material 3
    implementation("androidx.glance:glance-material3:$composeGlanceWidgetVersion")
}

Steps 2 Create the Glance Receiver class that extend GlanceAppWidgetReceiver() and return the Widget Class

class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {
    override val glanceAppWidget: GlanceAppWidget
        get() = MyAppWidget()
}

Step 3 Create the xml file into the xml directory (configuration to declare the size etc.)

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialLayout="@layout/glance_default_loading_layout" android:minWidth="250dp"
    android:minHeight="50dp" android:resizeMode="horizontal|vertical"
    android:widgetCategory="home_screen">
</appwidget-provider>

Step 4 Register the Receiver Class into the Manifest and set the xml configuration for the Glance Widget

<receiver android:name=".glance_widget.receiver.MyAppWidgetReceiver" android:exported="true">
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
    </intent-filter>
    <meta-data android:name="android.appwidget.provider"
        android:resource="@xml/my_app_widget_info" />
</receiver>

Step 5 Create the Widget that extend GlanceAppWidget() class

//...
class MyAppWidget : GlanceAppWidget() {

    override suspend fun provideGlance(context: Context, id: GlanceId) {
        provideContent {
            MyContent(context) //Compose UI
        }
    }
    //....
}

🔧 Versioning

• Target SDK: 36
• Minimum SDK: 29
• Kotlin Version: 2.3.10
• Gradle Version: 9.1.0
• Glance Version: 1.1.1

📚 APIs & References

• Official Documentation: Create an app widget with Glance

⭐ Stargazers

If you find this project useful, please give it a star!
View Stargazers on GitHub

🙏 Support & Contributions

This project is actively maintained. Feedback, bug reports, and feature requests are welcome! Please feel free to open an issue or submit a pull request.