A lighweight library for creating coachmarks or onboarding flows using Jetpack Compose.
![](https://private-user-images.githubusercontent.com/54987308/265262519-38c18ebb-5057-46f8-bdd8-6d9c966a603b.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxNDc4NjIsIm5iZiI6MTcyNDE0NzU2MiwicGF0aCI6Ii81NDk4NzMwOC8yNjUyNjI1MTktMzhjMThlYmItNTA1Ny00NmY4LWJkZDgtNmQ5Yzk2NmE2MDNiLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIwVDA5NTI0MlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM1MDA5MzM1MmEwYjcyYWEwMWVlMGFkNTY1NjY4Mjk4MGY5ZTMzNzQ3NjMyYWM1ZWZmMzk1MTc2MTY1OWVkNzcmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.RAlIPWFC2kHI6w-39URdOo6oq7Eqe9jYN6FLAPO1pRc)
A lightweight jetpack compose library to create onboarding flow for your android app Now provide seamless onboarding experience to end users with just few lines of code
- Create custom coachmarks with ease.
- Highly flexible and extensible.
- Compatible with Jetpack Compose UI components.
In your module's build.gradle
dependencies {
implementation 'io.github.pseudoankit:coachmark:<latest_version🔝>'
}
Define Keys for all coachmarks
enum class Keys { Text1, Text2 }
At root level make sure to wrap with UnifyCoachmark
UnifyCoachmark(
tooltip = { /* Declare Tooltip Source code below ⏬ */ Tooltip(it) },
overlayEffect = DimOverlayEffect(Color.Black.copy(alpha = .5f)),
onOverlayClicked = { OverlayClickEvent.GoNext }
) {
Content() // Source code below ⏬
}
Enable coachmark for the required views with enableCoachMark
, To access enableCoachMark
you need to be inside CoachmarkScope
If you are not in CoachmarkScope
then get access to it via LocalCoachMarkScope.current
@Composable
private fun Content() {
with(LocalCoachMarkScope.current) { // not needed if you are already in `CoachmarkScope`
Text(
text = "Will show tooltip 1",
modifier = Modifier
.enableCoachMark(
key = Keys.Text1, // unique that we declared above
toolTipPlacement = placement,
highlightedViewConfig = HighlightedViewConfig(
shape = HighlightedViewConfig.Shape.Rect(12.dp),
padding = PaddingValues(8.dp)
)
)
)
}
}
Define tooltip view (Tootip is showing when view is highlighted currently)
@Composable
private fun Tooltip(key: CoachMarkKey) {
when (key) {
Keys.Text1 -> {
Balloon(arrow = Arrow.Start()) {
Text(text = "Highlighting Text1", color = Color.White)
}
}
Keys.Text2 -> {
Balloon(arrow = Arrow.Start()) {
Text(text = "Highlighting Text2", color = Color.White)
}
}
}
}
Inspired from reveal library
Copyright 2024 pseudoankit (Ankit)
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.