Intro Showcase View

An android library to highlight different features of the app built using Jetpack Compose.

The library is inspired by the TapTargetView that is useful for legacy views.

Configuration

Add the dependency

implementation 'com.canopas.intro-showcase-view:introshowcaseview:<latest-version>'

How to use ?

@Composable
fun ShowcaseSample() {
    var showAppIntro by remember {
        mutableStateOf(true)
    }
    
    IntroShowcase(
        showIntroShowCase = showAppIntro,
        dismissOnClickOutside = false,
        onShowCaseCompleted = {
            //App Intro finished!!
            showAppIntro = false
        },
    ) {
        FloatingActionButton(
            onClick = {},
            modifier = Modifier.introShowCaseTarget(
                index = 0,
                style = ShowcaseStyle.Default.copy(
                    backgroundColor = Color(0xFF1C0A00), // specify color of background
                    backgroundAlpha = 0.98f, // specify transparency of background
                    targetCircleColor = Color.White // specify color of target circle
                ),
                // specify the content to show to introduce app feature
                content = {
                    Column {
                        Text(
                            text = "Check emails",
                            color = Color.White,
                            fontSize = 24.sp,
                            fontWeight = FontWeight.Bold
                        )
                        Text(
                            text = "Click here to check/send emails",
                            color = Color.White,
                            fontSize = 16.sp
                        )
                        Spacer(modifier = Modifier.height(10.dp))
                        Icon(
                            painterResource(id = R.drawable.right_arrow),
                            contentDescription = null,
                            modifier = Modifier
                                .size(80.dp)
                                .align(Alignment.End),
                            tint = Color.White
                        )
                    }
                }
            ),
            backgroundColor = ThemeColor,
            contentColor = Color.White,
            elevation = FloatingActionButtonDefaults.elevation(6.dp)
        ) {
            Icon(
                Icons.Filled.Email,
                contentDescription = "Email"
            )
        }
    }
}

Demo

Sample app demonstrates how simple the usage of the library actually is.

Interested in library implementation?

Checkout the Article

Bugs and Feedback

For bugs, questions and discussions please use the Github Issues.

Credits

Intro showcaseview is owned and maintained by the Canopas team. You can follow them on Twitter at @canopassoftware for project updates and releases.