TutorialBox Compose

Highlight composable views of your App using Jetpack Compose.

Dependency

JitPack

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

dependencies {
  implementation 'com.github.pdrozz:tutorialbox-compose:1.1.0'
}

Usage

Step 1:

Wrap your compose content with TutorialBox

val showTutorial = remember {
  mutableState = true
}

TutorialBox(
    state = rememberTutorialBoxState(),
    showTutorial = showTutorial,
    onTutorialCompleted = {
        showTutorial = false
    }
){
  Column(){
    Text("Text 1")
    
    Text("Text 2")
    
    Button(onClick = {}){
      Text("Click me")
    }
  }
}

Step 2:

Inside the TutorialBoxScope adds the Modifier.markForTutorial() in the content

.markForTutorial(
    index = 0,
    title = "Profile icon",
    description = "This is profile icon description"
)

or there is two ways to customize with your compose layout.

TutorialBox -> Provide a custom layout in TutorialBox

TutorialBox(
    state = rememberTutorialBoxState(),
    showTutorial = showTutorial,
    onTutorialCompleted = {
        showTutorial = false
    },
    tutorialTarget = { index ->
      CustomCompose(index)
    }
){

Modifier -> Provide a custom layout in Modifier.markForTutorial

.markForTutorial(
    index = 0,
    content = {
        CustomTutorialCompose()
    }
)

Finally:

Adjust the index according to the display order

val showTutorial = remember {
  mutableState = true
}

TutorialBox(
    state = rememberTutorialBoxState(),
    showTutorial = showTutorial,
    onTutorialCompleted = {
        showTutorial = false
    }
){
  Column(){
    Text(
      modifier = Modifier
        .markForTutorial(
          index = 0,
          title = "Text 1 Title",
          description = "This is text 1 description"
        )
      text = "Text 1"
    )
    
    Text(
      modifier = Modifier
        .markForTutorial(
          index = 1,
          title = "Text 2 Title",
          description = "This is text 2 description"
        )
      text = "Text 2"
    )
    
    Button(onClick = {}){
      Text("Click me")
    }
  }
}

Bugs and Feedback

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