I have 5 onboarding screens from which I have to navigate from screen1 to eventually screen 5. So when I reach at screen 5 it should display this picture. 
But for the first screen everything should be white except the first circle will be like this 
With a line 
connected to it and then followed by 
connected to the other side of this line. And then when we reach on second screen this 
should turn into a green line
while the first circle turning into a green circle 
and a correct icon 
on it. So the flow continues as follows as we move forward to the screens and if we go backward, the screens should change into white line. I am attaching the screenshot of what I am trying to achieve.enter image description here 
So I am using jetpack compose and I tried to connect all the separate parts into one but I couldn't achieve what I wanted This is the code I tried to display the progressbar of the first screen.
Row(horizontalArrangement = Arrangement.spacedBy((-15).dp, Alignment.Start),
verticalAlignment = Alignment.CenterVertically,modifier = Modifier
.width(327.dp)
.height(15.dp)
.padding(start = 18.dp, end = 15.dp)) {
Image(painter = painterResource(id = R.drawable.indicator ),
contentDescription ="indicator")
Image(painter = painterResource(id = R.drawable.line),
contentDescription = null)
Image(painter = painterResource(id = R.drawable.stepcircle),
contentDescription =null)
Image(painter = painterResource(id = R.drawable.line),
contentDescription = null)
Image(painter = painterResource(id = R.drawable.stepcircle),
contentDescription =null)
Image(painter = painterResource(id = R.drawable.line),
contentDescription = null)
Image(painter = painterResource(id = R.drawable.stepcircle),
contentDescription =null)
}