Getting started with the Jetpack Glance SDK

With Jetpack Glance, you can now leverage familiarity with Compose syntax to write your app widgets. This is a brief guide to writing your own Android widgets using this new library. At the time of writing, Jetpack Glance was in beta.

This article will guide you through the set up/integration so you can focus on building the Composables for your widget.

Add the required dependencies in the app or module build.gradle.kts:

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

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.1.0-beta03"
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }
}

NOTE: If you include the above in a separate module from your app module, you’ll need to add the dependencies to your app level build.gradle.kts as well. Otherwise your widget will not appear in the home screen’s widget selection screen.

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

Write your widget and widget receiver (broadcast receiver):

object MyGlanceWidget : GlanceAppWidget() {

    override suspend fun provideGlance(context: Context, id: GlanceId) =
        provideContent {
            Text("Hello, my glance widget")
        }
}


class MyGlanceWidgetReceiver : GlanceAppWidgetReceiver() {
    override val glanceAppWidget: GlanceAppWidget
        get() = MyGlanceWidget
}

Define the Glance provider info in res/xml/my_widget_provider_info.xml:

<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
   android:description="@string/my_app_name"
   android:minWidth="50dp"
   android:minHeight="50dp"
   android:resizeMode="horizontal|vertical"
   android:widgetCategory="home_screen" />

Update your AndroidManifest to register the broadcast receiver you wrote above:

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.example.my.widget"
   xmlns:android="http://schemas.android.com/apk/res/android">

   <application>

      <receiver
         android:name=".MyGlanceWidgetReceiver"
         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_widget_provider_info" />
      </receiver>
   </application>
</manifest>

Now, build the app. Long press on the home screen and select “Widgets”. Your widget will appear in the list. Drag it into your home screen and enjoy!

Dependency injection

You can also use dependency injection frameworks on Glance widgets. For instance, you would set up injection like you normally would for BroadcastReceviers, since the GlanceAppWidgetReceiver extends BroadcastReceiver. For instance, if you’re using Dagger 2, you could do the following:

@Module
interface MyGlanceWidgetReceiverModule {
    @ContributesAndroidInjector
    abstract fun contributesMyGlanceWidgetReceiver(): MyGlanceWidgetReceiver
}

Then, inject what you need into your GlanceWidgetReceiver to perform actions, etc:

class MyGlanceWidgetReceiver: GlanceAppWidgetReceiver() {

    @Inject
    internal lateinit var myDependency: MyInjectDependency

    override fun onReceive(context: Context, intent: Intent) {
        AndroidInjection.inject(this, context)
        myDependency.execute()
    }
}

If you liked this article, please consider supporting my page so I can bring you more articles:

Please consider supporting me

Kelvin Watson is android apps, medium, muscles, bodybuilding

For more information, check out the following resources:

Glance | Jetpack | Android Developers