Pager in Jetpack Compose

In Jetpack Compose, a "Pager" is a component used to create horizontal or vertical scrolling pages, similar to a ViewPager in the traditional Android view system. The Pager in Jetpack Compose allows you to display a series of pages, which can be swiped between. It can be used to implement features such as carousels, tabbed interfaces, and any UI requiring multiple swipable screens.

There are two main types of Pager in Jetpack Compose:

HorizontalPager: Allows for horizontal scrolling between pages.

VerticalPager: Allows for vertical scrolling between pages. It is used to create a vertically swiping pager.

Learn more about jetpack compose components

Pager is generally used to build a user interface that gives the feel of a book where we can turn Pages while reading. We can change the screen by scrolling vertical or horizontal. This is very useful to build an Android App for kids such as story books.We can also use it for elders making a novel app. So if you want to give your app's UI such as a book then I recommend you to use it. 

A simple Code for Horizontal Pager is below 

@OptIn(ExperimentalFoundationApi::class)

@Composable

fun ComposePagers(modifier: Modifier = Modifier) {

    val pagerState = rememberPagerState(pageCount = { 10 })

    Column {

        HorizontalPager(state = pagerState

        ) { page ->

 // Our page content

    Text(

        text = "Page: $page",

        modifier = Modifier.fillMaxWidth()            

        }

    }

}

A simple Code for Vertical Pager is below 

@OptIn(ExperimentalFoundationApi::class)

@Composable

fun ComposePagers(modifier: Modifier = Modifier) {

    val pagerState = rememberPagerState(pageCount = { 10 })

    Column {

        VerticalPager(state = pagerState

        ) { page ->

 // Our page content

    Text(

        text = "Page: $page",

        modifier = Modifier.fillMaxWidth()            

        }

    }

}

OUTPUT:

Lets create a New Project and use the following code for Horizontal Pager with  Circular Page Indicator at the bottom and a text to show page number at the bottom that can be customized. We are using the Android Studio Koala for this project.

Steps:

1. Create a New Project.

2. Create a file for Pager Screen

MainActivity

Copy this code →

package com.coding.composecrashcourse

import ...

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            CrashCourseTheme {
             PagerScreen()
             }
           }
         }
      }

ComposePage

In this code we are going to use 10 pictures which we have saved in our drawable files in res folder.

Copy this code →

package com.coding.composecrashcourse

import ...

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun PagerScreen () {
    val pagerState = rememberPagerState(pageCount = { 10 })
    val imageList = listOf(
        R.drawable.img_1,
        R.drawable.img_2,
        R.drawable.img_3,
        R.drawable.img_4,
        R.drawable.img_5,
        R.drawable.img_6,
        R.drawable.img_7,
        R.drawable.img_8,
        R.drawable.img_9,
        R.drawable.img_10,
    )
    Column {
        HorizontalPager(
            state = pagerState,
            modifier = Modifier.weight(1f)
        ) { page ->
            Box(modifier = Modifier.fillMaxSize()) {
                Image(
                    painter = painterResource(id = imageList[page]),
                    contentDescription = null,
                    modifier = Modifier.fillMaxSize(),
                    contentScale = ContentScale.Crop
                )
                Text(
                    text = "Page: ${page + 1}",
                    fontSize = 24.sp,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier
                        .background(color = Color.White)
                        .align(Alignment.BottomEnd)
                       // .padding(end = 10.dp,)
                )

            }
        }
        Row(
            Modifier
                .wrapContentHeight()
                .fillMaxWidth()
                .padding(bottom = 60.dp),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.Bottom
        ) {
            repeat(pagerState.pageCount) { iteration ->
                val color = if (pagerState.currentPage == iteration) Color.Red else Color.LightGray
                Box(
                    modifier = Modifier
                        .padding(2.dp)
                        .clip(CircleShape)
                        .background(color)
                        .size(16.dp)

                )
            }
        }
    }
}

OUTPUT:

How to create a simple calculator using jetpack compose