diff --git a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/PagerSnippets.kt b/compose/snippets/src/main/java/com/example/compose/snippets/layouts/PagerSnippets.kt index a0630e51..f65c96e6 100644 --- a/compose/snippets/src/main/java/com/example/compose/snippets/layouts/PagerSnippets.kt +++ b/compose/snippets/src/main/java/com/example/compose/snippets/layouts/PagerSnippets.kt @@ -36,6 +36,7 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.sizeIn +import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.layout.wrapContentSize import androidx.compose.foundation.pager.HorizontalPager import androidx.compose.foundation.pager.PageSize @@ -361,40 +362,36 @@ fun PagerWithTabs() { @Preview @Composable fun PagerIndicator() { - Box { + Box(modifier = Modifier.fillMaxSize()) { // [START android_compose_pager_indicator] - val pageCount = 4 val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager( - state = pagerState + state = pagerState, + modifier = Modifier.fillMaxSize() ) { page -> // Our page content - Box( - modifier = Modifier.background(Color.Cyan).size(400.dp) - ){ - Text( - text = "Page: $page", - ) - } + Text( + text = "Page: $page", + ) } Row( Modifier - .height(50.dp) - .fillMaxWidth(), - horizontalArrangement = Arrangement.Center, - verticalAlignment = Alignment.Bottom + .wrapContentHeight() + .fillMaxWidth() + .align(Alignment.BottomCenter) + .padding(bottom = 8.dp), + horizontalArrangement = Arrangement.Center ) { - repeat(pageCount) { iteration -> + repeat(pagerState.pageCount) { iteration -> val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray Box( modifier = Modifier .padding(2.dp) .clip(CircleShape) .background(color) - .size(20.dp) - + .size(16.dp) ) } }