Material 3 Colors in Glance Widget (Jetpack Compose)

I try to match the original colors, Google uses in their widgets. But if you check the contentColor of my widget buttons vs. the yellow "+" button background of the Google Calender widget, you see that it is not matching that quite well.

I rebuilded the widget already with jetpack compose to be able to use Glance Theme:

    //This dependency integrates Jetpack Compose with the Activity class, enabling the use of Compose in Android activities.
    implementation("androidx.activity:activity-compose:1.9.3")
//Compose Bill of Materials (BOM), which helps manage versions of Compose libraries. In this case, it's using version 2023.03.00 for Compose dependencies.
    implementation(platform("androidx.compose:compose-bom:2024.10.00"))
//This dependency includes the fundamental UI elements and features provided by Jetpack Compose.
    implementation("androidx.compose.ui:ui")
//This includes tooling and preview functionalities for Compose, assisting with development and debugging UI components.
    implementation("androidx.compose.ui:ui-tooling-preview")
//This dependency includes the Material Design 3 components and styles adapted for Jetpack Compose, allowing the implementation of Material Design principles in your app's UI
    implementation("androidx.compose.material3:material3")

    // For AppWidgets support
    implementation "androidx.glance:glance-appwidget:1.1.1"

    // For interop APIs with Material 3
    implementation "androidx.glance:glance-material3:1.1.1"

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(currentState())
        }
    }
}

I tried to set background/content colors.

    @OptIn(ExperimentalGlanceRemoteViewsApi::class, ExperimentalGlanceApi::class)
    @Composable
    fun MyContent(currentState: Any) {
        CircleIconButton(
            imageProvider = ImageProvider(R.drawable.ic_baseline_restore_page_24_widget),
            contentDescription = "",
            onClick = { recat() },
            enabled = true,
            backgroundColor = GlanceTheme.colors.secondaryContainer,
            contentColor = GlanceTheme.colors.primary,
            modifier = GlanceModifier.defaultWeight()
        )
    }

The screenshot above shows the closest I could get. But if I apply different styles to the Google Launcher the colors start to differ even more than shown above.

I’m afraid it is mainly influenced by the drawable files I use:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="#000000">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M14,2L6,2c-1.1,0 -1.99,0.9 -1.99,2L4,20c0,1.1 0.89,2 1.99,2L18,22c1.1,0 2,-0.9 2,-2L20,8l-6,-6zM12,18c-2.05,0 -3.81,-1.24 -4.58,-3h1.71c0.63,0.9 1.68,1.5 2.87,1.5 1.93,0 3.5,-1.57 3.5,-3.5S13.93,9.5 12,9.5c-1.35,0 -2.52,0.78 -3.1,1.9l1.6,1.6h-4L6.5,9l1.3,1.3C8.69,8.92 10.23,8 12,8c2.76,0 5,2.24 5,5s-2.24,5 -5,5z"/>
</vector>

Question would be what are the correct tint/fill colors to use?

You need to sign in to view this answers