Adding icon button snippets

Author: wardlauren

compose/snippets/build.gradle.kts

@@ -91,6 +91,7 @@ dependencies {
     implementation(libs.androidx.compose.animation.graphics)
 
     implementation(libs.androidx.compose.material3)
+    implementation(libs.androidx.compose.material.iconsExtended)
     implementation(libs.androidx.compose.material3.adaptive)
     implementation(libs.androidx.compose.material3.adaptive.layout)
     implementation(libs.androidx.compose.material3.adaptive.navigation)

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

@@ -0,0 +1,107 @@
+package com.example.compose.snippets.components
+
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsPressedAsState
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Favorite
+import androidx.compose.material.icons.outlined.FastForward
+import androidx.compose.material.icons.outlined.FastRewind
+import androidx.compose.material.icons.outlined.FavoriteBorder
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberUpdatedState
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.tooling.preview.Preview
+import kotlinx.coroutines.delay
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.mutableIntStateOf
+import androidx.compose.material.icons.filled.FastRewind
+import androidx.compose.material.icons.filled.FastForward
+
+@Preview
+@Composable
+fun ToggleIconButtonExample() {
+    // isToggled initial value should be read from a view model or persistent storage.
+    var isToggled by rememberSaveable { mutableStateOf(false) }
+
+    IconButton(
+        onClick = { isToggled = !isToggled }
+    ) {
+        Icon(
+            imageVector = if (isToggled) Icons.Filled.Favorite else Icons.Outlined.FavoriteBorder,
+            contentDescription = if (isToggled) "Selected icon button" else "Unselected icon button."
+        )
+    }
+}
+@Composable
+fun MomentaryIconButton(
+    unselectedImage: ImageVector,
+    selectedImage: ImageVector,
+    contentDescription: String,
+    modifier: Modifier = Modifier,
+    stepDelay: Long = 100L, // Minimum value is 1L milliseconds.
+    onClick: () -> Unit
+) {
+    val interactionSource = remember { MutableInteractionSource() }
+    val isPressed by interactionSource.collectIsPressedAsState()
+    val pressedListener by rememberUpdatedState(onClick)
+
+    LaunchedEffect(isPressed) {
+        while (isPressed) {
+            delay(stepDelay.coerceIn(1L, Long.MAX_VALUE))
+            pressedListener()
+        }
+    }
+
+    IconButton(
+        modifier = modifier,
+        onClick = onClick,
+        interactionSource = interactionSource
+    ) {
+        Icon(
+            imageVector = if (isPressed) selectedImage else unselectedImage,
+            contentDescription = contentDescription,
+        )
+    }
+}
+
+@Preview()
+@Composable
+fun MomentaryIconButtonExample() {
+    var pressedCount by remember { mutableIntStateOf(0) }
+
+    Row(
+        modifier = Modifier.fillMaxWidth(),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        MomentaryIconButton(
+            unselectedImage = Icons.Outlined.FastRewind,
+            selectedImage = Icons.Filled.FastRewind,
+            stepDelay = 100L,
+            onClick = { pressedCount -= 1 },
+            contentDescription = "Decrease count button"
+        )
+        Spacer(modifier = Modifier)
+        Text("advanced by $pressedCount frames")
+        Spacer(modifier = Modifier)
+        MomentaryIconButton(
+            unselectedImage = Icons.Outlined.FastForward,
+            selectedImage = Icons.Filled.FastForward,
+            contentDescription = "Increase count button",
+            stepDelay = 100L,
+            onClick = { pressedCount += 1 }
+        )
+    }
+}

gradle/libs.versions.toml

@@ -86,6 +86,7 @@ androidx-compose-material = { module = "androidx.compose.material:material", ver
 androidx-compose-material-iconsExtended = { module = "androidx.compose.material:material-icons-extended" }
 androidx-compose-material-ripple = { module = "androidx.compose.material:material-ripple", version.ref = "compose-latest" }
 androidx-compose-material3 = { module = "androidx.compose.material3:material3" }
+androidx-compose-material-icons = { module = "androidx.compose.material:material-icons-extended", version.ref = "compose-latest" }
 androidx-compose-material3-adaptive = { module = "androidx.compose.material3.adaptive:adaptive", version.ref = "material3-adaptive" }
 androidx-compose-material3-adaptive-layout = { module = "androidx.compose.material3.adaptive:adaptive-layout", version.ref = "material3-adaptive" }
 androidx-compose-material3-adaptive-navigation = { module = "androidx.compose.material3.adaptive:adaptive-navigation", version.ref = "material3-adaptive" }