Compose Multiplatform Coachmark/Onboarding Library

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.

Installation

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🔝>")
            }
        }
    }
}

Usage

Complete Demo Code

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 = { /*@Deprecated since v2.0.4,  pass tooltip while calling `enableCoachMark` method*/ },
    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() {
    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)
                ),
                tooltip = {
                    Balloon(arrow = Arrow.Start()) {
                        Text(
                            text = "Highlighting Text1",
                        )
                    }
                },
                coachMarkScope = LocalCoachMarkScope.current  // not needed if you are already in CoachmarkScope
            )
    )
}

Overlay Logic referred from reveal library

License

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.