https://github.com/jocoand/compose-showcase
A library to showcase or highlight your features in Jetpack Compose
https://github.com/jocoand/compose-showcase
android android-library component-highlight compose compose-highlight highlight jetpack-compose kotlin kotlin-library onboarding showcase
Last synced: 6 months ago
JSON representation
A library to showcase or highlight your features in Jetpack Compose
- Host: GitHub
- URL: https://github.com/jocoand/compose-showcase
- Owner: jocoand
- License: mit
- Created: 2024-06-27T15:11:49.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-07-20T14:45:27.000Z (11 months ago)
- Last Synced: 2025-07-20T14:46:10.867Z (11 months ago)
- Topics: android, android-library, component-highlight, compose, compose-highlight, highlight, jetpack-compose, kotlin, kotlin-library, onboarding, showcase
- Language: Kotlin
- Homepage:
- Size: 195 KB
- Stars: 39
- Watchers: 2
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Compose Showcase
A library for showcasing your feature in Jetpack Compose.
## 🍁 Sequence Showcase
Creating a sequence of showcases in a specific order.
### Installation
- Gradle
```
implementation("io.github.jocoand:showcase-sequence:1.3.1")
```
### Usage
- #### Create your Showcase dialog
- ```
@Composable
fun MyShowcaseDialog(text: String, onClick: () -> Unit) {
Column {
Text(text = text)
Spacer(modifier = Modifier.height(8.dp))
Button(onClick = onClick) {
Text("Nice !")
}
}
}
```
or you can use our [Predefined Dialog](https://github.com/jocoand/compose-showcase?tab=readme-ov-file#-dialog)
- #### Declare the `SequenceShowcase` & `sequenceShowcaseState`
- ```
val sequenceShowcaseState = rememberSequenceShowcaseState()
SequenceShowcase(state = sequenceShowcaseState) {
Scaffold(
...
```
- #### Mark your target view (view to be highlighted) with `sequenceShowcaseTarget` modifier
- ```
MyView1( // View to be highlighted
modifier = Modifier
.sequenceShowcaseTarget( // Mark with sequenceShowcaseTarget
index = 0,
content = {
MyShowcaseDialog( // Dialog to be displayed
text = "Hey, this is Greetings showcase",
)
}
),
onClick = { sequenceShowcaseState.start() }
)
```
`index`: the order to be shown in the sequence
`content`: dialog to be displayed
- #### Use `SequenceShowcaseState.start()` to start the showcase
- ```
LaunchButton(
...
onClick = { sequenceShowcaseState.start() }
)
```
`index`: value to start at certain index (optional)
- #### 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](https://github.com/jocoand/compose-showcase/blob/main/app/src/main/java/com/joco/composeshowcase/MainActivity.kt) for more more details
### Config
- `position`
Top
Bottom
`Default`: relative to target position
- `alignment`
Start
Center
End
`Default`: relative to target position
- `highlight`
Rectangular
Circular
- `animationDuration`: duration of the enter and exit animation.
### Inspired by 💡
- https://github.com/canopas/compose-intro-showcase
### Sample 🎨
- See [MainActivity](https://github.com/jocoand/compose-showcase/blob/main/app/src/main/java/com/joco/composeshowcase/MainActivity.kt)
## 🌀 ShowcaseView
In case you need more basic usage, you can you use [ShowcaseView](https://github.com/jocoand/compose-showcaseview/tree/main)
```
implementation("io.github.jocoand:showcase-sequence:1.4.5")
```
## 🏮 Dialog
### Arrow Dialog
A predefined dialog with arrow shape pointer.
### Usage
```
.sequenceShowcaseTarget(
...
.content = {
ArrowDialog(
targetRect = it,
content = {
// Your dialog content
}
)
}
```
## Contributing
Contribution are welcome!
Feel free to open an issue or a pull request, if you find any bugs or have any suggestions.
If you're new to the project, we recommend starting with a [`good first issue`](https://github.com/jocoand/compose-showcase/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22). that are tailored for first time contributors in the project.