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
