Implements Material Design tap targets for feature discovery, offering a coordinator, modifier-based attachment, customizable styles and text definitions, chained targets support, and an example app.
tap-target-compose is a Compose Multiplatform implementation of the Material Design tap targets, used for feature discovery.
This library was inspired by its View counterpart, TapTargetView.
This library is a forked version of tap-target-compose, porting the original Android-only library for Compose Multiplatform. It currently targets Android and iOS, but since there is no separate native implementation, support for other platforms may be added upon pull requests or requests.
 |  |
This library comes with a sample app that shows examples of how to use it.
:eyes: If you want to know when a new release of the library is published: watch this repository on GitHub.
The minimum API level supported by this library is API 29.
Add this to your module level build.gradle file to start using the library.
taptarget = { group = "zone.ien.taptargetcmp", name = "taptarget", version = "1.2.1" }
dependencies {
implementation(libs.taptarget)
}
In order to start using the library you need to wrap your composables in a TapTargetCoordinator
TapTargetCoordinator(showTapTargets = true, onComplete = {}) {
Surface {
Button(
onClick = { },
modifier = Modifier.tapTarget(
precedence = 0,
title = TextDefinition(
text = "Tap target title",
textStyle = MaterialTheme.typography.titleLarge,
fontWeight = FontWeight.Bold,
color = MaterialTheme.colorScheme.onSecondaryContainer
),
description = TextDefinition(
text = "Tap target description",
textStyle = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSecondaryContainer
),
tapTargetStyle = TapTargetStyle(
backgroundColor = MaterialTheme.colorScheme.secondaryContainer,
tapTargetHighlightColor = MaterialTheme.colorScheme.onSecondaryContainer,
backgroundAlpha = 1f,
),
),
) {
Text(text = "Click here")
}
}
}
You can also create a TapTargetDefinition and pass it to the modifier:
val tapTargetDefinition = TapTargetDefinition(
precedence = 1,
title = TextDefinition(
text = "Tap target title",
textStyle = MaterialTheme.typography.titleLarge,
fontWeight = FontWeight.Bold,
color = MaterialTheme.colorScheme.onSecondaryContainer
),
description = TextDefinition(
text = "Tap target description",
textStyle = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSecondaryContainer
),
tapTargetStyle = TapTargetStyle(
backgroundColor = MaterialTheme.colorScheme.secondaryContainer,
tapTargetHighlightColor = MaterialTheme.colorScheme.onSecondaryContainer,
backgroundAlpha = 1f,
),
)
TapTargetCoordinator(showTapTargets = true, onComplete = {}) {
Surface {
Button(
onClick = { },
modifier = Modifier.tapTarget(tapTargetDefinition),
) {
Text(text = "Click here")
}
}
}
The library supports chaining of multiple tap targets, but you can also show only one if that's what you need.
When using tap targets inside a scrollable container, each target can automatically scroll into view when it becomes active. This behavior is controlled by bringIntoViewEnabled and bringIntoViewVerticalOffset parameters.
Set a default vertical offset at the coordinator level, and optionally override it per target:
TapTargetCoordinator(
showTapTargets = true,
bringIntoViewVerticalOffset = 100.dp, // default offset for all targets
onComplete = { }
) {
Button(
onClick = { },
modifier = Modifier.tapTarget(
precedence = 0,
title = TextDefinition(text = "Title"),
description = TextDefinition(text = "Description"),
bringIntoViewVerticalOffset = 160.dp, // override for this target
),
) {
Text(text = "Click here")
}
}
You can also disable bring into view for specific targets:
Modifier.tapTarget(
precedence = 1,
title = TextDefinition(text = "Title"),
description = TextDefinition(text = "Description"),
bringIntoViewEnabled = false,
)
For any question feel free to open an issue on the GitHub repository.
Surfaced from shared tags and platforms — no rankings paid for.