Coding Bihar

Android App Development

Coding Bihar is dedicated to providing you with the knowledge and tools you need to excel in Android development. Start your journey with us and transform your app ideas into reality with Jetpack Compose. Connect, learn, and grow with Coding Bihar today!

Pager in Jetpack Compose

Pager in Jetpack Compose - Coding Bihar
Pager in Jetpack Compose

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.
Android Studio Koala

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:

 Sandeep Gupta

Posted by Sandeep Gupta

Please share your feedback us at:sandeep@codingbihar.com. Thank you for being a part of our community!

Special Message

Welcome to coding bihar!