As seções a seguir descrevem como criar um widget de app simples com o Glance.
Declarar AppWidget
no manifesto
Depois de concluir as etapas de configuração, declare o AppWidget
e os
metadados dele no app.
- Registre o provedor do widget de app no seu arquivo
AndroidManifest.xml
e no arquivo de metadados associado:
<receiver android:name=".glance.MyReceiver"
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>
- Estenda o receptor
AppWidget
deGlanceAppWidgetReceiver
:
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { override val glanceAppWidget: GlanceAppWidget = TODO("Create GlanceAppWidget") }
Adicione os metadados AppWidgetProviderInfo
.
Em seguida, siga esta etapa para adicionar os metadados AppWidgetProviderInfo
:
Siga o guia Criar um widget simples para criar e definir as informações do widget do app no arquivo
@xml/my_app_widget_info
.A única diferença do Glance é que não há nenhum XML
initialLayout
, mas você precisa definir um. Você pode usar o layout de carregamento predefinido fornecido na biblioteca:
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
android:initialLayout="@layout/glance_default_loading_layout">
</appwidget-provider>
Definir GlanceAppWidget
Crie uma nova classe que se estenda de
GlanceAppWidget
e modifique o métodoprovideGlance
. Este é o método em que você pode carregar dados necessários para renderizar o widget:
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 { // create your AppWidget here Text("Hello World") } } }
- Instancie-o no
glanceAppWidget
no seuGlanceAppWidgetReceiver
:
class MyAppWidgetReceiver : GlanceAppWidgetReceiver() { // Let MyAppWidgetReceiver know which GlanceAppWidget to use override val glanceAppWidget: GlanceAppWidget = MyAppWidget() }
Você configurou um AppWidget
usando o Glance.
Criar interface
O snippet a seguir demonstra como criar a interface:
/* 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 GlanceTheme { MyContent() } } } @Composable private fun MyContent() { Column( modifier = GlanceModifier.fillMaxSize() .background(GlanceTheme.colors.background), verticalAlignment = Alignment.Top, horizontalAlignment = Alignment.CenterHorizontally ) { Text(text = "Where to?", modifier = GlanceModifier.padding(12.dp)) Row(horizontalAlignment = Alignment.CenterHorizontally) { Button( text = "Home", onClick = actionStartActivity<MyActivity>() ) Button( text = "Work", onClick = actionStartActivity<MyActivity>() ) } } } }
O exemplo de código anterior faz o seguinte:
- No
Column
de nível superior, os itens são colocados um após o outro. - O
Column
expande o tamanho para corresponder ao espaço disponível (usando oGlanceModifier
), alinha o conteúdo à parte superior (verticalAlignment
) e o centraliza horizontalmente (horizontalAlignment
). - O conteúdo do
Column
é definido usando a lambda. A ordem é importante.- O primeiro item em
Column
é um componenteText
com12.dp
de padding. - O segundo item é uma
Row
, em que os itens são colocados horizontalmente, um após o outro, com doisButtons
centralizados horizontalmente (horizontalAlignment
). A exibição final depende do espaço disponível. A imagem abaixo é um exemplo de como isso pode ficar:
- O primeiro item em
É possível mudar os valores de alinhamento ou aplicar diferentes valores de modificadores, como padding, para mudar a posição e o tamanho dos componentes. Consulte a documentação de referência para ver uma lista completa de componentes, parâmetros e modificadores disponíveis para cada classe.