Skip to content

A lighweight compose multiplatform libray to create better onboarding experience for users.

License

Notifications You must be signed in to change notification settings

pseudoankit/coachmark

Repository files navigation

Compose Multiplatform Coachmark/Onboarding Library

Maven Central License

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

android iOS
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.