QIndicators

QIndicators is a jetpack Compose library that will help you creating your own Indicators with a diffirent shape for the selected one and a simple animation for it.

Demo

Download

Gradle

Add the dependency below to your module level build.gradle :

dependencies { 

    implementation 'io.github.qamarelsafadi:qindicators:1.0.0'
 
 }

Usage

You can implement your indicators with composable function as seen in the below:

 var selectedPage by remember {  mutableStateOf(0) }

 Indicators(count = 7,
            size = 10,
            spacer = 5,
            selectedPage,
            indicatorSelectedLength = 60
            modifier = Modifier.align(Alignment.Center),
            selectedColor = Color.Red,
            unselectedColor = PurpleGrey40
            )
            
 // you can change button with horizontal pager here
            
Button( onClick = {  if (selectedPage != 6) selectedPage++ else selectedPage = 0 },
         modifier = Modifier.align(Alignment.BottomStart).padding(24.dp))
         {
             Icon( painter = painterResource(id = R.drawable.backbutton),contentDescription = ""  )
         }
            

You can also customize the appearance of the indicator by passing in the following properties:

Composable Properties

Properties	Description
count	Count of your indicators
size	Indicator size
spacer	Space between indicators
selectedPage	current selected index
indicatorSelectedLength	Length of selected indicator
selectedColor	Selected indicator color
unselectedColor	Unselected indicator color

Find this library useful? ❤️

Star it and Follow me for more content like this.