Add auto advance pager snippets

Author: jakeroseman

compose/snippets/src/main/java/com/example/compose/snippets/SnippetsActivity.kt

@@ -53,6 +53,7 @@ import com.example.compose.snippets.graphics.BitmapFromComposableFullSnippet
 import com.example.compose.snippets.graphics.BrushExamplesScreen
 import com.example.compose.snippets.images.ImageExamplesScreen
 import com.example.compose.snippets.landing.LandingScreen
+import com.example.compose.snippets.layouts.PagerExamples
 import com.example.compose.snippets.navigation.Destination
 import com.example.compose.snippets.navigation.TopComponentsDestination
 import com.example.compose.snippets.ui.theme.SnippetsTheme
@@ -87,6 +88,7 @@ class SnippetsActivity : ComponentActivity() {
                                     }
                                     Destination.ShapesExamples -> ApplyPolygonAsClipImage()
                                     Destination.SharedElementExamples -> PlaceholderSizeAnimated_Demo()
+                                    Destination.PagerExamples -> PagerExamples()
                                 }
                             }
                         }

compose/snippets/src/main/java/com/example/compose/snippets/layouts/PagerSnippets.kt

@@ -20,7 +20,12 @@ package com.example.compose.snippets.layouts
 
 import android.util.Log
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.LocalIndication
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.interaction.collectIsDraggedAsState
+import androidx.compose.foundation.interaction.collectIsPressedAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -50,6 +55,8 @@ import androidx.compose.material3.TabRow
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
@@ -58,14 +65,16 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.util.lerp
 import coil.compose.rememberAsyncImagePainter
 import com.example.compose.snippets.util.rememberRandomSampleImageUrl
-import kotlin.math.absoluteValue
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
+import kotlin.math.absoluteValue
 
 /*
 * Copyright 2023 The Android Open Source Project
@@ -83,6 +92,18 @@ import kotlinx.coroutines.launch
 * limitations under the License.
 */
 
+@Composable
+fun PagerExamples(){
+    AutoAdvancePager(
+        listOf(
+            Color.Red,
+            Color.Gray,
+            Color.Green,
+            Color.White
+        )
+    )
+}
+
 @Preview
 @Composable
 fun HorizontalPagerSample() {
@@ -256,9 +277,9 @@ fun PagerWithEffect() {
                     // scroll position. We use the absolute value which allows us to mirror
                     // any effects for both directions
                     val pageOffset = (
-                        (pagerState.currentPage - page) + pagerState
-                            .currentPageOffsetFraction
-                        ).absoluteValue
+                            (pagerState.currentPage - page) + pagerState
+                                .currentPageOffsetFraction
+                            ).absoluteValue
 
                     // We animate the alpha, between 50% and 100%
                     alpha = lerp(
@@ -392,6 +413,94 @@ fun PagerIndicator() {
     }
 }
 
+@Composable
+fun AutoAdvancePager(pageItems: List<Color>, modifier: Modifier = Modifier) {
+    Box(modifier = Modifier.fillMaxSize()) {
+        val pagerState = rememberPagerState(pageCount = { pageItems.size })
+        val pagerIsDragged by pagerState.interactionSource.collectIsDraggedAsState()
+
+        val pageInteractionSource = remember { MutableInteractionSource() }
+        val pageIsPressed by pageInteractionSource.collectIsPressedAsState()
+
+        // Stop auto-advancing when pager is dragged or one of the pages is pressed
+        val autoAdvance = !pagerIsDragged && !pageIsPressed
+
+        if (autoAdvance) {
+            LaunchedEffect(pagerState, pageInteractionSource) {
+                while (true) {
+                    delay(2000)
+                    val nextPage = (pagerState.currentPage + 1) % pageItems.size
+                    pagerState.animateScrollToPage(nextPage)
+                }
+            }
+        }
+
+        HorizontalPager(
+            state = pagerState
+        ) { page ->
+            Text(
+                text = "Page: $page",
+                textAlign = TextAlign.Center,
+                modifier = modifier
+                    .fillMaxSize()
+                    .background(pageItems[page])
+                    .clickable(
+                        interactionSource = pageInteractionSource,
+                        indication = LocalIndication.current
+                    ) {
+                        // Handle page click
+                    }
+                    .wrapContentSize(align = Alignment.Center)
+            )
+        }
+
+        PagerIndicator(pageItems.size, pagerState.currentPage)
+    }
+}
+
+@Preview
+@Composable
+private fun AutoAdvancePagerPreview() {
+    val pageItems: List<Color> = listOf(
+        Color.Red,
+        Color.Gray,
+        Color.Green,
+        Color.White
+    )
+    AutoAdvancePager(pageItems = pageItems)
+}
+
+@Composable
+fun PagerIndicator(pageCount: Int, currentPageIndex: Int, modifier: Modifier = Modifier) {
+    Box(modifier = Modifier.fillMaxSize()) {
+        Row(
+            modifier = Modifier
+                .wrapContentHeight()
+                .fillMaxWidth()
+                .align(Alignment.BottomCenter)
+                .padding(bottom = 8.dp),
+            horizontalArrangement = Arrangement.Center
+        ) {
+            repeat(pageCount) { iteration ->
+                val color = if (currentPageIndex == iteration) Color.DarkGray else Color.LightGray
+                Box(
+                    modifier = modifier
+                        .padding(2.dp)
+                        .clip(CircleShape)
+                        .background(color)
+                        .size(16.dp)
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun PagerIndicatorPreview() {
+    PagerIndicator(pageCount = 4, currentPageIndex = 1)
+}
+
 // [START android_compose_pager_custom_page_size]
 private val threePagesPerViewport = object : PageSize {
     override fun Density.calculateMainAxisPageSize(

compose/snippets/src/main/java/com/example/compose/snippets/navigation/Destination.kt

@@ -23,7 +23,8 @@ enum class Destination(val route: String, val title: String) {
     ComponentsExamples("topComponents", "Top Compose Components"),
     ScreenshotExample("screenshotExample", "Screenshot Examples"),
     ShapesExamples("shapesExamples", "Shapes Examples"),
-    SharedElementExamples("sharedElement", "Shared elements")
+    SharedElementExamples("sharedElement", "Shared elements"),
+    PagerExamples("pagerExamples", "Pager examples")
 }
 
 // Enum class for compose components navigation screen.