├── app
├── .gitignore
├── src
│ ├── main
│ │ ├── res
│ │ │ ├── values
│ │ │ │ ├── strings.xml
│ │ │ │ ├── themes.xml
│ │ │ │ └── colors.xml
│ │ │ ├── mipmap-hdpi
│ │ │ │ ├── ic_launcher.webp
│ │ │ │ └── ic_launcher_round.webp
│ │ │ ├── mipmap-mdpi
│ │ │ │ ├── ic_launcher.webp
│ │ │ │ └── ic_launcher_round.webp
│ │ │ ├── mipmap-xhdpi
│ │ │ │ ├── ic_launcher.webp
│ │ │ │ └── ic_launcher_round.webp
│ │ │ ├── mipmap-xxhdpi
│ │ │ │ ├── ic_launcher.webp
│ │ │ │ └── ic_launcher_round.webp
│ │ │ ├── mipmap-xxxhdpi
│ │ │ │ ├── ic_launcher.webp
│ │ │ │ └── ic_launcher_round.webp
│ │ │ ├── mipmap-anydpi-v26
│ │ │ │ ├── ic_launcher.xml
│ │ │ │ └── ic_launcher_round.xml
│ │ │ ├── xml
│ │ │ │ ├── backup_rules.xml
│ │ │ │ └── data_extraction_rules.xml
│ │ │ ├── drawable-v24
│ │ │ │ └── ic_launcher_foreground.xml
│ │ │ └── drawable
│ │ │ │ └── ic_launcher_background.xml
│ │ ├── java
│ │ │ └── com
│ │ │ │ └── joco
│ │ │ │ └── composeshowcaseview
│ │ │ │ ├── VisibleShowcase.kt
│ │ │ │ ├── ui
│ │ │ │ └── theme
│ │ │ │ │ ├── Color.kt
│ │ │ │ │ ├── Type.kt
│ │ │ │ │ └── Theme.kt
│ │ │ │ └── MainActivity.kt
│ │ └── AndroidManifest.xml
│ ├── test
│ │ └── java
│ │ │ └── com
│ │ │ └── joco
│ │ │ └── composeshowcaseview
│ │ │ └── ExampleUnitTest.kt
│ └── androidTest
│ │ └── java
│ │ └── com
│ │ └── joco
│ │ └── composeshowcaseview
│ │ └── ExampleInstrumentedTest.kt
├── proguard-rules.pro
└── build.gradle.kts
├── compose-showcaseview
├── .gitignore
├── consumer-rules.pro
├── src
│ ├── main
│ │ ├── AndroidManifest.xml
│ │ └── java
│ │ │ └── com
│ │ │ └── joco
│ │ │ └── compose_showcaseview
│ │ │ ├── ShowcaseDisplayState.kt
│ │ │ ├── highlight
│ │ │ ├── HighlightProperties.kt
│ │ │ └── ShowcaseHighlight.kt
│ │ │ ├── ShowcasePosition.kt
│ │ │ ├── ShowcaseAlignment.kt
│ │ │ ├── AnimationDuration.kt
│ │ │ └── ShowcaseView.kt
│ ├── test
│ │ └── java
│ │ │ └── com
│ │ │ └── joco
│ │ │ └── compose_showcaseview
│ │ │ └── ExampleUnitTest.kt
│ └── androidTest
│ │ └── java
│ │ └── com
│ │ └── joco
│ │ └── compose_showcaseview
│ │ └── ExampleInstrumentedTest.kt
├── proguard-rules.pro
└── build.gradle.kts
├── gradle
├── wrapper
│ ├── gradle-wrapper.jar
│ └── gradle-wrapper.properties
└── libs.versions.toml
├── .gitignore
├── settings.gradle.kts
├── LICENSE
├── gradle.properties
├── gradlew.bat
├── README.md
└── gradlew
/app/.gitignore:
--------------------------------------------------------------------------------
1 | /build
--------------------------------------------------------------------------------
/compose-showcaseview/.gitignore:
--------------------------------------------------------------------------------
1 | /build
--------------------------------------------------------------------------------
/compose-showcaseview/consumer-rules.pro:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/src/main/res/values/strings.xml:
--------------------------------------------------------------------------------
1 |
2 | Compose ShowcaseView
3 |
--------------------------------------------------------------------------------
/gradle/wrapper/gradle-wrapper.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcaseview/HEAD/gradle/wrapper/gradle-wrapper.jar
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-hdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcaseview/HEAD/app/src/main/res/mipmap-hdpi/ic_launcher.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-mdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcaseview/HEAD/app/src/main/res/mipmap-mdpi/ic_launcher.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xhdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcaseview/HEAD/app/src/main/res/mipmap-xhdpi/ic_launcher.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcaseview/HEAD/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcaseview/HEAD/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcaseview/HEAD/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcaseview/HEAD/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcaseview/HEAD/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcaseview/HEAD/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcaseview/HEAD/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp
--------------------------------------------------------------------------------
/compose-showcaseview/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/app/src/main/res/values/themes.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/gradle/wrapper/gradle-wrapper.properties:
--------------------------------------------------------------------------------
1 | #Sun Jun 30 08:49:13 WIB 2024
2 | distributionBase=GRADLE_USER_HOME
3 | distributionPath=wrapper/dists
4 | distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-bin.zip
5 | zipStoreBase=GRADLE_USER_HOME
6 | zipStorePath=wrapper/dists
7 |
--------------------------------------------------------------------------------
/app/src/main/java/com/joco/composeshowcaseview/VisibleShowcase.kt:
--------------------------------------------------------------------------------
1 | package com.joco.composeshowcaseview
2 |
3 | sealed interface VisibleShowcase {
4 | data object Greetings : VisibleShowcase
5 | data object ArticleTitle : VisibleShowcase
6 | data object Like : VisibleShowcase
7 | data object Share : VisibleShowcase
8 | data object None : VisibleShowcase
9 | }
--------------------------------------------------------------------------------
/app/src/main/java/com/joco/composeshowcaseview/ui/theme/Color.kt:
--------------------------------------------------------------------------------
1 | package com.joco.composeshowcaseview.ui.theme
2 |
3 | import androidx.compose.ui.graphics.Color
4 |
5 | val Purple80 = Color(0xFFD0BCFF)
6 | val PurpleGrey80 = Color(0xFFCCC2DC)
7 | val Pink80 = Color(0xFFEFB8C8)
8 |
9 | val Purple40 = Color(0xFF6650a4)
10 | val PurpleGrey40 = Color(0xFF625b71)
11 | val Pink40 = Color(0xFF7D5260)
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/app/src/main/res/values/colors.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | #FFBB86FC
4 | #FF6200EE
5 | #FF3700B3
6 | #FF03DAC5
7 | #FF018786
8 | #FF000000
9 | #FFFFFFFF
10 |
--------------------------------------------------------------------------------
/app/src/test/java/com/joco/composeshowcaseview/ExampleUnitTest.kt:
--------------------------------------------------------------------------------
1 | package com.joco.composeshowcaseview
2 |
3 | import org.junit.Test
4 |
5 | import org.junit.Assert.*
6 |
7 | /**
8 | * Example local unit test, which will execute on the development machine (host).
9 | *
10 | * See [testing documentation](http://d.android.com/tools/testing).
11 | */
12 | class ExampleUnitTest {
13 | @Test
14 | fun addition_isCorrect() {
15 | assertEquals(4, 2 + 2)
16 | }
17 | }
--------------------------------------------------------------------------------
/compose-showcaseview/src/test/java/com/joco/compose_showcaseview/ExampleUnitTest.kt:
--------------------------------------------------------------------------------
1 | package com.joco.compose_showcaseview
2 |
3 | import org.junit.Test
4 |
5 | import org.junit.Assert.*
6 |
7 | /**
8 | * Example local unit test, which will execute on the development machine (host).
9 | *
10 | * See [testing documentation](http://d.android.com/tools/testing).
11 | */
12 | class ExampleUnitTest {
13 | @Test
14 | fun addition_isCorrect() {
15 | assertEquals(4, 2 + 2)
16 | }
17 | }
--------------------------------------------------------------------------------
/compose-showcaseview/src/main/java/com/joco/compose_showcaseview/ShowcaseDisplayState.kt:
--------------------------------------------------------------------------------
1 | package com.joco.compose_showcaseview
2 |
3 | /**
4 | * Interface that represents the display state of the Showcase.
5 |
6 | * `Appeared` indicates that the Showcase has fully appeared on the screen.
7 | * `Disappeared` indicates that the Showcase has fully disappeared from the screen.
8 | */
9 | sealed interface ShowcaseDisplayState {
10 | data object Appeared : ShowcaseDisplayState
11 | data object Disappeared : ShowcaseDisplayState
12 | }
--------------------------------------------------------------------------------
/app/src/main/res/xml/backup_rules.xml:
--------------------------------------------------------------------------------
1 |
8 |
9 |
13 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Gradle files
2 | .gradle/
3 | build/
4 |
5 | # Local configuration file (sdk path, etc)
6 | local.properties
7 |
8 | # Log/OS Files
9 | *.log
10 |
11 | # Android Studio generated files and folders
12 | captures/
13 | .externalNativeBuild/
14 | .cxx/
15 | *.apk
16 | output.json
17 |
18 | # IntelliJ
19 | *.iml
20 | .idea/
21 | misc.xml
22 | deploymentTargetDropDown.xml
23 | render.experimental.xml
24 |
25 | # Keystore files
26 | *.jks
27 | *.keystore
28 |
29 | # Google Services (e.g. APIs or Firebase)
30 | google-services.json
31 |
32 | # Android Profiling
33 | *.hprof
--------------------------------------------------------------------------------
/app/src/main/res/xml/data_extraction_rules.xml:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
12 |
13 |
19 |
--------------------------------------------------------------------------------
/settings.gradle.kts:
--------------------------------------------------------------------------------
1 | pluginManagement {
2 | repositories {
3 | google {
4 | content {
5 | includeGroupByRegex("com\\.android.*")
6 | includeGroupByRegex("com\\.google.*")
7 | includeGroupByRegex("androidx.*")
8 | }
9 | }
10 | mavenCentral()
11 | gradlePluginPortal()
12 | }
13 | }
14 | dependencyResolutionManagement {
15 | repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
16 | repositories {
17 | google()
18 | mavenCentral()
19 | }
20 | }
21 |
22 | rootProject.name = "Compose ShowcaseView"
23 | include(":app")
24 | include(":compose-showcaseview")
25 |
--------------------------------------------------------------------------------
/compose-showcaseview/src/main/java/com/joco/compose_showcaseview/highlight/HighlightProperties.kt:
--------------------------------------------------------------------------------
1 | package com.joco.compose_showcaseview.highlight
2 |
3 | import androidx.compose.ui.geometry.Rect
4 | import androidx.compose.ui.graphics.drawscope.DrawScope
5 | import androidx.compose.ui.layout.LayoutCoordinates
6 |
7 | /**
8 | * Represents the highlight around the target element.
9 | *
10 | * @property drawHighlight A lambda function that draws the highlight around the target element.
11 | * @property highlightBounds The bounds of the highlight around the target element.
12 | */
13 | class HighlightProperties internal constructor(
14 | val drawHighlight: DrawScope.(LayoutCoordinates) -> Unit,
15 | val highlightBounds: Rect
16 | )
--------------------------------------------------------------------------------
/app/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # You can control the set of applied configuration files using the
3 | # proguardFiles setting in build.gradle.
4 | #
5 | # For more details, see
6 | # http://developer.android.com/guide/developing/tools/proguard.html
7 |
8 | # If your project uses WebView with JS, uncomment the following
9 | # and specify the fully qualified class name to the JavaScript interface
10 | # class:
11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview {
12 | # public *;
13 | #}
14 |
15 | # Uncomment this to preserve the line number information for
16 | # debugging stack traces.
17 | #-keepattributes SourceFile,LineNumberTable
18 |
19 | # If you keep the line number information, uncomment this to
20 | # hide the original source file name.
21 | #-renamesourcefileattribute SourceFile
--------------------------------------------------------------------------------
/app/src/androidTest/java/com/joco/composeshowcaseview/ExampleInstrumentedTest.kt:
--------------------------------------------------------------------------------
1 | package com.joco.composeshowcaseview
2 |
3 | import androidx.test.platform.app.InstrumentationRegistry
4 | import androidx.test.ext.junit.runners.AndroidJUnit4
5 |
6 | import org.junit.Test
7 | import org.junit.runner.RunWith
8 |
9 | import org.junit.Assert.*
10 |
11 | /**
12 | * Instrumented test, which will execute on an Android device.
13 | *
14 | * See [testing documentation](http://d.android.com/tools/testing).
15 | */
16 | @RunWith(AndroidJUnit4::class)
17 | class ExampleInstrumentedTest {
18 | @Test
19 | fun useAppContext() {
20 | // Context of the app under test.
21 | val appContext = InstrumentationRegistry.getInstrumentation().targetContext
22 | assertEquals("com.joco.composeshowcaseview", appContext.packageName)
23 | }
24 | }
--------------------------------------------------------------------------------
/compose-showcaseview/proguard-rules.pro:
--------------------------------------------------------------------------------
1 | # Add project specific ProGuard rules here.
2 | # You can control the set of applied configuration files using the
3 | # proguardFiles setting in build.gradle.
4 | #
5 | # For more details, see
6 | # http://developer.android.com/guide/developing/tools/proguard.html
7 |
8 | # If your project uses WebView with JS, uncomment the following
9 | # and specify the fully qualified class name to the JavaScript interface
10 | # class:
11 | #-keepclassmembers class fqcn.of.javascript.interface.for.webview {
12 | # public *;
13 | #}
14 |
15 | # Uncomment this to preserve the line number information for
16 | # debugging stack traces.
17 | #-keepattributes SourceFile,LineNumberTable
18 |
19 | # If you keep the line number information, uncomment this to
20 | # hide the original source file name.
21 | #-renamesourcefileattribute SourceFile
--------------------------------------------------------------------------------
/compose-showcaseview/src/androidTest/java/com/joco/compose_showcaseview/ExampleInstrumentedTest.kt:
--------------------------------------------------------------------------------
1 | package com.joco.compose_showcaseview
2 |
3 | import androidx.test.platform.app.InstrumentationRegistry
4 | import androidx.test.ext.junit.runners.AndroidJUnit4
5 |
6 | import org.junit.Test
7 | import org.junit.runner.RunWith
8 |
9 | import org.junit.Assert.*
10 |
11 | /**
12 | * Instrumented test, which will execute on an Android device.
13 | *
14 | * See [testing documentation](http://d.android.com/tools/testing).
15 | */
16 | @RunWith(AndroidJUnit4::class)
17 | class ExampleInstrumentedTest {
18 | @Test
19 | fun useAppContext() {
20 | // Context of the app under test.
21 | val appContext = InstrumentationRegistry.getInstrumentation().targetContext
22 | assertEquals("com.joco.compose_showcaseview.test", appContext.packageName)
23 | }
24 | }
--------------------------------------------------------------------------------
/compose-showcaseview/src/main/java/com/joco/compose_showcaseview/ShowcasePosition.kt:
--------------------------------------------------------------------------------
1 | package com.joco.compose_showcaseview
2 |
3 | /**
4 | * A sealed interface that represents the position of a showcase dialog relative to a target element.
5 | * It has three possible values:
6 | * - `Top`: The showcase dialog should be positioned above the target element.
7 | * - `Bottom`: The showcase dialog should be positioned below the target element.
8 | * - `Default`: The showcase dialog's position is determined based on the location of the target element on the screen.
9 | * If the target element is in the upper half of the screen, the showcase dialog will be positioned below it, and vice versa.
10 | */
11 | sealed interface ShowcasePosition {
12 | data object Top : ShowcasePosition
13 | data object Bottom : ShowcasePosition
14 | data object Default : ShowcasePosition
15 | }
--------------------------------------------------------------------------------
/compose-showcaseview/src/main/java/com/joco/compose_showcaseview/ShowcaseAlignment.kt:
--------------------------------------------------------------------------------
1 | package com.joco.compose_showcaseview
2 |
3 | /**
4 | * A sealed interface defines the alignment of the dialog relative to the target element in the Showcase.
5 | * It has four possible values:
6 | * - `Start`: Aligns the dialog to the start of the target element.
7 | * - `End`: Aligns the dialog to the end of the target element.
8 | * - `CenterHorizontal`: Centers the dialog horizontally relative to the target element.
9 | * - `Default`: Chooses the alignment based on the position of the target element on the screen.
10 | * If the target element is in the right half of the screen, it aligns the dialog to the end of the target element,
11 | * otherwise it aligns to the start.
12 | */
13 | sealed interface ShowcaseAlignment {
14 | data object Start : ShowcaseAlignment
15 | data object End : ShowcaseAlignment
16 | data object CenterHorizontal : ShowcaseAlignment
17 | data object Default : ShowcaseAlignment
18 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 jocoand
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/app/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
15 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/app/src/main/java/com/joco/composeshowcaseview/ui/theme/Type.kt:
--------------------------------------------------------------------------------
1 | package com.joco.composeshowcaseview.ui.theme
2 |
3 | import androidx.compose.material3.Typography
4 | import androidx.compose.ui.text.TextStyle
5 | import androidx.compose.ui.text.font.FontFamily
6 | import androidx.compose.ui.text.font.FontWeight
7 | import androidx.compose.ui.unit.sp
8 |
9 | // Set of Material typography styles to start with
10 | val Typography = Typography(
11 | bodyLarge = TextStyle(
12 | fontFamily = FontFamily.Default,
13 | fontWeight = FontWeight.Normal,
14 | fontSize = 16.sp,
15 | lineHeight = 24.sp,
16 | letterSpacing = 0.5.sp
17 | )
18 | /* Other default text styles to override
19 | titleLarge = TextStyle(
20 | fontFamily = FontFamily.Default,
21 | fontWeight = FontWeight.Normal,
22 | fontSize = 22.sp,
23 | lineHeight = 28.sp,
24 | letterSpacing = 0.sp
25 | ),
26 | labelSmall = TextStyle(
27 | fontFamily = FontFamily.Default,
28 | fontWeight = FontWeight.Medium,
29 | fontSize = 11.sp,
30 | lineHeight = 16.sp,
31 | letterSpacing = 0.5.sp
32 | )
33 | */
34 | )
--------------------------------------------------------------------------------
/compose-showcaseview/src/main/java/com/joco/compose_showcaseview/AnimationDuration.kt:
--------------------------------------------------------------------------------
1 | package com.joco.compose_showcaseview
2 |
3 | /**
4 | * Class that represents the duration of animations in the `ShowcaseView`.
5 | *
6 | * @property enterMillis The duration of the enter animation in milliseconds.
7 | * @property exitMillis The duration of the exit animation in milliseconds.
8 | */
9 | class AnimationDuration private constructor(val enterMillis: Int, val exitMillis: Int) {
10 |
11 | companion object {
12 | private const val DEFAULT_MILLIS = 700
13 |
14 | /**
15 | * Creates a `AnimationDuration` with the default duration for both enter and exit animations.
16 | */
17 | val Default = AnimationDuration(DEFAULT_MILLIS, DEFAULT_MILLIS)
18 |
19 | /**
20 | * Creates a `AnimationDuration` with the same duration for both enter and exit animations.
21 | *
22 | * @param durationMillis Animations duration in milliseconds.
23 | */
24 | fun create(durationMillis: Int) = AnimationDuration(durationMillis, durationMillis)
25 |
26 | /**
27 | * Creates a `AnimationDuration` with different durations for enter and exit animations.
28 | *
29 | * @param enterMillis The enter animation duration in milliseconds.
30 | * @param exitMillis The exit animation duration in milliseconds.
31 | */
32 | fun create(enterMillis: Int, exitMillis: Int) = AnimationDuration(enterMillis, exitMillis)
33 | }
34 | }
--------------------------------------------------------------------------------
/compose-showcaseview/build.gradle.kts:
--------------------------------------------------------------------------------
1 | plugins {
2 | alias(libs.plugins.androidLibrary)
3 | alias(libs.plugins.jetbrainsKotlinAndroid)
4 |
5 | alias(libs.plugins.mavenPublish)
6 | alias(libs.plugins.nmcp)
7 | }
8 |
9 | android {
10 | namespace = "com.joco.compose_showcaseview"
11 | compileSdk = 34
12 | version = findProperty("VERSION_NAME") as String
13 |
14 | defaultConfig {
15 | minSdk = 21
16 |
17 | testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
18 | consumerProguardFiles("consumer-rules.pro")
19 | }
20 |
21 | buildTypes {
22 | release {
23 | isMinifyEnabled = false
24 | proguardFiles(
25 | getDefaultProguardFile("proguard-android-optimize.txt"),
26 | "proguard-rules.pro"
27 | )
28 | }
29 | }
30 | compileOptions {
31 | sourceCompatibility = JavaVersion.VERSION_17
32 | targetCompatibility = JavaVersion.VERSION_17
33 | }
34 | kotlinOptions {
35 | jvmTarget = "17"
36 | }
37 | buildFeatures {
38 | compose = true
39 | }
40 | composeOptions {
41 | kotlinCompilerExtensionVersion = "1.5.1"
42 | }
43 | }
44 |
45 | dependencies {
46 |
47 | implementation(libs.androidx.core.ktx)
48 | implementation(platform(libs.androidx.compose.bom))
49 | implementation(libs.androidx.ui)
50 | implementation(libs.androidx.ui.graphics)
51 | implementation(libs.androidx.material3)
52 |
53 | testImplementation(libs.junit)
54 | androidTestImplementation(libs.androidx.junit)
55 | androidTestImplementation(libs.androidx.espresso.core)
56 | }
--------------------------------------------------------------------------------
/app/src/main/res/drawable-v24/ic_launcher_foreground.xml:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
15 |
2 | 
3 | 
4 |
5 |
6 |
7 | ## 🌀 Compose Showcase View
8 | A simple showcase library for highlighting components and showing a dialog on it.
9 |
10 | For more pre-configured implementation see [Sequence Showcase](https://github.com/jocoand/compose-showcase?tab=readme-ov-file#-sequence-showcase) 🚀
11 |
12 |
13 | 
14 |
15 |
16 | ### Installation
17 | - Gradle
18 | ```
19 | implementation("io.github.jocoand:compose-showcaseview:1.4.0")
20 | ```
21 |
22 | ### Usage
23 | - Create your Showcase dialog
24 | - ```
25 | @Composable
26 | fun MyShowcaseDialog(text: String, onClick: () -> Unit) {
27 | Column(
28 | modifier = Modifier
29 | .background(Color.White, shape = RoundedCornerShape(12.dp))
30 | .padding(16.dp),
31 | verticalArrangement = Arrangement.Center,
32 | horizontalAlignment = Alignment.End
33 | ) {
34 | Text(text = text)
35 | Spacer(modifier = Modifier.height(8.dp))
36 | Button(
37 | shape = RoundedCornerShape(8.dp),
38 | onClick = onClick
39 | ) {
40 | Text("Nice !")
41 | }
42 | }
43 | }
44 | ```
45 |
46 | - Mark your target component (view to be highlighted) `LayoutCoordinates` using `onGloballyPositioned` modifier
47 | - ```
48 | val targets = remember { mutableStateMapOf() }
49 | var greetingShowcaseVisible by remember { mutableStateOf(false) }
50 |
51 | ...
52 | // Target component (view to be highlighted)
53 | Greeting(
54 | modifier = Modifier
55 | .align(Alignment.End)
56 | .onGloballyPositioned { coordinates ->
57 | targets[KEY_GREETING] = coordinates
58 | },
59 | name = "Andy",
60 | onClick = { greetingShowcaseVisible = true }
61 | )
62 | ```
63 |
64 | - Declare `ShowcaseView`, use `visible` to set ShowcaseView visibility
65 | - ```
66 | targets[KEY_SHARE]?.let { coordinates ->
67 | ShowcaseView(
68 | visible = visibleShowcase == VisibleShowcase.Share,
69 | targetCoordinates = coordinates,
70 | ) {
71 | MyShowcaseDialog(
72 | text = "Click to Share the article",
73 | onClick = { visibleShowcase = VisibleShowcase.None }
74 | )
75 | }
76 | }
77 | ```
78 | You may want to put you `ShowcaseView` in your top most componenent to make the overlay cover the whole screen
79 | ```
80 | Box(modifier = Modifier.fillMaxSize()) {
81 | Scaffold(
82 | ...
83 | ) { innerPadding ->
84 | }
85 | targets[KEY_GREETING]?.let { coordinates ->
86 | ShowcaseView(
87 | visible = greetingShowcaseVisible,
88 | targetCoordinates = coordinates,
89 | ) {
90 | MyShowcaseDialog(
91 | text = "Hey, this is Greetings showcase",
92 | onClick = { greetingShowcaseVisible = false }
93 | )
94 | }
95 | }
96 | }
97 | ```
98 | ### Config
99 | - `position`
100 |
101 |
102 |
103 | 
104 | |
105 |
106 | 
107 | |
108 |
109 |
110 |
111 | | Top |
112 | Bottom |
113 |
114 |
115 |
116 | `Default`: relative to target position
117 |
118 | - `alignment`
119 |
120 |
121 |
122 | 
123 | |
124 |
125 | 
126 | |
127 |
128 | 
129 | |
130 |
131 |
132 | | Start |
133 | Center |
134 | End |
135 |
136 |
137 |
138 | `Default`: relative to target position
139 |
140 | `animationDuration`: duration of the enter and exit animation.
141 |
142 | ### :beers: Contributing
143 | - Contribution are welcome!
144 | Feel free to open an issue or a pull request, if you find any bugs or have any suggestions.
145 |
146 | ### 💡Inspired by
147 | - https://github.com/SimformSolutionsPvtLtd/SSComposeShowCaseView
148 |
149 | ### 🎨 Sample
150 | - [MainActivity](https://github.com/jocoand/compose-showcaseview/blob/main/app/src/main/java/com/joco/composeshowcaseview/MainActivity.kt)
151 |
--------------------------------------------------------------------------------
/compose-showcaseview/src/main/java/com/joco/compose_showcaseview/highlight/ShowcaseHighlight.kt:
--------------------------------------------------------------------------------
1 | package com.joco.compose_showcaseview.highlight
2 |
3 | import androidx.compose.runtime.Composable
4 | import androidx.compose.ui.geometry.CornerRadius
5 | import androidx.compose.ui.geometry.Offset
6 | import androidx.compose.ui.geometry.Rect
7 | import androidx.compose.ui.graphics.BlendMode
8 | import androidx.compose.ui.graphics.Color
9 | import androidx.compose.ui.graphics.drawscope.DrawScope
10 | import androidx.compose.ui.layout.LayoutCoordinates
11 | import androidx.compose.ui.layout.boundsInParent
12 | import androidx.compose.ui.layout.boundsInRoot
13 | import androidx.compose.ui.platform.LocalDensity
14 | import androidx.compose.ui.unit.Dp
15 | import androidx.compose.ui.unit.dp
16 |
17 | sealed interface ShowcaseHighlight {
18 | /**
19 | * Create a HighlightProperties object which contains the details of the highlight.
20 | */
21 | @Composable
22 | fun create(targetCoordinates: LayoutCoordinates): HighlightProperties
23 |
24 | /**
25 | * Class to create a rectangular highlight around the target element.
26 | * @property cornerRadius The corner radius of the rounded rectangle.
27 | */
28 | data class Rectangular(val cornerRadius: Dp = 8.dp) : ShowcaseHighlight {
29 |
30 | @Composable
31 | override fun create(
32 | targetCoordinates: LayoutCoordinates
33 | ): HighlightProperties {
34 | val highlightBounds = createHighlightBounds(
35 | targetCoordinates.boundsInRoot(),
36 | with(LocalDensity.current) { 8.dp.toPx() }
37 | )
38 | return HighlightProperties(
39 | drawHighlight = { rectangularHighlight(cornerRadius.toPx(), highlightBounds) },
40 | highlightBounds = highlightBounds
41 | )
42 | }
43 |
44 | /**
45 | * Draws a rounded rectangle highlight around the target element.
46 | *
47 | * @param cornerRadius The corner radius of the rounded rectangle.
48 | * @param highlightBounds The bounds of the highlight around the target element.
49 | */
50 | private fun DrawScope.rectangularHighlight(
51 | cornerRadius: Float,
52 | highlightBounds: Rect
53 | ) {
54 | drawRoundRect(
55 | color = Color.White,
56 | size = highlightBounds.size,
57 | topLeft = highlightBounds.topLeft,
58 | blendMode = BlendMode.Clear,
59 | cornerRadius = CornerRadius(cornerRadius, cornerRadius)
60 | )
61 | }
62 |
63 | private fun createHighlightBounds(
64 | targetRect: Rect,
65 | targetMargin: Float
66 | ): Rect {
67 | return Rect(
68 | top = targetRect.top - targetMargin,
69 | bottom = targetRect.bottom + targetMargin,
70 | left = targetRect.left - targetMargin,
71 | right = targetRect.right + targetMargin
72 | )
73 | }
74 | }
75 |
76 | /**
77 | * Data object is used to create a circular highlight around the target element.
78 | */
79 | data class Circular(val targetMargin: Dp = 4.dp) : ShowcaseHighlight {
80 |
81 | @Composable
82 | override fun create(targetCoordinates: LayoutCoordinates): HighlightProperties {
83 | val targetMargin = with(LocalDensity.current) { targetMargin.toPx() }
84 | return HighlightProperties(
85 | drawHighlight = { circularHighlight(it, targetMargin) },
86 | highlightBounds = createHighlightBounds(
87 | targetCoordinates.boundsInRoot(),
88 | targetMargin = targetMargin
89 | )
90 | )
91 | }
92 |
93 | /**
94 | * Draws a circular highlight around the target element.
95 | *
96 | * @param coordinates The coordinates of the target element.
97 | * @param targetMargin The margin around the target element.
98 | */
99 | private fun DrawScope.circularHighlight(
100 | coordinates: LayoutCoordinates,
101 | targetMargin: Float
102 | ) {
103 | val targetRect = coordinates.boundsInRoot()
104 | val xOffset = targetRect.topLeft.x
105 | val yOffset = targetRect.topLeft.y
106 | val rectSize = coordinates.boundsInParent().size
107 | val radius = if (rectSize.width > rectSize.height) {
108 | rectSize.width / 2
109 | } else {
110 | rectSize.height / 2
111 | }
112 | drawCircle(
113 | color = Color.White,
114 | radius = radius + targetMargin,
115 | center = Offset(xOffset + rectSize.width / 2, yOffset + rectSize.height / 2),
116 | blendMode = BlendMode.Clear
117 | )
118 | }
119 |
120 | private fun createHighlightBounds(targetRect: Rect, targetMargin: Float): Rect {
121 | val radius = if (targetRect.width > targetRect.height) {
122 | targetRect.width / 2
123 | } else {
124 | targetRect.height / 2
125 | }
126 |
127 | return Rect(
128 | top = targetRect.center.y - radius - targetMargin,
129 | bottom = targetRect.center.y + radius + targetMargin,
130 | left = targetRect.center.x - radius - targetMargin,
131 | right = targetRect.center.x + radius + targetMargin
132 | )
133 | }
134 | }
135 | }
--------------------------------------------------------------------------------
/app/src/main/res/drawable/ic_launcher_background.xml:
--------------------------------------------------------------------------------
1 |
2 |
7 |
10 |
15 |
20 |
25 |
30 |
35 |
40 |
45 |
50 |
55 |
60 |
65 |
70 |
75 |
80 |
85 |
90 |
95 |
100 |
105 |
110 |
115 |
120 |
125 |
130 |
135 |
140 |
145 |
150 |
155 |
160 |
165 |
170 |
171 |
--------------------------------------------------------------------------------
/gradlew:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env sh
2 |
3 | #
4 | # Copyright 2015 the original author or authors.
5 | #
6 | # Licensed under the Apache License, Version 2.0 (the "License");
7 | # you may not use this file except in compliance with the License.
8 | # You may obtain a copy of the License at
9 | #
10 | # https://www.apache.org/licenses/LICENSE-2.0
11 | #
12 | # Unless required by applicable law or agreed to in writing, software
13 | # distributed under the License is distributed on an "AS IS" BASIS,
14 | # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15 | # See the License for the specific language governing permissions and
16 | # limitations under the License.
17 | #
18 |
19 | ##############################################################################
20 | ##
21 | ## Gradle start up script for UN*X
22 | ##
23 | ##############################################################################
24 |
25 | # Attempt to set APP_HOME
26 | # Resolve links: $0 may be a link
27 | PRG="$0"
28 | # Need this for relative symlinks.
29 | while [ -h "$PRG" ] ; do
30 | ls=`ls -ld "$PRG"`
31 | link=`expr "$ls" : '.*-> \(.*\)$'`
32 | if expr "$link" : '/.*' > /dev/null; then
33 | PRG="$link"
34 | else
35 | PRG=`dirname "$PRG"`"/$link"
36 | fi
37 | done
38 | SAVED="`pwd`"
39 | cd "`dirname \"$PRG\"`/" >/dev/null
40 | APP_HOME="`pwd -P`"
41 | cd "$SAVED" >/dev/null
42 |
43 | APP_NAME="Gradle"
44 | APP_BASE_NAME=`basename "$0"`
45 |
46 | # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
47 | DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
48 |
49 | # Use the maximum available, or set MAX_FD != -1 to use that value.
50 | MAX_FD="maximum"
51 |
52 | warn () {
53 | echo "$*"
54 | }
55 |
56 | die () {
57 | echo
58 | echo "$*"
59 | echo
60 | exit 1
61 | }
62 |
63 | # OS specific support (must be 'true' or 'false').
64 | cygwin=false
65 | msys=false
66 | darwin=false
67 | nonstop=false
68 | case "`uname`" in
69 | CYGWIN* )
70 | cygwin=true
71 | ;;
72 | Darwin* )
73 | darwin=true
74 | ;;
75 | MINGW* )
76 | msys=true
77 | ;;
78 | NONSTOP* )
79 | nonstop=true
80 | ;;
81 | esac
82 |
83 | CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
84 |
85 |
86 | # Determine the Java command to use to start the JVM.
87 | if [ -n "$JAVA_HOME" ] ; then
88 | if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
89 | # IBM's JDK on AIX uses strange locations for the executables
90 | JAVACMD="$JAVA_HOME/jre/sh/java"
91 | else
92 | JAVACMD="$JAVA_HOME/bin/java"
93 | fi
94 | if [ ! -x "$JAVACMD" ] ; then
95 | die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
96 |
97 | Please set the JAVA_HOME variable in your environment to match the
98 | location of your Java installation."
99 | fi
100 | else
101 | JAVACMD="java"
102 | which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
103 |
104 | Please set the JAVA_HOME variable in your environment to match the
105 | location of your Java installation."
106 | fi
107 |
108 | # Increase the maximum file descriptors if we can.
109 | if [ "$cygwin" = "false" -a "$darwin" = "false" -a "$nonstop" = "false" ] ; then
110 | MAX_FD_LIMIT=`ulimit -H -n`
111 | if [ $? -eq 0 ] ; then
112 | if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
113 | MAX_FD="$MAX_FD_LIMIT"
114 | fi
115 | ulimit -n $MAX_FD
116 | if [ $? -ne 0 ] ; then
117 | warn "Could not set maximum file descriptor limit: $MAX_FD"
118 | fi
119 | else
120 | warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
121 | fi
122 | fi
123 |
124 | # For Darwin, add options to specify how the application appears in the dock
125 | if $darwin; then
126 | GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
127 | fi
128 |
129 | # For Cygwin or MSYS, switch paths to Windows format before running java
130 | if [ "$cygwin" = "true" -o "$msys" = "true" ] ; then
131 | APP_HOME=`cygpath --path --mixed "$APP_HOME"`
132 | CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
133 |
134 | JAVACMD=`cygpath --unix "$JAVACMD"`
135 |
136 | # We build the pattern for arguments to be converted via cygpath
137 | ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
138 | SEP=""
139 | for dir in $ROOTDIRSRAW ; do
140 | ROOTDIRS="$ROOTDIRS$SEP$dir"
141 | SEP="|"
142 | done
143 | OURCYGPATTERN="(^($ROOTDIRS))"
144 | # Add a user-defined pattern to the cygpath arguments
145 | if [ "$GRADLE_CYGPATTERN" != "" ] ; then
146 | OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
147 | fi
148 | # Now convert the arguments - kludge to limit ourselves to /bin/sh
149 | i=0
150 | for arg in "$@" ; do
151 | CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
152 | CHECK2=`echo "$arg"|egrep -c "^-"` ### Determine if an option
153 |
154 | if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then ### Added a condition
155 | eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
156 | else
157 | eval `echo args$i`="\"$arg\""
158 | fi
159 | i=`expr $i + 1`
160 | done
161 | case $i in
162 | 0) set -- ;;
163 | 1) set -- "$args0" ;;
164 | 2) set -- "$args0" "$args1" ;;
165 | 3) set -- "$args0" "$args1" "$args2" ;;
166 | 4) set -- "$args0" "$args1" "$args2" "$args3" ;;
167 | 5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
168 | 6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
169 | 7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
170 | 8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
171 | 9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
172 | esac
173 | fi
174 |
175 | # Escape application args
176 | save () {
177 | for i do printf %s\\n "$i" | sed "s/'/'\\\\''/g;1s/^/'/;\$s/\$/' \\\\/" ; done
178 | echo " "
179 | }
180 | APP_ARGS=`save "$@"`
181 |
182 | # Collect all arguments for the java command, following the shell quoting and substitution rules
183 | eval set -- $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS "\"-Dorg.gradle.appname=$APP_BASE_NAME\"" -classpath "\"$CLASSPATH\"" org.gradle.wrapper.GradleWrapperMain "$APP_ARGS"
184 |
185 | exec "$JAVACMD" "$@"
186 |
--------------------------------------------------------------------------------
/compose-showcaseview/src/main/java/com/joco/compose_showcaseview/ShowcaseView.kt:
--------------------------------------------------------------------------------
1 | package com.joco.compose_showcaseview
2 |
3 | import androidx.compose.animation.AnimatedVisibility
4 | import androidx.compose.animation.core.MutableTransitionState
5 | import androidx.compose.animation.core.tween
6 | import androidx.compose.animation.fadeIn
7 | import androidx.compose.animation.fadeOut
8 | import androidx.compose.foundation.Canvas
9 | import androidx.compose.foundation.layout.Box
10 | import androidx.compose.foundation.layout.fillMaxSize
11 | import androidx.compose.foundation.layout.offset
12 | import androidx.compose.runtime.Composable
13 | import androidx.compose.runtime.LaunchedEffect
14 | import androidx.compose.runtime.getValue
15 | import androidx.compose.runtime.mutableFloatStateOf
16 | import androidx.compose.runtime.remember
17 | import androidx.compose.runtime.setValue
18 | import androidx.compose.ui.Modifier
19 | import androidx.compose.ui.geometry.Rect
20 | import androidx.compose.ui.geometry.Size
21 | import androidx.compose.ui.graphics.Color
22 | import androidx.compose.ui.graphics.drawscope.DrawScope
23 | import androidx.compose.ui.graphics.graphicsLayer
24 | import androidx.compose.ui.layout.LayoutCoordinates
25 | import androidx.compose.ui.layout.boundsInRoot
26 | import androidx.compose.ui.layout.onGloballyPositioned
27 | import androidx.compose.ui.platform.LocalConfiguration
28 | import androidx.compose.ui.platform.LocalDensity
29 | import androidx.compose.ui.unit.dp
30 | import com.joco.compose_showcaseview.highlight.ShowcaseHighlight
31 |
32 | /**
33 | * Displays a dialog with a background overlay.
34 | * *
35 | * @param visible determines if the Showcase is visible or not.
36 | * @param targetCoordinates the coordinates of the target element that the Showcase is highlighting.
37 | * @param position the position of the dialog relative to the target element.
38 | * @param alignment the alignment of the dialog relative to the target element.
39 | * @param animationDuration the duration of the fade in and fade out animation.
40 | * @param onDisplayStateChanged: callback function that is invoked when the display state of the Showcase changes.
41 | * @param highlight the highlight around the target element.
42 | * @param dialog the content of the dialog.
43 | */
44 | @Composable
45 | fun ShowcaseView(
46 | visible: Boolean,
47 | targetCoordinates: LayoutCoordinates,
48 | position: ShowcasePosition = ShowcasePosition.Default,
49 | alignment: ShowcaseAlignment = ShowcaseAlignment.Default,
50 | animationDuration: AnimationDuration = AnimationDuration.Default,
51 | onDisplayStateChanged: (ShowcaseDisplayState) -> Unit = {},
52 | highlight: ShowcaseHighlight = ShowcaseHighlight.Rectangular(),
53 | dialog: @Composable () -> Unit
54 | ) {
55 | val transition = remember { MutableTransitionState(false) }
56 | val highlightDrawer = highlight.create(targetCoordinates = targetCoordinates)
57 |
58 | AnimatedVisibility(
59 | visibleState = transition,
60 | enter = fadeIn(tween(animationDuration.enterMillis)),
61 | exit = fadeOut(tween(animationDuration.exitMillis))
62 | ) {
63 | Box {
64 | ShowcaseBackground(
65 | coordinates = targetCoordinates,
66 | drawHighlight = highlightDrawer.drawHighlight
67 | )
68 | ShowcaseDialog(
69 | targetRect = targetCoordinates.boundsInRoot(),
70 | position = position,
71 | alignment = alignment,
72 | highlightBounds = highlightDrawer.highlightBounds,
73 | content = dialog
74 | )
75 | }
76 | }
77 | LaunchedEffect(key1 = visible) {
78 | transition.targetState = visible
79 | }
80 | LaunchedEffect(key1 = transition.isIdle) {
81 | if (transition.isIdle) {
82 | if (transition.targetState) {
83 | onDisplayStateChanged(ShowcaseDisplayState.Appeared)
84 | } else {
85 | onDisplayStateChanged(ShowcaseDisplayState.Disappeared)
86 | }
87 | }
88 | }
89 | }
90 |
91 | /**
92 | * Draws the background overlay and the highlight around the target element.
93 | *
94 | * @param coordinates the coordinates of the target element that the Showcase is highlighting.
95 | * @param drawHighlight draws the highlight around the target element.
96 | */
97 | @Composable
98 | private fun ShowcaseBackground(
99 | coordinates: LayoutCoordinates,
100 | drawHighlight: DrawScope.(LayoutCoordinates) -> Unit
101 | ) {
102 | Canvas(
103 | modifier = Modifier
104 | .fillMaxSize()
105 | .graphicsLayer(alpha = 0.6f)
106 | ) {
107 | // Overlay
108 | drawRect(
109 | Color.Black.copy(alpha = 0.6f),
110 | size = Size(size.width, size.height)
111 | )
112 | drawHighlight(coordinates)
113 | }
114 | }
115 |
116 | /**
117 | * A Composable function that positions and displays the dialog.
118 | *
119 | * @param targetRect te bounding rectangle of the target element.
120 | * @param position the position of the dialog relative to the target element.
121 | * @param alignment the alignment of the dialog relative to the target element.
122 | * @param highlightBounds the bounding rectangle of the highlight.
123 | * @param content the content of the dialog.
124 | */
125 | @Composable
126 | private fun ShowcaseDialog(
127 | targetRect: Rect,
128 | position: ShowcasePosition,
129 | alignment: ShowcaseAlignment,
130 | highlightBounds: Rect,
131 | content: @Composable () -> Unit
132 | ) {
133 | var offsetX by remember { mutableFloatStateOf(0f) }
134 | var offsetY by remember { mutableFloatStateOf(0f) }
135 | val configuration = LocalConfiguration.current
136 | val density = LocalDensity.current
137 |
138 | val screenHeight = with(density) {
139 | configuration.screenHeightDp.dp.toPx()
140 | }
141 | val screenWidth = with(density) {
142 | configuration.screenWidthDp.dp.toPx()
143 | }
144 |
145 | val verticalSpacerPx = with(density) { 16.dp.toPx() }
146 |
147 | Box(
148 | modifier = Modifier
149 | .offset(x = offsetX.toDp(), y = offsetY.toDp())
150 | .onGloballyPositioned {
151 | val dialogHeight = it.size.height
152 | val dialogWidth = it.size.width
153 | val highlightCenterX = highlightBounds.center.x
154 |
155 | offsetX = when (alignment) {
156 | ShowcaseAlignment.Start -> highlightBounds.left
157 | ShowcaseAlignment.End -> highlightBounds.right - dialogWidth
158 | ShowcaseAlignment.CenterHorizontal -> (highlightCenterX - dialogWidth / 2)
159 | ShowcaseAlignment.Default -> {
160 | if (highlightCenterX > screenWidth / 2) {
161 | highlightBounds.right - dialogWidth
162 | } else {
163 | highlightBounds.left
164 | }
165 | }
166 | }
167 |
168 | offsetY = when (position) {
169 | ShowcasePosition.Top -> highlightBounds.top - verticalSpacerPx - dialogHeight
170 | ShowcasePosition.Bottom -> highlightBounds.bottom + verticalSpacerPx
171 | ShowcasePosition.Default -> {
172 | if (targetRect.center.y > screenHeight / 2 + verticalSpacerPx) {
173 | highlightBounds.top - verticalSpacerPx - dialogHeight
174 | } else {
175 | highlightBounds.bottom + verticalSpacerPx
176 | }
177 | }
178 | }
179 | }
180 | ) {
181 | content()
182 | }
183 | }
184 |
185 | @Composable
186 | fun Float.toDp() = with(LocalDensity.current) {
187 | toDp()
188 | }
--------------------------------------------------------------------------------
/app/src/main/java/com/joco/composeshowcaseview/MainActivity.kt:
--------------------------------------------------------------------------------
1 | package com.joco.composeshowcaseview
2 |
3 | import android.os.Bundle
4 | import androidx.activity.ComponentActivity
5 | import androidx.activity.compose.setContent
6 | import androidx.compose.foundation.background
7 | import androidx.compose.foundation.clickable
8 | import androidx.compose.foundation.interaction.MutableInteractionSource
9 | import androidx.compose.foundation.layout.Arrangement
10 | import androidx.compose.foundation.layout.Box
11 | import androidx.compose.foundation.layout.Column
12 | import androidx.compose.foundation.layout.Row
13 | import androidx.compose.foundation.layout.Spacer
14 | import androidx.compose.foundation.layout.fillMaxSize
15 | import androidx.compose.foundation.layout.fillMaxWidth
16 | import androidx.compose.foundation.layout.height
17 | import androidx.compose.foundation.layout.padding
18 | import androidx.compose.foundation.layout.width
19 | import androidx.compose.foundation.shape.RoundedCornerShape
20 | import androidx.compose.material.icons.Icons
21 | import androidx.compose.material.icons.filled.Favorite
22 | import androidx.compose.material.icons.filled.Share
23 | import androidx.compose.material3.Button
24 | import androidx.compose.material3.ExperimentalMaterial3Api
25 | import androidx.compose.material3.Icon
26 | import androidx.compose.material3.MaterialTheme
27 | import androidx.compose.material3.Scaffold
28 | import androidx.compose.material3.Surface
29 | import androidx.compose.material3.Text
30 | import androidx.compose.material3.TopAppBar
31 | import androidx.compose.material3.TopAppBarDefaults
32 | import androidx.compose.runtime.Composable
33 | import androidx.compose.runtime.getValue
34 | import androidx.compose.runtime.mutableStateMapOf
35 | import androidx.compose.runtime.mutableStateOf
36 | import androidx.compose.runtime.remember
37 | import androidx.compose.runtime.setValue
38 | import androidx.compose.ui.Alignment
39 | import androidx.compose.ui.Modifier
40 | import androidx.compose.ui.composed
41 | import androidx.compose.ui.graphics.Color
42 | import androidx.compose.ui.layout.LayoutCoordinates
43 | import androidx.compose.ui.layout.onGloballyPositioned
44 | import androidx.compose.ui.text.font.FontWeight
45 | import androidx.compose.ui.unit.dp
46 | import com.joco.compose_showcaseview.ShowcaseAlignment
47 | import com.joco.compose_showcaseview.AnimationDuration
48 | import com.joco.compose_showcaseview.ShowcasePosition
49 | import com.joco.compose_showcaseview.ShowcaseView
50 | import com.joco.compose_showcaseview.highlight.ShowcaseHighlight
51 | import com.joco.composeshowcaseview.ui.theme.ComposeShowcaseViewTheme
52 |
53 | class MainActivity : ComponentActivity() {
54 | @OptIn(ExperimentalMaterial3Api::class)
55 | override fun onCreate(savedInstanceState: Bundle?) {
56 | super.onCreate(savedInstanceState)
57 | setContent {
58 | ComposeShowcaseViewTheme {
59 | val targets = remember { mutableStateMapOf() }
60 | var visibleShowcase by remember { mutableStateOf(VisibleShowcase.None) }
61 |
62 | Box(modifier = Modifier.fillMaxSize()) {
63 | Scaffold(
64 | topBar = {
65 | TopAppBar(
66 | title = { Text(text = "Showcase App") },
67 | colors = TopAppBarDefaults.topAppBarColors(
68 | containerColor = MaterialTheme.colorScheme.primary,
69 | titleContentColor = Color.White
70 | ),
71 | )
72 | }
73 | ) { innerPadding ->
74 | Surface(
75 | modifier = Modifier
76 | .fillMaxSize()
77 | .padding(innerPadding),
78 | color = MaterialTheme.colorScheme.background
79 | ) {
80 | val loremIpsumText = """
81 | Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
82 | """
83 | Column(
84 | modifier = Modifier
85 | .fillMaxWidth()
86 | .padding(16.dp)
87 | ) {
88 | Greeting(
89 | modifier = Modifier
90 | .align(Alignment.End)
91 | .onGloballyPositioned { coordinates ->
92 | targets[KEY_GREETING] = coordinates
93 | },
94 | name = "Andy",
95 | onClick = { visibleShowcase = VisibleShowcase.Greetings }
96 | )
97 | Spacer(modifier = Modifier.height(60.dp))
98 | Article(
99 | modifier = Modifier
100 | .align(Alignment.Start)
101 | .onGloballyPositioned { coordinates ->
102 | targets[KEY_ARTICLE] = coordinates
103 | }
104 | .noRippleClickable {
105 | visibleShowcase = VisibleShowcase.ArticleTitle
106 | },
107 | subheading = "Today's Article",
108 | paragraph = loremIpsumText
109 | )
110 | Row(modifier = Modifier.align(Alignment.CenterHorizontally)) {
111 | LikeButton(
112 | modifier = Modifier
113 | .onGloballyPositioned { coordinates ->
114 | targets[KEY_LIKE] = coordinates
115 | }
116 | .noRippleClickable {
117 | visibleShowcase = VisibleShowcase.Like
118 | }
119 | )
120 | Spacer(modifier = Modifier.width(16.dp))
121 | ShareButton(
122 | modifier = Modifier
123 | .onGloballyPositioned { coordinates ->
124 | targets[KEY_SHARE] = coordinates
125 | }
126 | .noRippleClickable {
127 | visibleShowcase = VisibleShowcase.Share
128 | }
129 | )
130 | }
131 | }
132 | }
133 | }
134 |
135 | targets[KEY_GREETING]?.let { coordinates ->
136 | ShowcaseView(
137 | visible = visibleShowcase == VisibleShowcase.Greetings,
138 | targetCoordinates = coordinates,
139 | highlight = ShowcaseHighlight.Rectangular(),
140 | ) {
141 | MyShowcaseDialog(
142 | text = "Hey, this is Greetings showcase",
143 | onClick = { visibleShowcase = VisibleShowcase.None }
144 | )
145 | }
146 | }
147 |
148 | targets[KEY_ARTICLE]?.let { coordinates ->
149 | ShowcaseView(
150 | visible = visibleShowcase == VisibleShowcase.ArticleTitle,
151 | targetCoordinates = coordinates,
152 | animationDuration = AnimationDuration.Default,
153 | highlight = ShowcaseHighlight.Rectangular(24.dp),
154 | ) {
155 | MyShowcaseDialog(
156 | text = "Yuhuu!\nYou can read awesome article here",
157 | onClick = { visibleShowcase = VisibleShowcase.None }
158 | )
159 | }
160 | }
161 |
162 | targets[KEY_LIKE]?.let { coordinates ->
163 | ShowcaseView(
164 | visible = visibleShowcase == VisibleShowcase.Like,
165 | targetCoordinates = coordinates,
166 | animationDuration = AnimationDuration.create(300),
167 | alignment = ShowcaseAlignment.CenterHorizontal,
168 | position = ShowcasePosition.Top,
169 | highlight = ShowcaseHighlight.Circular(targetMargin = 12.dp),
170 | ) {
171 | MyShowcaseDialog(
172 | text = "Click to Like the article",
173 | onClick = { visibleShowcase = VisibleShowcase.None }
174 | )
175 | }
176 | }
177 |
178 | targets[KEY_SHARE]?.let { coordinates ->
179 | ShowcaseView(
180 | visible = visibleShowcase == VisibleShowcase.Share,
181 | targetCoordinates = coordinates,
182 | animationDuration = AnimationDuration.create(500, 500),
183 | alignment = ShowcaseAlignment.CenterHorizontal,
184 | position = ShowcasePosition.Top,
185 | ) {
186 | MyShowcaseDialog(
187 | text = "Click to Share the article",
188 | onClick = { visibleShowcase = VisibleShowcase.None }
189 | )
190 | }
191 | }
192 | }
193 | }
194 | }
195 | }
196 |
197 | @Composable
198 | fun Greeting(modifier: Modifier = Modifier, name: String, onClick: () -> Unit) {
199 | Text(
200 | text = "Hello, $name!",
201 | modifier = modifier.noRippleClickable { onClick() },
202 | )
203 | }
204 |
205 | @Composable
206 | fun Article(
207 | modifier: Modifier = Modifier,
208 | subheading: String,
209 | paragraph: String
210 | ) {
211 | Column(modifier = modifier.padding(horizontal = 16.dp, vertical = 8.dp)) {
212 | Text(
213 | text = subheading,
214 | style = MaterialTheme.typography.headlineSmall,
215 | color = MaterialTheme.colorScheme.primary,
216 | fontWeight = FontWeight.W500
217 | )
218 | Text(
219 | text = paragraph,
220 | style = MaterialTheme.typography.labelMedium,
221 | color = MaterialTheme.colorScheme.secondary
222 | )
223 | }
224 | }
225 |
226 | @Composable
227 | fun LikeButton(modifier: Modifier = Modifier) {
228 | Row(modifier = modifier, verticalAlignment = Alignment.CenterVertically) {
229 | Icon(
230 | imageVector = Icons.Default.Favorite,
231 | contentDescription = "Like Icon",
232 | tint = Color.Gray
233 | )
234 | Spacer(modifier = Modifier.width(8.dp))
235 | Text(
236 | text = "Love It!",
237 | style = MaterialTheme.typography.labelMedium,
238 | color = MaterialTheme.colorScheme.primary
239 | )
240 | }
241 | }
242 |
243 | @Composable
244 | fun ShareButton(modifier: Modifier = Modifier) {
245 | Row(modifier = modifier, verticalAlignment = Alignment.CenterVertically) {
246 | Icon(
247 | imageVector = Icons.Default.Share,
248 | contentDescription = "Share Icon",
249 | tint = Color.Gray
250 | )
251 | Spacer(modifier = Modifier.width(8.dp))
252 | Text(
253 | text = "Share",
254 | style = MaterialTheme.typography.labelMedium,
255 | color = MaterialTheme.colorScheme.primary
256 | )
257 | }
258 | }
259 |
260 | @Composable
261 | fun MyShowcaseDialog(modifier: Modifier = Modifier, text: String, onClick: () -> Unit) {
262 | Column(
263 | modifier = modifier
264 | .background(Color.White, shape = RoundedCornerShape(12.dp))
265 | .padding(16.dp),
266 | verticalArrangement = Arrangement.Center,
267 | horizontalAlignment = Alignment.End
268 | ) {
269 | Text(text = text)
270 | Spacer(modifier = Modifier.height(8.dp))
271 | Button(
272 | shape = RoundedCornerShape(8.dp),
273 | onClick = onClick
274 | ) {
275 | Text("Nice !")
276 | }
277 | }
278 | }
279 |
280 | fun Modifier.noRippleClickable(onClick: () -> Unit) = composed { this.clickable(
281 | indication = null,
282 | interactionSource = remember { MutableInteractionSource() },
283 | onClick = onClick
284 | ) }
285 |
286 | companion object {
287 | private const val KEY_GREETING = "KEY_GREETING"
288 | private const val KEY_ARTICLE = "KEY_ARTICLE"
289 | private const val KEY_LIKE = "KEY_LIKE"
290 | private const val KEY_SHARE = "KEY_SHARE"
291 | }
292 | }
--------------------------------------------------------------------------------