Snippets for Styles in Compose

compose/snippets/build.gradle.kts

@@ -31,7 +31,7 @@ android {
 
     defaultConfig {
         applicationId = "com.example.compose.snippets"
-        minSdk = libs.versions.minSdk.get().toInt()
+        minSdk = 23
         targetSdk = libs.versions.targetSdk.get().toInt()
         versionCode = 1
         versionName = "1.0"

compose/snippets/src/main/java/com/example/compose/snippets/components/DatePickers.kt

@@ -61,6 +61,7 @@ import com.example.compose.snippets.ui.theme.SnippetsTheme
 import java.text.SimpleDateFormat
 import java.util.Date
 import java.util.Locale
+import androidx.compose.ui.platform.LocalLocale
 
 @Preview
 @Composable
@@ -105,7 +106,7 @@ fun DatePickerExamples() {
 // [END_EXCLUDE]
         if (selectedDate != null) {
             val date = Date(selectedDate!!)
-            val formattedDate = SimpleDateFormat("MMM dd, yyyy", Locale.getDefault()).format(date)
+            val formattedDate = SimpleDateFormat("MMM dd, yyyy", LocalLocale.current.platformLocale).format(date)
             Text("Selected date: $formattedDate")
         } else {
             Text("No date selected")
@@ -121,8 +122,8 @@ fun DatePickerExamples() {
         if (selectedDateRange.first != null && selectedDateRange.second != null) {
             val startDate = Date(selectedDateRange.first!!)
             val endDate = Date(selectedDateRange.second!!)
-            val formattedStartDate = SimpleDateFormat("MMM dd, yyyy", Locale.getDefault()).format(startDate)
-            val formattedEndDate = SimpleDateFormat("MMM dd, yyyy", Locale.getDefault()).format(endDate)
+            val formattedStartDate = SimpleDateFormat("MMM dd, yyyy", LocalLocale.current.platformLocale).format(startDate)
+            val formattedEndDate = SimpleDateFormat("MMM dd, yyyy", LocalLocale.current.platformLocale).format(endDate)
             Text("Selected date range: $formattedStartDate - $formattedEndDate")
         } else {
             Text("No date range selected")

compose/snippets/src/main/java/com/example/compose/snippets/designsystems/styles/CustomStates.kt

@@ -0,0 +1,194 @@
+/*
+ * Copyright 2026 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@file:OptIn(ExperimentalFoundationStyleApi::class)
+
+package com.example.compose.snippets.designsystems.styles
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.style.ExperimentalFoundationStyleApi
+import androidx.compose.foundation.style.MutableStyleState
+import androidx.compose.foundation.style.Style
+import androidx.compose.foundation.style.StyleScope
+import androidx.compose.foundation.style.StyleStateKey
+import androidx.compose.foundation.style.styleable
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+
+
+// [START android_compose_styles_custom_key_1]
+enum class PlayerState {
+    Stopped,
+    Playing,
+    Paused
+}
+
+val playerStateKey = StyleStateKey(PlayerState.Stopped)
+// [END android_compose_styles_custom_key_1]
+
+// [START android_compose_styles_custom_key_2]
+// Extension Function on MutableStyleState to query and set the current playState
+var MutableStyleState.playerState
+    get() = this[playerStateKey]
+    set(value) { this[playerStateKey] = value }
+
+fun StyleScope.playerPlaying(value: Style) {
+    state(playerStateKey, value, { key, state -> state[key] == PlayerState.Playing })
+}
+fun StyleScope.playerPaused(value: Style) {
+    state(playerStateKey, value, { key, state -> state[key] == PlayerState.Paused })
+}
+// [END android_compose_styles_custom_key_2]
+
+// [START android_compose_styles_link_to_custom_state]
+@Composable
+fun MediaPlayer(
+    url: String,
+    modifier: Modifier = Modifier,
+    style: Style = Style,
+    state: PlayerState = remember { PlayerState.Paused }
+) {
+    // Hoist style state, set playerState as a parameter,
+    val styleState = remember { MutableStyleState(null) }
+    // Set equal to incoming state to link the two together
+    styleState.playerState = state
+    Box(
+        //..
+    ) {
+        ///..
+    }
+}
+// [END android_compose_styles_link_to_custom_state]
+
+private object Step2StyleState {
+    // [START android_compose_styles_link_to_custom_state_pass]
+    @Composable
+    fun MediaPlayer(
+        url: String,
+        modifier: Modifier = Modifier,
+        style: Style = Style,
+        state: PlayerState = remember { PlayerState.Paused }
+    ) {
+        // Hoist style state, set playstate as a parameter,
+        val styleState = remember { MutableStyleState(null) }
+        // Set equal to incoming state to link the two together
+        styleState.playerState = state
+        Box(
+            modifier = modifier.styleable(styleState, style)) {
+            ///..
+        }
+    }
+    // [END android_compose_styles_link_to_custom_state_pass]
+}
+private object Step3StyleState {
+    // [START android_compose_styles_link_to_custom_state_key]
+    @Composable
+    fun StyleStateKeySample() {
+        // Using the extension function to change the border color to green while playing
+        val style = Style {
+            borderColor(Color.Gray)
+            playerPlaying {
+                animate {
+                    borderColor(Color.Green)
+                }
+            }
+            playerPaused {
+                animate {
+                    borderColor(Color.Blue)
+                }
+            }
+        }
+        val styleState = remember { MutableStyleState(null) }
+        styleState[playerStateKey] = PlayerState.Playing
+
+        // Using the style in a composable that sets the state -> notice if you change the state parameter, the style changes. You can link this up to an ViewModel and change the state from there too.
+        MediaPlayer(url = "https://example.com/media/video",
+            style = style,
+            state = PlayerState.Stopped)
+    }
+    // [END android_compose_styles_link_to_custom_state_key]
+}
+
+private object Step4FullSnippetState {
+    // [START android_compose_styles_state_full_snippet]
+    enum class PlayerState {
+        Stopped,
+        Playing,
+        Paused
+    }
+    val playerStateKey = StyleStateKey<PlayerState>(PlayerState.Stopped)
+    var MutableStyleState.playerState
+        get() = this[playerStateKey]
+        set(value) { this[playerStateKey] = value }
+
+    fun StyleScope.playerPlaying(value: Style) {
+        state(playerStateKey, value, { key, state -> state[key] == PlayerState.Playing })
+    }
+    fun StyleScope.playerPaused(value: Style) {
+        state(playerStateKey, value, { key, state -> state[key] == PlayerState.Paused })
+
+    }
+
+    @Composable
+    fun MediaPlayer(
+        url: String,
+        modifier: Modifier = Modifier,
+        style: Style = Style,
+        state: PlayerState = remember { PlayerState.Paused }
+    ) {
+        // Hoist style state, set playstate as a parameter,
+        val styleState = remember { MutableStyleState(null) }
+        // Set equal to incoming state to link the two together
+        styleState.playerState = state
+        Box(
+            modifier = modifier.styleable(styleState, Style {
+                size(100.dp)
+                border(2.dp, Color.Red)
+
+            }, style, )) {
+
+            ///..
+        }
+    }
+    @Composable
+    fun StyleStateKeySample() {
+        // Using the extension function to change the border color to green while playing
+        val style = Style {
+            borderColor(Color.Gray)
+            playerPlaying {
+                animate {
+                    borderColor(Color.Green)
+                }
+            }
+            playerPaused {
+                animate {
+                    borderColor(Color.Blue)
+                }
+            }
+        }
+        val styleState = remember { MutableStyleState(null) }
+        styleState[playerStateKey] = PlayerState.Playing
+
+        // Using the style in a composable that sets the state -> notice if you change the state parameter, the style changes. You can link this up to an ViewModel and change the state from there too.
+        MediaPlayer(url = "https://example.com/media/video",
+            style = style,
+            state = PlayerState.Stopped)
+    }
+    // [END android_compose_styles_state_full_snippet]
+}

compose/snippets/src/main/java/com/example/compose/snippets/designsystems/styles/DosDonts.kt

@@ -0,0 +1,108 @@
+/*
+ * Copyright 2026 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@file:OptIn(ExperimentalFoundationStyleApi::class)
+
+package com.example.compose.snippets.designsystems.styles
+
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.style.ExperimentalFoundationStyleApi
+import androidx.compose.foundation.style.MutableStyleState
+import androidx.compose.foundation.style.Style
+import androidx.compose.foundation.style.styleable
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+
+
+// [START android_compose_styles_dos_expose_style]
+@Composable
+fun GradientButton(
+    modifier: Modifier = Modifier,
+    // ✅ DO: for design system components, expose a style modifier to consumers to be able to customize the components
+    style: Style = Style
+) {
+    // Consume the style
+}
+// [END android_compose_styles_dos_expose_style]
+
+// [START android_compose_styles_dos_replace_params]
+// Before
+@Composable
+fun OldButton(background: Color, fontColor: Color) {
+}
+
+// After
+// ✅ DO: Replace visual-based parameters with a style that includes same properties
+@Composable
+fun NewButton(style: Style = Style) {
+}
+// [END android_compose_styles_dos_replace_params]
+
+// [START android_compose_styles_dos_wrapper]
+@Composable
+fun BaseButton(
+    modifier: Modifier = Modifier,
+    style: Style = Style
+) {
+    // Uses LocalTheme.appStyles.button + incoming style
+}
+
+// ✅ Do create wrapper composables that expose common implementations of the same component
+@Composable
+fun SpecialGradientButton(
+    modifier: Modifier = Modifier,
+    style: Style = Style
+) {
+    // Uses LocalTheme.appStyles.button + LocalTheme.appStyles.gradientButton + incoming style - merge these styles
+}
+// [END android_compose_styles_dos_wrapper]
+
+// [START android_compose_styles_donts_default_style]
+@Composable
+fun BadButton(
+    modifier: Modifier = Modifier,
+    // ❌ DON'T set a default style here as a parameter
+    style: Style = Style { background(Color.Red) }
+) {
+}
+// [END android_compose_styles_donts_default_style]
+
+// [START android_compose_styles_do_default_style]
+@Composable
+fun GoodButton(
+    modifier: Modifier = Modifier,
+    // ✅ Do: always pass it as a Style, do not pass other defaults
+    style: Style = Style
+) {
+    // [START_EXCLUDE]
+    // this is a snippet of the BaseButton - see the full snippet in /components/Button.kt
+    val effectiveInteractionSource = remember {
+        MutableInteractionSource()
+    }
+    val styleState = remember(effectiveInteractionSource) {
+        MutableStyleState(effectiveInteractionSource)
+    }
+    // [END_EXCLUDE]
+    val defaultStyle = Style { background(Color.Red) }
+    // ✅ Do Combine defaults inside with incoming parameter
+    Box(modifier = modifier.styleable(styleState, defaultStyle, style)) {
+      // your logic
+    }
+}
+// [END android_compose_styles_do_default_style]