Creating a sequence of showcases in a specific order.
![preview](https://private-user-images.githubusercontent.com/106654580/352072482-c2fc64f8-3467-46c5-a638-eb439b264e70.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM1MTIzNDMsIm5iZiI6MTcyMzUxMjA0MywicGF0aCI6Ii8xMDY2NTQ1ODAvMzUyMDcyNDgyLWMyZmM2NGY4LTM0NjctNDZjNS1hNjM4LWViNDM5YjI2NGU3MC5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwODEzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDgxM1QwMTIwNDNaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yNmJlM2MxYWU5MzM4NjVlNGUzNzdlMWJkMTI5NjlhOGI5NWZlYmI4YWUxMzYwMGZkYzQ5YTNiOTY1YWI2ODU5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.Su0wkduBGaQw9PDEIsIiU5AQMEqOKvE0phr91nD4r78)
- Gradle
implementation("io.github.jocoand:showcase-sequence:1.0.0")
-
Create your Showcase dialog
-
@Composable fun MyShowcaseDialog(text: String, onClick: () -> Unit) { Column( modifier = Modifier .background(Color.White, shape = RoundedCornerShape(12.dp)) .padding(16.dp), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.End ) { Text(text = text) Spacer(modifier = Modifier.height(8.dp)) Button( shape = RoundedCornerShape(8.dp), onClick = onClick ) { Text("Nice !") } } }
-
Declare the
SequenceShowcase
&sequenceShowcaseState
-
val sequenceShowcaseState = rememberSequenceShowcaseState() SequenceShowcase(state = sequenceShowcaseState) { Scaffold( ...
-
Mark your target view with
sequenceShowcaseTarget
modifier -
// View to be highlighted MyView1( modifier = Modifier .sequenceShowcaseTarget( index = 0, content = { MyShowcaseDialog( text = "Hey, this is Greetings showcase", ) } ), onClick = { sequenceShowcaseState.start() } )
Assign
index
value to mark the order to be shown in the sequenceAssign
content
value with your dialog -
Use
SequenceShowcaseState.start()
to start the showcase -
LaunchButton( ... onClick = { sequenceShowcaseState.start() } )
Assign optional
index
value to start at certain index -
Use
SequenceShowcaseState.next()
to navigate to the next showcase -
MyView2( modifier = Modifier .sequenceShowcaseTarget( index = 1, content = { MyShowcaseDialog( text = "Hey, this is Article show case", onClick = { sequenceShowcaseState.next() // Navigate to next showcase } ) } ) )
-
You can also dismiss the the showcase using
dimiss()
-
See sample for more more details
-
position
Top Bottom Default
: relative to target position -
alignment
Start Center End Default
: relative to target position
- See MainActivity
In case you need more basic usage, you can you use ShowcaseView
Contribution are welcome! Feel free to open an issue or a pull request, if you find any bugs or have any suggestions.