Stories for Jetpack Compose

A library to make your stories easy to create with Compose. All the logic about stories transitions and shown indicating is implemented. All you need is only to create UI components.

Setup

Add this code:

• to your settings.gradle of the project:

dependencyResolutionManagement {
   repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
   repositories {
       google()
       mavenCentral()
       maven { url = uri("https://jitpack.io") }
   }
}

• to your build.gradle of the module of usage:

dependencies {
  implementation("com.github.m2-oss:StoriesCompose:1.2.1")
}

Quick Start

To create a list of previews:

• prepare the data:

val STORIES_PREVIEW_LIST = listOf(
   UiStoriesPreviewData(
       id = "id1",
       imageData = R.drawable.ic_launcher_background,
       title = "1",
   ),
   UiStoriesPreviewData(
       id = "id2",
       imageData = R.drawable.ic_launcher_background,
       title = "2",
   ),
   UiStoriesPreviewData(
       id = "id3",
       imageData = R.drawable.ic_launcher_background,
       title = "3",
   ),
   UiStoriesPreviewData(
       id = "id4",
       imageData = R.drawable.ic_launcher_background,
       title = "4",
   )
)

• create the list:

StoriesPreviewList(
   previews = STORIES_PREVIEW_LIST,
   onClick = {
       // your callback handle
   }
)

The result:

To create container for stories:

• prepare the data:

private const val SLIDES_COUNT = 3
private const val STORIES_DURATION_SEC = 10
private val SLIDES_COLORS = listOf(
   Color.LightGray,
   Color.Gray,
   Color.DarkGray
)

• create the container:

StoriesContainer(
   data = UiStoriesData(
       storiesId = storiesId, // an id of story clicked before
       stories = buildMap {
           val ids = STORIES_PREVIEW_LIST.map { it.id }
           ids.forEach {
               put(it, SLIDES_COUNT)
           }
       },
       durationInSec = STORIES_DURATION_SEC
   ),
   onFinished = {
     // your callback handle
   }
) { stories, slide, progressBar ->
   Box(
       modifier = Modifier
           .fillMaxSize()
           .background(SLIDES_COLORS[slide])
   ) {
       Text(text = "$stories, $slide", modifier = Modifier.align(Alignment.Center))
   }
}

The result:

Variability

You can use either both or one of the components. In second case you need to synchronize stories shown indicator manually because they both use the same entry point to maintain the logic (the preview component observes which stories were shown in the container one). To do so you need to use the repository contract. Create the repo you can with the factory. The samples of synchronization are here and here. Keep in mind that the interaction is asynchronous so that it must be on worker thread otherwise an exception will be thrown.