Viewpager , Pager , Slider in Jetpack compose with indicator icon

•  Step 1:-
  
  
  
  Add these files in gradle
  for me version-> accompanistPager = "0.30.1"
  
  

  accompanist-pager = { module = "com.google.accompanist:accompanist-pager", version.ref = "accompanistPager" }
  accompanist-pager-indicators = { module = "com.google.accompanist:accompanist-pager-indicators", version.ref = "accompanistPager" }
  

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.pager.HorizontalPager
import androidx.compose.foundation.pager.PagerState
import androidx.compose.foundation.pager.rememberPagerState
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import com.example.jetpacktutorials.ui.theme.ui.onboarding.OnBoardingPage
import com.google.accompanist.pager.HorizontalPagerIndicator
@Composable
fun WelcomeScreen(
    navController: NavController
) {

    val pages = listOf(OnBoardingPage.First, OnBoardingPage.Second, OnBoardingPage.Third)
    val pagerState = rememberPagerState(
        initialPage = 0,
        initialPageOffsetFraction = 0f,
        pageCount = { pages.size }
    )
    Column(modifier = Modifier.fillMaxSize()) {
        HorizontalPager(state = pagerState, beyondViewportPageCount = 3) { position ->
            PagerScreen(onBoardingPage = pages[position])
        }
        HorizontalPagerIndicator(
            pagerState = pagerState,
            pageCount = pages.size,
            indicatorShape = CircleShape,
            activeColor = Color.Black,
            inactiveColor = Color.Gray,  // Use Gray for better contrast
            indicatorWidth = 10.dp,  // Adjust the size of the indicators
            indicatorHeight = 10.dp,
            spacing = 8.dp,  // Add spacing between indicators
            modifier = Modifier
                .padding(top = 16.dp)
                .align(Alignment.CenterHorizontally)
            // Fill width for centering
        )
        FinishButton(modifier = Modifier, pagerState = pagerState) { }
    }

}

• Step 2:-
  
  

  @Composable
  fun PagerScreen(onBoardingPage: OnBoardingPage) {
      Column(
          modifier = Modifier
              .fillMaxWidth()
              .background(MaterialTheme.colorScheme.onPrimary.copy(0.2f)),
          horizontalAlignment = Alignment.CenterHorizontally,
          verticalArrangement = Arrangement.Top
      ) {
          Image(
              modifier = Modifier
                  .fillMaxWidth(0.5f)
                  .fillMaxHeight(0.6f),
              painter = painterResource(id = onBoardingPage.image),
              contentDescription = "Pager Page"
          )
          Text(
              modifier = Modifier.fillMaxWidth(),
              text = onBoardingPage.title,
              fontSize = MaterialTheme.typography.headlineMedium.fontSize,
              fontWeight = FontWeight.Bold,
              textAlign = TextAlign.Center
          )
          Text(
              modifier = Modifier
                  .fillMaxWidth()
                  .padding(horizontal = 40.dp)
                  .padding(top = 20.dp),
              text = onBoardingPage.description,
              fontSize = MaterialTheme.typography.bodyMedium.fontSize,
              fontWeight = FontWeight.Medium,
              textAlign = TextAlign.Center
          )
  
  
      }
  }
  

  
  
• Step 3:-
  
  

  // Finish  button for when slider ends..
  @Composable
  fun FinishButton(
      modifier: Modifier,
      pagerState: PagerState,
      onclick: () -> Unit
  ) {
      Row(
          modifier = Modifier
              .padding(horizontal = 40.dp)
              .padding(top = 14.dp),
          verticalAlignment = Alignment.Top,
          horizontalArrangement = Arrangement.Center
      ) {
  
          AnimatedVisibility(
              modifier = Modifier.fillMaxWidth(),
              visible = pagerState.currentPage == 2
          ) {
  
              Button(
                  onClick = onclick,
                  colors = ButtonDefaults.buttonColors(
                      contentColor = Color.White
                  )
              ) {
                  Text("Finish")
              }
  
          }
  
  
      }
  
  }
  
  @Composable
  @Preview(showBackground = true)
  fun FirstScreenPreview() {
      Column(modifier = Modifier.fillMaxSize()) {
          PagerScreen(onBoardingPage = OnBoardingPage.First)
      }
  }
  
  @Composable
  @Preview(showBackground = true)
  fun SecondScreenPreview() {
      Column(modifier = Modifier.fillMaxSize()) {
          PagerScreen(onBoardingPage = OnBoardingPage.Second)
      }
  }
  
  @Composable
  @Preview(showBackground = true)
  fun ThirdScreenPreview() {
      Column(modifier = Modifier.fillMaxSize()) {
          PagerScreen(onBoardingPage = OnBoardingPage.Third)
      }
  }

• Step 4 :-
  
  

  sealed class OnBoardingPage(
      @DrawableRes
      val image: Int,
      val title: String,
      val description: String
  ) {
  
      data object First :
          OnBoardingPage(image = R.drawable.img1, "First Slider", "Hii, This is first Slider , Welcome In this App")
  
      data object Second :
          OnBoardingPage(image = R.drawable.img2, "Second Slider", "Hii, This is Second Slider, Welcome In this App")
  
      data object Third :
          OnBoardingPage(image = R.drawable.img3, "Third Slider", "Hii, This is Third Slider,Welcome In this App")
  
  }

• Step 5:-  My Nav graph is set to be like this
  
  

  @Composable
  fun SetupNavGraph(navController: NavHostController) {
      NavHost(
          navController = navController,
          startDestination = Screen.Welcome.route
      ) {
          composable(route = Screen.Welcome.route) {
              WelcomeScreen(navController = navController)
          }
          composable(route = Screen.Home.route) {
              Box(modifier = Modifier.fillMaxSize())
          }
      }
  }

Step 6:- Screen Setup like this

sealed class Screen(val route: String) {
    data object Welcome:Screen("welcome")
    data object Splash : Screen("splash_screen")
    data object Home : Screen("home_screen")
}

Step 7 :-
In main activity we have to pass this only

val navController= rememberNavController()
SetupNavGraph(navController=navController)

Step 8:-

Screenshot :-