Stories UI

Create stories with Jetpack Compose!

Adding stories are fun especially when your app deals with images. Now with Jetpack Compose you can easily add stories to your existing app within 5 lines of code.

To get started with Stories just add the maven url and the Stories dependency

build.gradle (Project level)

allprojects {
    repositories {
    ...
    //Add this url
    maven { url 'https://jitpack.io' }
    }
}

If you are using Android Studio Arctic Fox and do not have allProjects in build.gradle then add following maven url in settings.gradle like below

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        //Add this url
        maven { url 'https://jitpack.io' }
        jcenter() // Warning: this repository is going to shut down soon
    }
}

Once you have added the maven url now add the Stories dependency in the build.gradle (module level)

implementation 'com.github.raipankaj:Stories:1.0.2'

Congratulations, you have successfully added the dependency. Now to get started with Stories add the following code snippet

val listOfImages = listOf(R.drawable.mountains, R.drawable.forest)
Stories(numberOfPages = listOfImages.size, onComplete = { }) {
    Image(painter = painterResource(id = listOfImages[it]), contentDescription = null,
    contentScale = ContentScale.Crop, modifier = Modifier.fillMaxSize())
}

Stories composable provide an ability to change the color of progress indicator and also to add any composable as body instead of image composable. Here are all the parameters accepted by Stories composable.

fun Stories(
    numberOfPages: Int,
    indicatorModifier: Modifier = Modifier.padding(top = 12.dp, bottom = 12.dp).clip(RoundedCornerShape(12.dp)),
    spaceBetweenIndicator: Dp = 4.dp,
    indicatorBackgroundColor: Color = Color.LightGray,
    indicatorProgressColor: Color = Color.White,
    indicatorBackgroundGradientColors: List<Color> = emptyList(),
    slideDurationInSeconds: Long = 5,
    touchToPause: Boolean = true,
    hideIndicators: Boolean = false,
    onEveryStoryChange: ((Int) -> Unit)? = null,
    onComplete: () -> Unit,
    content: @Composable (Int) -> Unit,
)

Based on your app theme and requirement it's extremely easy to modify the Stories composable with the set of parameters.

Note: If you like this library, then please hit the star button! 😃