Jetpack Compose Coachmark/Onboarding Library

A lighweight library for creating coachmarks or onboarding flows using Jetpack Compose.

Overview

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

Features

Create custom coachmarks with ease.
Highly flexible and extensible.
Compatible with Jetpack Compose UI components.

Getting Started

In your module's build.gradle

dependencies {
    implementation 'io.github.pseudoankit:coachmark:<latest_version🔝>'
}

Usage

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

License