A lightweight Compose multiplatform library dedicated to creating seamless onboarding experiences.
| android | iOS |
|---|---|
 |
 |
| Feature | Description |
|---|---|
| Custom Coachmarks | Easily create and customize coachmarks to guide users through your app. |
| Flexible and Extensible | Customize coachmarks to match your app's design and extend functionality as needed. |
| Cross-Platform Compatibility | Compatible with Android and iOS, ideal for multiplatform projects. |
| Jetpack Compose Integration | Seamlessly integrate coachmarks with Jetpack Compose UI components. |
| Dynamic Tooltip Views | Display tooltip views for each key when coachmarks are active, enhancing user guidance. |
| Comprehensive Documentation | Access detailed documentation and support for easy implementation. |
Android Project
In your module's gradle
dependencies {
implementation("io.github.pseudoankit:coachmark:<latest_version🔝>")
}Compose Multiplatform Project
In your shared module gradle
kotlin {
sourceSets {
val commonMain by getting {
dependencies {
implementation("io.github.pseudoankit:coachmark:<latest_version🔝>")
}
}
}
}Define key for all composables that needs to be higlighted.
enum class Keys { Text1, Text2 }At the root level, ensure that your code is wrapped with UnifyCoachmark.
UnifyCoachmark(
tooltip = { /* Declare Tooltip Source code below ⏬ */ Tooltip(it) },
overlayEffect = DimOverlayEffect(Color.Black.copy(alpha = .5f)),
onOverlayClicked = { OverlayClickEvent.GoNext }
) { this : CoachmarkScope
Content() // Source code below ⏬
}Call the enableCoachMark method in all the composables that need to be highlighted.
This method can be invoked within the CoachmarkScope.
If you are not in the CoachmarkScope, you can access it by calling 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 key that we declared above
toolTipPlacement = ToolTipPlacement.Top,
highlightedViewConfig = HighlightedViewConfig(
shape = HighlightedViewConfig.Shape.Rect(12.dp),
padding = PaddingValues(8.dp)
)
)
)
}
}Define a tooltip view for each key to be displayed when any coachmark is active or highlighted.
@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)
}
}
}
}Overlay Logic referred 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent