Add stories to your app built with Jetpack Compose with a single composable

StoryUi

Add stories to your app built with Jetpack Compose with a single composable that supports Material 3.

Stories can be beneficial for your app users who prefer to view content in slide, such feature is extensively seen in an image or video intensive apps, chat apps or video calling apps. Now adding such features to your app is as simple as calling a single composable function that accepts images as a url and load them automatically inside the story ui.

Features

Set color for indicatorSelect type of indicatorBased on the screen click either move to next image or to the previous imageAuto caching once images are loaded from the networkSet time for image slide

To get started with StoryUi just add the following path in settings.gradle

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

Thereafter add the following dependencies

dependencies {
  implementation 'com.github.raipankaj:StoryUi:1.0.0'
  implementation 'androidx.compose.foundation:foundation:1.4.0-rc01'
  implementation("io.coil-kt:coil-compose:2.2.2")
}

Now in order to add StoryUi to any part of your app just call the “Story” Composable which accepts the following parameters

@Composable
fun Story(
    modifier: Modifier = Modifier,
    urlList: List<String>,
    swipeTime: Int = 5_000,
    indicator: Indicator = StoryIndicator.singleIndicator(),
    onAllStoriesShown: () -> Unit
) 

modifier – This modifier is for the entire Story ComposableurlList – It requires a simple list of url as string that will get loaded using CoilswipeTime – This indicates the indicator duration before swiping to the next imageindicator – That will help to customize the indicator for the storyonAllStoriesShown – Once all stories are shown, this callback will get triggered

Two types of indicators are supported with this librarySingle type indicator on the screenMultiple type indicator on the screen

Single type indicator

Set the single type indicator by setting the “indicator” parameter to StoryIndicator.singleIndicator() To customize this indicator you may pass various parameters

fun singleIndicator(
  indicatorColor: Color = Color.White,
  indicatorTrackColor: Color = Color.Gray,
  modifier: Modifier = Modifier.fillMaxWidth()
)

indicatorColor – Set the color of the indicatorindicatorTrackColor – Set the background color for the indicatormodifier – Set the modifier to add background, padding, shape etc for the indicator

Multiple type indicator

Set the muliple type indicator by setting the “indicator” parameter to StoryIndicator.multiIndicator() To customize this indicator you may pass various parameters

fun multiIndicator(
  indicatorColor: Color = Color.White,
  indicatorTrackColor: Color = Color.Gray,
  modifier: Modifier = Modifier.fillMaxWidth(),
  indicatorPadding: PaddingValues = PaddingValues(),
  indicatorSpacing: Dp = 4.dp
)

indicatorColor – Set the color of the indicatorindicatorTrackColor – Set the background color for the indicatormodifier – Set the modifier to add background, padding, shape etc for the indicatorindicatorPadding – Set the padding for the overall indicatorindicatorSpacing – Set the spaces between individual indicator

Demo – Single type indicator & Multiple type indicator

Demo
Demo

GitHub

View Github

Leave a Reply

Your email address will not be published. Required fields are marked *