How to create custom viewpager in jetpack compose android

In this blog, we will explore How to create custom viewpager in jetpack compose android step by step with Example.

How to Create Custom ViewPager in Jetpack Compose Android Step by Step with Example

Step 1 : Create PagerModel data class file for store ViewPager list data.

data class PagerModel(
    val title: String,
    val image: Int
)

Step 2 : Create a CustomViewPager.kt file for implement all viewpager design and functionality then create one pagerList object in CustomViewPager.kt file for add multiple data of viewpager.

val pagerList = listOf(
    PagerModel(title = "Mercedes - Sports Car", image = R.drawable.car_one),
    PagerModel(title = "Ferrari - Sports Car", image = R.drawable.car_two),
    PagerModel(title = "Audi - Sports Car", image = R.drawable.car_three)
)

Step 3 : Create HorizontalViewPager() function in CustomViewPager.kt file for implement Custom ViewPager design and functionality in Jetpack Compose Android.

@Composable
fun HorizontalViewPager() {
    val pagerState = rememberPagerState(initialPage = 0) {
        pagerList.size
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
    ) {
        HorizontalPager(
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp),
            state = pagerState
        ) { index ->
            Box {
                Image(
                    painterResource(pagerList[index].image),
                    contentDescription = "",
                    contentScale = ContentScale.Crop,
                    modifier = Modifier.fillMaxSize()
                )

                Box(
                    modifier = Modifier
                        .fillMaxWidth()
                        .wrapContentHeight()
                        .alpha(.7f)
                        .background(Color.Black)
                ) {
                    Text(
                        modifier = Modifier
                            .padding(horizontal = 10.dp),
                        text = pagerList[index].title,
                        style = TextStyle(
                            color = Color.Yellow,
                            fontWeight = FontWeight.Bold,
                            fontSize = 22.sp,
                        )
                    )
                }

                PagerIndicator(pagerList.size, pagerState)
            }
        }

        Text(
            text = stringResource(R.string.car_description),
            modifier = Modifier
                .padding(horizontal = 10.dp, vertical = 10.dp)
                .fillMaxWidth(),
            color = Color.DarkGray,
            fontSize = 18.sp,
            lineHeight = 18.sp
        )
    }
}

Step 4 : Create PagerIndicator() function in CustomViewPager.kt file for implement functionality of indicator in viewpager.

@Composable
fun PagerIndicator(size: Int, pagerState: PagerState) {
    val coroutineScope = rememberCoroutineScope()
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Bottom
    ) {
        Row(
            horizontalArrangement = Arrangement.Center,
            modifier = Modifier.fillMaxWidth()
        ) {
            Icon(
                Icons.Filled.KeyboardArrowLeft,
                contentDescription = "",
                modifier = Modifier
                    .size(40.dp)
                    .align(Alignment.CenterVertically)
                    .clickable {
                        coroutineScope.launch {
                            val previous = pagerState.currentPage - 1
                            pagerState.scrollToPage(previous)
                        }
                    }
            )

            repeat(size) {
                Indicator(
                    isSelected = (it == pagerState.currentPage)
                )
            }

            Icon(
                Icons.Filled.KeyboardArrowRight,
                contentDescription = "",
                modifier = Modifier
                    .size(40.dp)
                    .align(Alignment.CenterVertically)
                    .clickable {
                        coroutineScope.launch {
                            val next = pagerState.currentPage + 1
                            pagerState.scrollToPage(next)
                        }
                    }
            )
        }
    }
}

Step 5 : Create Indicator() function in CustomViewPager.kt file for create a design of viewpager indicator.

@Composable
fun Indicator(isSelected: Boolean) {
    Box(
        modifier = Modifier
            .padding(10.dp)
            .width(16.dp)
            .height(16.dp)
            .border(1.dp, Color.White, CircleShape)
            .clip(CircleShape)
            .background(if (isSelected) Color.White else Color.Black)
    )
}

Step 6 : Create Routes.kt file for navigation between screens.

package com.example.zetpackcomposeapplication.ui.navigation

import androidx.navigation.NamedNavArgument
import androidx.navigation.NavController

sealed class Routes(val route: String,val args:List<NamedNavArgument> = listOf()) {

    data object MainRoute : Routes("mainRoutes") {

        data object CustomViewPager : Routes("${MainRoute.route}/customViewPager") {
            fun NavController.toCustomViewPager() = navigate(CustomViewPager.route)
        }
    }
}

Step 7 : Create MainNavigation.kt file for calling CustomViewPagerRoute() screens.

package com.example.zetpackcomposeapplication.ui.navigation

import androidx.compose.runtime.Composable
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import com.example.zetpackcomposeapplication.ui.CustomViewPagerRoute

@Composable
fun MainNavigation() {
    val navController = rememberNavController()
    NavHost(navController, startDestination = Routes.MainRoute.CustomViewPager.route) {
        composable(route = Routes.MainRoute.CustomViewPager.route){
            CustomViewPagerRoute()
        }
    }
}

Step 8 : Call MainNavigation.kt file in MainActivity class.

package com.example.zetpackcomposeapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import com.example.zetpackcomposeapplication.ui.navigation.MainNavigation
import com.example.zetpackcomposeapplication.ui.theme.ZetpackComposeApplicationTheme


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            //this theme you need to change according to your application
            ZetpackComposeApplicationTheme() {
                MainNavigation()
            }
        }
    }
}

Reference

here are the reference site of How to Create Custom viewpager in jetpack compose android you can easily download code and use in your android studio.

Read More: Jetpack Compose Mvvm Retrofit Example

Conclusion

In this post i have shown you how to create custom viewpager in jetpack compose android step by step. you can easily use this code and modify according to your use.

Here are the final output of this post: