Creating Widgets With Jetpack Compose Glance

What is Glance ?

Jetpack Glance is a framework for creating small, lightweight, and efficient app widgets using Kotlin APIs. It is designed to be used for displaying information that users need to know at a glance.

How we create widgets with Jetpack Glance?

Now we show step by step:

Setup:

Let’s add the dependencies in your app’s module based on the features you need.

dependencies {
    // For Glance support
    implementation("androidx.glance:glance:1.0.0-rc01")
    
    // For AppWidgets support
    implementation("androidx.glance:glance-appwidget:1.0.0-rc01")

    // For Wear-Tiles support
    implementation("androidx.glance:glance-wear-tiles:1.0.0-alpha05")
}

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.1.0-beta03"
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }
}

Create Widget Receiver class:

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

Create our Widget ui:

/* Import Glance Composables
 In the event there is a name clash with the Compose classes of the same name,
 you may rename the imports per https://kotlinlang.org/docs/packages.html#imports
 using the `as` keyword.

import androidx.glance.Button
import androidx.glance.layout.Column
import androidx.glance.layout.Row
import androidx.glance.text.Text
*/
class MyAppWidget : GlanceAppWidget() {

    override suspend fun provideGlance(context: Context, id: GlanceId) {
        // Load data needed to render the AppWidget.
        // Use `withContext` to switch to another thread for long running
        // operations.

        provideContent {
            // create your AppWidget here
            MyContent()
        }
    }

    @Composable
    private fun MyContent() {
        Column(
            modifier = GlanceModifier.fillMaxSize(),
            verticalAlignment = Alignment.Top,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "Where to?", modifier = GlanceModifier.padding(12.dp))
            Row(horizontalAlignment = Alignment.CenterHorizontally) {
                Button(
                    text = "Home",
                    onClick = actionStartActivity<MainActivity>()
                )
                Button(
                    text = "Work",
                    onClick = actionStartActivity<MainActivity>()
                )
            }
        }
    }
}

Create AppWidgetProviderInfo metadata:

Create and define the app widget info in the @xml/my_app_widget_info file.

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:initialLayout="@layout/glance_default_loading_layout">
</appwidget-provider>

Register the provider of the app widget in your AndroidManifest.xml file and the associated metadata file:

<receiver android:name=".glance.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>

And do this we create our custom widgets:

Finally, I hope this was helpful for you, you can view all the code by linking to my Github Repository.

Sources used:

https://developer.android.com/jetpack/compose/glance/create-app-widget

https://medium.com/@daniel.atitienei/creating-widgets-with-jetpack-compose-glance-d27d7e9a54c1