aiyu-ayaan / coachmark

A lighweight jetpack compose libray to provide seamless onboarding experience to users

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

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.