🌀 Compose Showcase View

A simple showcase library for highlighting components and showing a dialog on it.

For more pre-configured implementation see Sequence Showcase 🚀

Installation

• Gradle

  implementation("io.github.jocoand:compose-showcaseview:1.4.0")
  

Usage

• Create your Showcase dialog

•   @Composable
    fun MyShowcaseDialog(text: String, onClick: () -> Unit) {
        Column(
            modifier = Modifier
                .background(Color.White, shape = RoundedCornerShape(12.dp))
                .padding(16.dp),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.End
        ) {
            Text(text = text)
            Spacer(modifier = Modifier.height(8.dp))
            Button(
                shape = RoundedCornerShape(8.dp),
                onClick = onClick
            ) {
                Text("Nice !")
            }
        }
    }
  

• Mark your target component (view to be highlighted) LayoutCoordinates using onGloballyPositioned modifier

• val targets = remember { mutableStateMapOf<String, LayoutCoordinates>() }
  var greetingShowcaseVisible by remember { mutableStateOf(false) }
  
  ...
  // Target component (view to be highlighted)
  Greeting(
      modifier = Modifier
          .align(Alignment.End)
          .onGloballyPositioned { coordinates ->
              targets[KEY_GREETING] = coordinates
          },
      name = "Andy",
      onClick = { greetingShowcaseVisible = true }
  )
  

• Declare ShowcaseView, use visible to set ShowcaseView visibility

• targets[KEY_SHARE]?.let { coordinates ->
      ShowcaseView(
          visible = visibleShowcase == VisibleShowcase.Share,
          targetCoordinates = coordinates,
      ) {
          MyShowcaseDialog(
              text = "Click to Share the article",
              onClick = { visibleShowcase = VisibleShowcase.None }
          )
      }
  }
  

  You may want to put you ShowcaseView in your top most componenent to make the overlay cover the whole screen

    Box(modifier = Modifier.fillMaxSize()) {
      Scaffold(
          ...
      ) { innerPadding ->
      }
        targets[KEY_GREETING]?.let { coordinates ->
            ShowcaseView(
                visible = greetingShowcaseVisible,
                targetCoordinates = coordinates,
            ) {
                MyShowcaseDialog(
                    text = "Hey, this is Greetings showcase",
                    onClick = { greetingShowcaseVisible = false }
                )
            }
        }
    }
  

Config

• position

  Top	Bottom

  Default: relative to target position

• alignment

  Start	Center	End

  Default: relative to target position

  animationDuration: duration of the enter and exit animation.

🍻 Contributing

• Contribution are welcome! Feel free to open an issue or a pull request, if you find any bugs or have any suggestions.

💡Inspired by

• https://github.com/SimformSolutionsPvtLtd/SSComposeShowCaseView

🎨 Sample

• MainActivity