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.3.0")
  

Usage

• Create your Showcase dialog

•   @Composable
    fun MyShowcaseDialog(text: String, onClick: () -> Unit) {
        Column {
            Text(text = text)
            Spacer(modifier = Modifier.height(8.dp))
            Button(onClick = onClick) {
                Text("Nice !")
            }
        }
    }
  

  or you can use our Predefined Dialog

• 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

• animationDuration: duration of the enter and exit animation.

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

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

🏮 Dialog

Arrow Dialog

A predefined dialog with arrow shape pointer.

Usage

.sequenceShowcaseTarget(
    ...
    .content  = {
        ArrowDialog(
            targetRect = it,
            content = { 
                // Your dialog content
            }
        )
    }

Contributing

Contribution are welcome! Feel free to open an issue or a pull request, if you find any bugs or have any suggestions. If you're new to the project, we recommend starting with a good first issue. that are tailored for first time contributors in the project.