### Add tap-target-compose Dependency Source: https://github.com/pierfrancescosoffritti/tap-target-compose/blob/main/README.md Add this to your module level build.gradle file to start using the library. The minimum API level supported is API 13. ```gradle dependencies { implementation "com.pierfrancescosoffritti.taptargetcompose:core:1.2.1" } ``` -------------------------------- ### Basic Tap Target Usage in Compose Source: https://github.com/pierfrancescosoffritti/tap-target-compose/blob/main/README.md Wrap your composables in a TapTargetCoordinator and apply the .tapTarget modifier to the desired composable. This example shows how to define the tap target directly within the modifier. ```kotlin 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") } } } ``` -------------------------------- ### Define Reusable Tap Target Configurations Source: https://context7.com/pierfrancescosoffritti/tap-target-compose/llms.txt Use TapTargetDefinition to create reusable configurations for tap targets. This is recommended when applying the same styling to multiple elements. It bundles parameters like precedence, title, description, and tap target style. ```kotlin @Composable fun TapTargetScope.SettingsScreen() { // Helper that builds consistently styled definitions fun buildTarget(precedence: Int, title: String, desc: String) = TapTargetDefinition( precedence = precedence, title = TextDefinition( text = title, textStyle = MaterialTheme.typography.titleMedium, fontWeight = FontWeight.SemiBold, color = MaterialTheme.colorScheme.onPrimaryContainer ), description = TextDefinition( text = desc, textStyle = MaterialTheme.typography.bodySmall, color = MaterialTheme.colorScheme.onPrimaryContainer ), tapTargetStyle = TapTargetStyle( backgroundColor = MaterialTheme.colorScheme.primaryContainer, tapTargetHighlightColor = MaterialTheme.colorScheme.onPrimaryContainer, backgroundAlpha = 1f ) ) val themeTarget = buildTarget(0, "Theme", "Switch between light and dark mode.") val notifTarget = buildTarget(1, "Notifications", "Manage your notification preferences.") val privacyTarget = buildTarget(2, "Privacy", "Review your privacy settings.") Column { ListItem(headlineContent = { Text("Theme", Modifier.tapTarget(themeTarget)) }) ListItem(headlineContent = { Text("Notifications", Modifier.tapTarget(notifTarget)) }) ListItem(headlineContent = { Text("Privacy", Modifier.tapTarget(privacyTarget)) }) } } ``` -------------------------------- ### Initialize TapTargetCoordinator in Composable Source: https://context7.com/pierfrancescosoffritti/tap-target-compose/llms.txt Wrap your content with TapTargetCoordinator to manage tap targets. Control visibility with 'showTapTargets' and handle completion with 'onComplete'. Composables inside this block can register tap targets. ```kotlin @Composable fun OnboardingScreen() { // showTapTargets can be driven by a ViewModel / SharedPreferences flag var show by remember { mutableStateOf(true) } TapTargetCoordinator( showTapTargets = show, onComplete = { show = false } // called after every target has been dismissed ) { // All composables inside this block are in TapTargetScope // and can call Modifier.tapTarget(...) MyAppContent() } } ``` -------------------------------- ### Add Gradle Dependency for Tap Target Compose Source: https://context7.com/pierfrancescosoffritti/tap-target-compose/llms.txt Add this dependency to your module-level build.gradle or build.gradle.kts file to include the Tap Target Compose library. ```kotlin dependencies { implementation("com.pierfrancescosoffritti.taptargetcompose:core:1.2.1") } ``` -------------------------------- ### Style Tap Target Title and Description Text Source: https://context7.com/pierfrancescosoffritti/tap-target-compose/llms.txt Use TextDefinition to define the content and style of text within a tap target. It allows merging a base TextStyle with specific overrides for color, font weight, and other text properties. ```kotlin val boldTitle = TextDefinition( text = "New feature!", textStyle = MaterialTheme.typography.headlineSmall, // base style fontWeight = FontWeight.ExtraBold, color = Color.White, letterSpacing = 0.5.sp ) val subtleDescription = TextDefinition( text = "Tap here to explore the new dashboard view.", textStyle = MaterialTheme.typography.bodyMedium, color = Color.White.copy(alpha = 0.85f), fontStyle = FontStyle.Italic ) // Use both in a modifier inline Modifier.tapTarget( precedence = 0, title = boldTitle, description = subtleDescription ) ``` -------------------------------- ### Tap Target Usage with TapTargetDefinition Source: https://github.com/pierfrancescosoffritti/tap-target-compose/blob/main/README.md Define a TapTargetDefinition separately and pass it to the .tapTarget modifier. This approach is useful for reusing tap target configurations. ```kotlin 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") } } } ``` -------------------------------- ### Observe Tap Target State in Composable Source: https://context7.com/pierfrancescosoffritti/tap-target-compose/llms.txt Use `TapTargetCoordinatorState` to observe the currently active tap target. This is useful for logging analytics events or conditionally displaying complementary UI elements alongside the active tap target. ```kotlin @Composable fun OnboardingFlow() { val tapTargetState = remember { TapTargetCoordinatorState() } // Observe which target is active for analytics LaunchedEffect(tapTargetState.currentTarget) { tapTargetState.currentTarget?.let { target -> analytics.logEvent("tap_target_shown", mapOf("precedence" to target.precedence)) } } TapTargetCoordinator( showTapTargets = true, state = tapTargetState, onComplete = { /* all targets dismissed */ } ) { MainContent() } } ``` -------------------------------- ### Customize Tap Target Overlay Appearance Source: https://context7.com/pierfrancescosoffritti/tap-target-compose/llms.txt Configure the visual style of the tap target overlay circles using TapTargetStyle. Control the background color, highlight color, and opacity of the overlay. ```kotlin // Material3 themed style val materialStyle = TapTargetStyle( backgroundColor = MaterialTheme.colorScheme.secondaryContainer, tapTargetHighlightColor = MaterialTheme.colorScheme.onSecondaryContainer, backgroundAlpha = 1f ) // Semi-transparent dark overlay style val darkStyle = TapTargetStyle( backgroundColor = Color.Black, tapTargetHighlightColor = Color.Yellow, backgroundAlpha = 0.80f ) Modifier.tapTarget( precedence = 0, title = TextDefinition(text = "Highlighted button", color = Color.Yellow), description = TextDefinition(text = "This button does something important.", color = Color.White), tapTargetStyle = darkStyle ) ``` -------------------------------- ### Register Composable as Tap Target with Modifier.tapTarget() Source: https://context7.com/pierfrancescosoffritti/tap-target-compose/llms.txt Use Modifier.tapTarget() inside TapTargetScope to mark a composable as a tap target. Configure precedence, title, description, style, and callbacks. The modifier captures coordinates internally for correct overlay placement. ```kotlin @Composable fun TapTargetScope.MyAppContent() { Column(modifier = Modifier.fillMaxSize().padding(16.dp)) { Text( text = "Search", modifier = Modifier.tapTarget( precedence = 0, // shown first title = TextDefinition( text = "Search bar", textStyle = MaterialTheme.typography.titleLarge, fontWeight = FontWeight.Bold, color = Color.White ), description = TextDefinition( text = "Use this to find anything in the app.", textStyle = MaterialTheme.typography.bodyMedium, color = Color.White ), tapTargetStyle = TapTargetStyle( backgroundColor = Color(0xFF1565C0), tapTargetHighlightColor = Color.White, backgroundAlpha = 0.95f ), onTargetClick = { /* user tapped the highlighted target */ }, onTargetCancel = { /* user tapped outside the circle */ } ) ) Spacer(modifier = Modifier.height(16.dp)) Button( onClick = { }, modifier = Modifier.tapTarget( precedence = 1, // shown second title = TextDefinition(text = "Add item", color = Color.White), description = TextDefinition(text = "Tap to add a new entry.", color = Color.White) ) ) { Text("Add") } } } ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.