Location>code7788 >text

Jetpack architecture component learning (6)-Using Glance to implement desktop widgets

Popularity：785 ℃/2025-01-22 15:26:25

Original address:Jetpack architecture component learning (6) - Using Glance to implement desktop widgets - Stars-One's grocery store

The company has successively integrated several apps written by Compose, which have small component functions. By the way, I tried the Glance framework in the Jetpack library.

It feels almost the same as the original Remoteview, but the use of click events is much more convenient than Remoteview.

PS: If you want to see the widgets implemented by Remoteview, you can refer to this article of mineAndroid desktop widget usage-Stars-One’s Grocery Nest

Basic use

1. Add dependencies

Add Glance dependency:

// For AppWidgets support
   implementation ":glance-appwidget:1.1.0"

   // For interop APIs with Material 3
   implementation ":glance-material3:1.1.0"

   // For interop APIs with Material 2
   implementation ":glance-material:1.1.0"

2.Normal related settings

xml folder add widgetwidget_info.xmlConfiguration:

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:andro
    xmlns:tools="/tools"
    android:targetCellWidth="2"
    android:targetCellHeight="2"
    android:minWidth="250dp"
    android:minHeight="250dp"
    android:updatePeriodMillis="0"
    android:initialLayout="@layout/glance_default_loading_layout"
    tools:targetApi="s">
</appwidget-provider>

Manifest file configuration:

<receiver android:name="."
	android:exported="true">
	<intent-filter>
		<action android:name=".APPWIDGET_UPDATE" />
	</intent-filter>
	<meta-data
		android:name=""
		android:resource="@xml/widget_info" />
</receiver>

3. Create widget objects and implement interfaces

A few points to note:

  1. For the Row, Column, Text, etc. of the interface, be sure to use the Glance package, otherwise the interface will not be displayed properly.

The official also explained that the Linearlayout and Framelayout corresponding to the actual last created objects of Row, Box, and Column

  1. The corresponding actionStartActivity method of click jump actually returns an Action object.(actionStartActivity(MainActivity::))Make corresponding jump

In addition to activity, you can also start Service and BoardCast. See this document for details.Handling user interactions | Jetpack Compose | Android Developers

  1. Regarding the method of rounding the background, we currently use an Image and specific content in a Box to implement it, and the Image loads the vector object (the kind of shape) in our drawable.
  2. remember is available in it, but if combined with the animation effect of animateColorAsState, it actually has no effect (just a simple change, no intermediate transition process)
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() {
     //MyAppWidget is similar to the creation of our remoteview
     override val glanceAppWidget: GlanceAppWidget = MyAppWidget()
 }

 class MyAppWidget : GlanceAppWidget() {

     override suspend fun provideGlance(context: Context, id: GlanceId) {

         // In this method, load data needed to render the AppWidget.
         // Use `withContext` to switch to another thread for long running
         // operations.
         provideContent {
             val upSpeed ​​by ().collectAsState(initial = 0L)
             val downloadSpeed ​​by ().collectAsState(initial = 0L)

             Box(()) {
                 Image(provider = ImageProvider(.app_widget_bg), contentDescription = null, modifier = ())

                 Column(()) {
                     Spacer(())
                     Row(().padding(horizontal = )) {
                         (provider = ImageProvider(), contentDescription = null, modifier = ())

                         Spacer(modifier = ())
                         Column(()) {
                             Row(modifier = (), horizontalAlignment = , verticalAlignment = ) {
                                 Text(text = "${upSpeed} Kb/s", style = TextStyle(color = ColorProvider(APP_Primary_color), fontSize = ))
                                 Spacer(modifier = ())
                                 (provider = ImageProvider(.icon_upload_widget), contentDescription = null, modifier = ())
                             }

                             Spacer(modifier = ())

                             Row(modifier = GlanceModifier, horizontalAlignment = , verticalAlignment = ) {
                                 Text(text = "${downloadSpeed} Kb/s", style = TextStyle(color = ColorProvider(APP_Bigfile_color), fontSize = ))
                                 Spacer(modifier = ())
                                 (provider = ImageProvider(.icon_down_widget), contentDescription = null, modifier = ())
                             }
                         }
                     }
                     Spacer(())

                     Box(modifier = ().defaultWeight()) {
                         Image(provider = ImageProvider(.app_widget_bg1), contentDescription = null, modifier = ())
                         Row(
                             modifier = ()
                                 .padding(horizontal = ,), horizontalAlignment =
                         ) {
                             val modifier = ()
                             //todo different item types
                             repeat(3) { index ->
                                 Row(modifier, horizontalAlignment = , verticalAlignment = ) {
                                     (
                                         provider = ImageProvider(.icon_net_test), contentDescription = null, modifier = GlanceModifier
                                             .size()
                                             .clickable(actionStartActivity(MainActivity::))
                                     )
                                 }

                                 Spacer(())
                             }

                         }
                     }


                 }
             }

         }
     }
 }

Other supplements

Update widget method:

val manager = GlanceAppWidgetManager(application)
 val widget = MyAppWidget()
 val glanceIds = ()

  { glanceId ->
 (application, glanceId)
 }

 //The second method (actually the same as the above method, the following is another method encapsulated by the official)
 MyAppWidget().updateAll(application)

refer to

  • Glance Settings | Jetpack Compose | Android Developers
<Previous Next>