Compose Multiplatform Coachmark/Onboarding Library

A lightweight Compose multiplatform library dedicated to creating seamless onboarding experiences.

android	iOS

Installation

dependencies {
    implementation("io.github.pseudoankit:coachmark:<latest_version🔝>")
}

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 = { /* 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

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.