Design „Live-Anzeige“ implementieren

Glance bietet eine API zum Verwalten des Farbschemas. Deklarieren Sie für andere Stilattribute wie TextStyle Variablen auf oberster Ebene.

Farben hinzufügen

Glance bietet eine sofort einsatzbereite Implementierung von Material-Farben. Wenn Sie das integrierte Design verwenden möchten, umschließen Sie das übergeordnete Composable mit GlanceTheme, wie im folgenden Beispiel gezeigt.

Auf Geräten, die dynamische Farben unterstützen, wird dieses Design von den nutzerspezifischen Plattformfarben abgeleitet. Auf anderen Geräten wird das Material-Baseline-Design verwendet. Verwenden Sie GlanceTheme.colors, um Farben aus dem umschlossenen Design zu verwenden. Sie können diese Werte aus dem Design überall dort verwenden, wo eine Farbe benötigt wird.

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

    provideContent {
        GlanceTheme {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

    Image(
        colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary),
        // ...

    )
}

Wenn Sie das Design anpassen möchten, können Sie colors an GlanceTheme übergeben. Glance bietet die Interoperabilitätsbibliothek androidx.glance:glance-material für Material 2 und androidx.glance:glance-material3 für die Unterstützung von Material 3-Farben.

Sie können beispielsweise die vorhandenen Material-Farben Ihrer App an die ColorProviders API übergeben, um ein Glance-Farbschema zu erstellen, wie im folgenden Snippet gezeigt:

// Remember, use the Glance imports
// import androidx.glance.material3.ColorProviders

// Example Imports from your own app
// import com.example.myapp.ui.theme.DarkColors
// import com.example.myapp.ui.theme.LightColors

object MyAppWidgetGlanceColorScheme {

    val colors = ColorProviders(
        light = LightColors,
        dark = DarkColors
    )
}

Stellen Sie die Farben aus dem Schema für das GlanceTheme bereit, das alle Ihre Composables umschließt, wie im folgenden Beispiel gezeigt:

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

    provideContent {
        GlanceTheme(colors = MyAppWidgetGlanceColorScheme.colors) {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {

    Image(
        colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary),
        // ...
    )
}

Wenn du lieber dynamische Farben aus dem Hintergrundbild verwenden möchtest, sofern dies unterstützt wird, und ansonsten das Farbschema deiner App, kannst du das Farbschema deiner App bedingt in GlanceTheme übergeben. Dies wird im folgenden Snippet gezeigt:

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

    provideContent {
        GlanceTheme(
            if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S)
                GlanceTheme.colors
            else
                MyAppWidgetGlanceColorScheme.colors
        ) {
            MyContent()
        }
    }
}

@Composable
private fun MyContent() {
    // ...
    Image(
        colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary),
        // ...
    )
}

Formen hinzufügen

Wenn Sie Ihrem App-Widget spezielle Formen oder Schatten hinzufügen möchten, verwenden Sie die Android Drawables API.

Das folgende Snippet zeigt beispielsweise, wie ein Drawable (eine Form) erstellt wird:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="16dp"/>
    <stroke android:color="@color/outline_color" android:width="1dp"/>
</shape>

Stellen Sie es der komponierbaren Funktion zur Verfügung:

GlanceModifier.background(
    imageProvider = ImageProvider(R.drawable.button_outline)
)

Zurück
UI mit Glance erstellen
Weiter
Interoperabilität auf einen Blick