Glance は、カラーテーマを管理するための API を提供します。その他のスタイル属性(TextStyle
など)については、トップレベル変数を宣言します。
色を追加する
Glance は、すぐに使えるマテリアル カラーの実装を提供します。組み込みのテーマを使用するには、次の例に示すように、トップレベルのコンポーザブルを GlanceTheme
でラップします。
ダイナミック カラーをサポートするデバイスでは、このテーマはユーザー固有のプラットフォーム カラーから取得されます。他のデバイスでは、これはマテリアル ベースライン テーマにフォールバックします。ラップされたテーマの色を使用してスタイル設定するには、GlanceTheme.colors
を使用します。色が必要な場所であれば、どこでもテーマの値を使用できます。
override suspend fun provideGlance(context: Context, id: GlanceId) { provideContent { GlanceTheme { MyContent() } } } @Composable private fun MyContent() { Image( colorFilter = ColorFilter.tint(GlanceTheme.colors.secondary), // ... ) }
テーマをカスタマイズするには、colors
を GlanceTheme
に渡します。Glance は、マテリアル 2 の androidx.glance:glance-material
相互運用ライブラリと、マテリアル 3 のカラーサポート androidx.glance:glance-material3
を提供します。
たとえば、以下のスニペットに示すように、アプリの既存のマテリアル カラーを ColorProviders
API に渡して、Glance のカラーパターンを作成します。
// 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 ) }
次の例に示すように、すべてのコンポーザブルをラップする GlanceTheme
に、スキームの色を指定します。
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), // ... ) }
サポートされている場合は壁紙のダイナミック カラーを使用し、それ以外の場合はアプリのカラーパターンを GlanceTheme
で条件付きで渡すことができます。これを次のスニペットに示します。
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), // ... ) }
シェイプを追加する
アプリ ウィジェットに特殊なシェイプやシャドウを適用するには、Android Drawables API を使用します。
たとえば、次のスニペットはドローアブル(シェイプ)の作成方法を示しています。
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="16dp"/>
<stroke android:color="@color/outline_color" android:width="1dp"/>
</shape>
これをターゲット コンポーザブルに渡します。
GlanceModifier.background( imageProvider = ImageProvider(R.drawable.button_outline) )