Compose Showcase

A library for showcasing your feature in Jetpack Compose.

🍁 Sequence Showcase

Creating a sequence of showcases in a specific order.

Installation

• Gradle

  implementation("io.github.jocoand:showcase-sequence:1.1.1")
  

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 !")
            }
        }
    }
  

• Declare the SequenceShowcase & sequenceShowcaseState

• val sequenceShowcaseState = rememberSequenceShowcaseState()
  
  SequenceShowcase(state = sequenceShowcaseState) {
      Scaffold(
        ...
  

• Mark your target view (view to be highlighted) with sequenceShowcaseTarget modifier

•   
    MyView1(    // View to be highlighted
      modifier = Modifier
          .sequenceShowcaseTarget(    // Mark with sequenceShowcaseTarget
              index = 0,
              content = {
                  MyShowcaseDialog(    // Dialog to be displayed
                      text = "Hey, this is Greetings showcase",
                  )
              }
          ),
      onClick = { sequenceShowcaseState.start() }
    )
  

  index: the order to be shown in the sequence

  content: dialog to be displayed

• Use SequenceShowcaseState.start() to start the showcase

•   LaunchButton(
        ...
        onClick = { sequenceShowcaseState.start() }
    )
  

  index: value to start at certain index (optional)

• Use SequenceShowcaseState.next() to navigate to the next showcase

•   MyView2(
        modifier = Modifier
            .sequenceShowcaseTarget(
                index = 1,
                content = {
                    MyShowcaseDialog(
                        text = "Hey, this is Article show case",
                        onClick = {
                          sequenceShowcaseState.next() // Navigate to next showcase
                        } 
                    )
                }
            )
    )
  

• You can also dismiss the the showcase using dimiss()

• See sample for more more details

Config

• position

  Top	Bottom

  Default: relative to target position

• alignment

  Start	Center	End

  Default: relative to target position

• highlight

  Rectangular	Circular

Inspired by 💡

• https://github.com/canopas/compose-intro-showcase

Sample 🎨

• See MainActivity

🌀 ShowcaseView

In case you need more basic usage, you can you use ShowcaseView

Contributing

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