├── .DS_Store
├── .github
└── workflows
│ ├── store-screenshots.yml
│ └── verify-screenshot-test.yml
├── .gitignore
├── LICENSE
├── README.md
├── app
├── .gitignore
├── build.gradle.kts
├── proguard-rules.pro
└── src
│ ├── androidTest
│ └── java
│ │ └── com
│ │ └── joco
│ │ └── composeshowcase
│ │ └── ExampleInstrumentedTest.kt
│ ├── main
│ ├── AndroidManifest.xml
│ ├── java
│ │ └── com
│ │ │ └── joco
│ │ │ └── composeshowcase
│ │ │ ├── MainActivity.kt
│ │ │ ├── MyShowcaseDialog.kt
│ │ │ ├── dialog
│ │ │ ├── MyArrowDialog.kt
│ │ │ ├── SkeletonArrowDialog.kt
│ │ │ └── TransparentDialog.kt
│ │ │ └── ui
│ │ │ └── theme
│ │ │ ├── Color.kt
│ │ │ ├── Theme.kt
│ │ │ └── Type.kt
│ └── res
│ │ ├── drawable-v24
│ │ └── ic_launcher_foreground.xml
│ │ ├── drawable
│ │ └── ic_launcher_background.xml
│ │ ├── mipmap-anydpi-v26
│ │ ├── ic_launcher.xml
│ │ └── ic_launcher_round.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
│ │ ├── values
│ │ ├── colors.xml
│ │ ├── strings.xml
│ │ └── themes.xml
│ │ └── xml
│ │ ├── backup_rules.xml
│ │ └── data_extraction_rules.xml
│ └── test
│ └── java
│ └── com
│ └── joco
│ └── composeshowcase
│ ├── ExampleUnitTest.kt
│ └── ShowcaseSequenceTest.kt
├── build.gradle.kts
├── dialog
├── .gitignore
├── build.gradle.kts
├── consumer-rules.pro
├── proguard-rules.pro
└── src
│ └── main
│ ├── AndroidManifest.xml
│ └── java
│ └── com
│ └── joco
│ └── dialog
│ └── arrow
│ └── ArrowDialog.kt
├── gradle.properties
├── gradle
├── libs.versions.toml
└── wrapper
│ ├── gradle-wrapper.jar
│ └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
├── settings.gradle.kts
├── showcase-sequence
├── .gitignore
├── build.gradle.kts
├── consumer-rules.pro
├── proguard-rules.pro
└── src
│ ├── androidTest
│ └── java
│ │ └── com
│ │ └── joco
│ │ └── showcase
│ │ └── sequence
│ │ └── ExampleInstrumentedTest.kt
│ ├── main
│ ├── AndroidManifest.xml
│ └── java
│ │ └── com
│ │ └── joco
│ │ └── showcase
│ │ └── sequence
│ │ ├── SequenceShowcase.kt
│ │ └── SequenceShowcaseState.kt
│ └── test
│ └── java
│ └── com
│ └── joco
│ └── showcase
│ └── sequence
│ └── ExampleUnitTest.kt
└── showcaseview
├── .gitignore
├── build.gradle.kts
├── consumer-rules.pro
├── proguard-rules.pro
└── src
└── main
├── AndroidManifest.xml
└── java
└── com
└── joco
└── showcaseview
├── AnimationDuration.kt
├── BackgroundAlpha.kt
├── ShowcaseAlignment.kt
├── ShowcaseDisplayState.kt
├── ShowcasePosition.kt
├── ShowcaseView.kt
└── highlight
├── HighlightProperties.kt
└── ShowcaseHighlight.kt
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcase/1deae3176475f70f750a2e16cd41951cf53d6aa7/.DS_Store
--------------------------------------------------------------------------------
/.github/workflows/store-screenshots.yml:
--------------------------------------------------------------------------------
1 | name: store screenshots
2 |
3 | on:
4 | workflow_dispatch
5 |
6 | env:
7 | GRADLE_OPTS: "-Dorg.gradle.jvmargs=-Xmx6g -Dorg.gradle.daemon=false -Dkotlin.incremental=false"
8 |
9 | jobs:
10 | test:
11 | runs-on: macos-latest
12 |
13 | permissions:
14 | contents: read
15 | actions: write
16 |
17 | steps:
18 | - uses: actions/checkout@v3
19 | - uses: actions/setup-java@v3.9.0
20 | with:
21 | distribution: 'zulu'
22 | java-version: 19
23 |
24 | - name: Gradle cache
25 | uses: gradle/gradle-build-action@v2
26 |
27 | - name: test
28 | run: |
29 | # Create screenshots
30 | ./gradlew app:recordRoborazziDebug --stacktrace
31 |
32 | - uses: actions/upload-artifact@v4
33 | if: ${{ always() }}
34 | with:
35 | name: screenshot
36 | path: app/build/outputs/roborazzi
37 | retention-days: 30
38 |
39 | - uses: actions/upload-artifact@v4
40 | if: ${{ always() }}
41 | with:
42 | name: screenshot-reports
43 | path: app/build/reports
44 | retention-days: 30
45 |
46 | - uses: actions/upload-artifact@v4
47 | if: ${{ always() }}
48 | with:
49 | name: screenshot-test-results
50 | path: app/build/test-results
51 | retention-days: 30
--------------------------------------------------------------------------------
/.github/workflows/verify-screenshot-test.yml:
--------------------------------------------------------------------------------
1 | name: screenshot test
2 |
3 | on:
4 | push
5 |
6 | env:
7 | GRADLE_OPTS: "-Dorg.gradle.jvmargs=-Xmx6g -Dorg.gradle.daemon=false -Dkotlin.incremental=false"
8 |
9 | jobs:
10 | test:
11 | runs-on: macos-latest
12 |
13 | permissions:
14 | contents: read
15 | actions: write
16 |
17 | steps:
18 | - uses: actions/checkout@v3
19 | - uses: actions/setup-java@v3.9.0
20 | with:
21 | distribution: 'zulu'
22 | java-version: 19
23 |
24 | - name: Gradle cache
25 | uses: gradle/gradle-build-action@v2
26 |
27 | - uses: dawidd6/action-download-artifact@v3
28 | with:
29 | name: screenshot
30 | path: app/build/outputs/roborazzi
31 | workflow: store-screenshots.yml
32 | branch: main
33 |
34 | - name: verify test
35 | id: verify-test
36 | run: |
37 | ./gradlew app:verifyRoborazziDebug --stacktrace
38 |
39 | - uses: actions/upload-artifact@v4
40 | if: ${{ always() }}
41 | with:
42 | name: screenshot-diff
43 | path: app/build/outputs/roborazzi
44 | retention-days: 30
45 |
46 | - uses: actions/upload-artifact@v4
47 | if: ${{ always() }}
48 | with:
49 | name: screenshot-diff-reports
50 | path: app/build/reports
51 | retention-days: 30
52 |
53 | - uses: actions/upload-artifact@v4
54 | if: ${{ always() }}
55 | with:
56 | name: screenshot-diff-test-results
57 | path: app/build/test-results
58 | retention-days: 30
--------------------------------------------------------------------------------
/.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
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # Compose Showcase
4 |
5 |

6 |

7 |

8 |
9 |
10 |
11 | A library for showcasing your feature in Jetpack Compose.
12 |
13 |
14 |
15 |
16 |
17 |
18 | ## 🍁 Sequence Showcase
19 |
20 |
21 |
22 | Creating a sequence of showcases in a specific order.
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | ### Installation
31 | - Gradle
32 | ```
33 | implementation("io.github.jocoand:showcase-sequence:1.3.0")
34 | ```
35 |
36 | ### Usage
37 | - #### Create your Showcase dialog
38 |
39 | - ```
40 | @Composable
41 | fun MyShowcaseDialog(text: String, onClick: () -> Unit) {
42 | Column {
43 | Text(text = text)
44 | Spacer(modifier = Modifier.height(8.dp))
45 | Button(onClick = onClick) {
46 | Text("Nice !")
47 | }
48 | }
49 | }
50 | ```
51 | or you can use our [Predefined Dialog](https://github.com/jocoand/compose-showcase?tab=readme-ov-file#-dialog)
52 | - #### Declare the `SequenceShowcase` & `sequenceShowcaseState`
53 | - ```
54 | val sequenceShowcaseState = rememberSequenceShowcaseState()
55 |
56 | SequenceShowcase(state = sequenceShowcaseState) {
57 | Scaffold(
58 | ...
59 | ```
60 |
61 | - #### Mark your target view (view to be highlighted) with `sequenceShowcaseTarget` modifier
62 |
63 | - ```
64 |
65 | MyView1( // View to be highlighted
66 | modifier = Modifier
67 | .sequenceShowcaseTarget( // Mark with sequenceShowcaseTarget
68 | index = 0,
69 | content = {
70 | MyShowcaseDialog( // Dialog to be displayed
71 | text = "Hey, this is Greetings showcase",
72 | )
73 | }
74 | ),
75 | onClick = { sequenceShowcaseState.start() }
76 | )
77 | ```
78 | `index`: the order to be shown in the sequence
79 |
80 | `content`: dialog to be displayed
81 |
82 | - #### Use `SequenceShowcaseState.start()` to start the showcase
83 | - ```
84 | LaunchButton(
85 | ...
86 | onClick = { sequenceShowcaseState.start() }
87 | )
88 | ```
89 | `index`: value to start at certain index (optional)
90 |
91 | - #### Use `SequenceShowcaseState.next()` to navigate to the next showcase
92 | - ```
93 | MyView2(
94 | modifier = Modifier
95 | .sequenceShowcaseTarget(
96 | index = 1,
97 | content = {
98 | MyShowcaseDialog(
99 | text = "Hey, this is Article show case",
100 | onClick = {
101 | sequenceShowcaseState.next() // Navigate to next showcase
102 | }
103 | )
104 | }
105 | )
106 | )
107 | ```
108 |
109 | - You can also dismiss the the showcase using `dimiss()`
110 |
111 | - See [sample](https://github.com/jocoand/compose-showcase/blob/main/app/src/main/java/com/joco/composeshowcase/MainActivity.kt) for more more details
112 |
113 | ### Config
114 | - `position`
115 |
116 |
117 |
118 |
119 | |
120 |
121 |
122 | |
123 |
124 |
125 |
126 | Top |
127 | Bottom |
128 |
129 |
130 |
131 | `Default`: relative to target position
132 |
133 | - `alignment`
134 |
135 |
136 |
137 |
138 | |
139 |
140 |
141 | |
142 |
143 |
144 | |
145 |
146 |
147 | Start |
148 | Center |
149 | End |
150 |
151 |
152 |
153 | `Default`: relative to target position
154 |
155 | - `highlight`
156 |
157 |
158 |
159 |
160 | |
161 |
162 |
163 | |
164 |
165 |
166 | Rectangular |
167 | Circular |
168 |
169 |
170 |
171 | - `animationDuration`: duration of the enter and exit animation.
172 |
173 | ### Inspired by 💡
174 | - https://github.com/canopas/compose-intro-showcase
175 |
176 | ### Sample 🎨
177 | - See [MainActivity](https://github.com/jocoand/compose-showcase/blob/main/app/src/main/java/com/joco/composeshowcase/MainActivity.kt)
178 |
179 |
180 | ## 🌀 ShowcaseView
181 |
182 |
183 | In case you need more basic usage, you can you use [ShowcaseView](https://github.com/jocoand/compose-showcaseview/tree/main)
184 |
185 | ```
186 | implementation("io.github.jocoand:showcase-sequence:1.4.4")
187 | ```
188 |
189 | ## 🏮 Dialog
190 |
191 | ### Arrow Dialog
192 |
193 | A predefined dialog with arrow shape pointer.
194 |
195 |
196 |
197 | ### Usage
198 | ```
199 | .sequenceShowcaseTarget(
200 | ...
201 | .content = {
202 | ArrowDialog(
203 | targetRect = it,
204 | content = {
205 | // Your dialog content
206 | }
207 | )
208 | }
209 | ```
210 |
211 | ## Contributing
212 | Contribution are welcome!
213 | Feel free to open an issue or a pull request, if you find any bugs or have any suggestions.
214 | If you're new to the project, we recommend starting with a [`good first issue`](https://github.com/jocoand/compose-showcase/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22). that are tailored for first time contributors in the project.
215 |
--------------------------------------------------------------------------------
/app/.gitignore:
--------------------------------------------------------------------------------
1 | /build
--------------------------------------------------------------------------------
/app/build.gradle.kts:
--------------------------------------------------------------------------------
1 | plugins {
2 | alias(libs.plugins.androidApplication)
3 | alias(libs.plugins.jetbrainsKotlinAndroid)
4 | alias(libs.plugins.roborazzi)
5 | }
6 |
7 | android {
8 | namespace = "com.joco.composeshowcase"
9 | compileSdk = 34
10 |
11 | defaultConfig {
12 | applicationId = "com.joco.composeshowcase"
13 | minSdk = 21
14 | targetSdk = 34
15 | versionCode = 1
16 | versionName = "1.0"
17 |
18 | testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
19 | vectorDrawables {
20 | useSupportLibrary = true
21 | }
22 | }
23 |
24 | buildTypes {
25 | release {
26 | isMinifyEnabled = false
27 | proguardFiles(
28 | getDefaultProguardFile("proguard-android-optimize.txt"),
29 | "proguard-rules.pro"
30 | )
31 | }
32 | }
33 | compileOptions {
34 | sourceCompatibility = JavaVersion.VERSION_17
35 | targetCompatibility = JavaVersion.VERSION_17
36 | }
37 | kotlinOptions {
38 | jvmTarget = "17"
39 | }
40 | buildFeatures {
41 | compose = true
42 | }
43 | composeOptions {
44 | kotlinCompilerExtensionVersion = "1.5.1"
45 | }
46 | packaging {
47 | resources {
48 | excludes += "/META-INF/{AL2.0,LGPL2.1}"
49 | }
50 | }
51 | testOptions {
52 | unitTests {
53 | isIncludeAndroidResources = true
54 | }
55 | }
56 | }
57 |
58 | dependencies {
59 |
60 | implementation(libs.androidx.core.ktx)
61 | implementation(libs.androidx.lifecycle.runtime.ktx)
62 | implementation(libs.androidx.activity.compose)
63 | implementation(platform(libs.androidx.compose.bom))
64 | implementation(libs.androidx.ui.tooling.preview)
65 | implementation(libs.androidx.material3)
66 |
67 | implementation(project(":showcase-sequence"))
68 |
69 | testImplementation(libs.junit)
70 | testImplementation(libs.robolectric)
71 | testImplementation(libs.androidx.espresso.core)
72 | testImplementation(libs.ui.test.junit4)
73 |
74 | testImplementation(libs.roborazzi)
75 | testImplementation(libs.roborazzi.compose)
76 | testImplementation(libs.roborazzi.rule)
77 |
78 | androidTestImplementation(libs.androidx.junit)
79 | androidTestImplementation(libs.androidx.espresso.core)
80 | androidTestImplementation(platform(libs.androidx.compose.bom))
81 | androidTestImplementation(libs.androidx.ui.test.junit4)
82 |
83 | debugImplementation(libs.androidx.ui.tooling)
84 | debugImplementation(libs.androidx.ui.test.manifest)
85 | }
--------------------------------------------------------------------------------
/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/composeshowcase/ExampleInstrumentedTest.kt:
--------------------------------------------------------------------------------
1 | package com.joco.composeshowcase
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.composeshowcase", appContext.packageName)
23 | }
24 | }
--------------------------------------------------------------------------------
/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/composeshowcase/MainActivity.kt:
--------------------------------------------------------------------------------
1 | package com.joco.composeshowcase
2 |
3 | import android.os.Bundle
4 | import androidx.activity.ComponentActivity
5 | import androidx.activity.compose.setContent
6 | import androidx.compose.foundation.ScrollState
7 | import androidx.compose.foundation.clickable
8 | import androidx.compose.foundation.layout.Column
9 | import androidx.compose.foundation.layout.PaddingValues
10 | import androidx.compose.foundation.layout.Row
11 | import androidx.compose.foundation.layout.Spacer
12 | import androidx.compose.foundation.layout.fillMaxSize
13 | import androidx.compose.foundation.layout.fillMaxWidth
14 | import androidx.compose.foundation.layout.height
15 | import androidx.compose.foundation.layout.padding
16 | import androidx.compose.foundation.layout.width
17 | import androidx.compose.foundation.rememberScrollState
18 | import androidx.compose.foundation.verticalScroll
19 | import androidx.compose.material.icons.Icons
20 | import androidx.compose.material.icons.filled.Favorite
21 | import androidx.compose.material.icons.filled.Share
22 | import androidx.compose.material3.ExperimentalMaterial3Api
23 | import androidx.compose.material3.Icon
24 | import androidx.compose.material3.MaterialTheme
25 | import androidx.compose.material3.Scaffold
26 | import androidx.compose.material3.Surface
27 | import androidx.compose.material3.Text
28 | import androidx.compose.material3.TopAppBar
29 | import androidx.compose.material3.TopAppBarDefaults
30 | import androidx.compose.runtime.Composable
31 | import androidx.compose.ui.Alignment
32 | import androidx.compose.ui.Modifier
33 | import androidx.compose.ui.graphics.Color
34 | import androidx.compose.ui.res.stringResource
35 | import androidx.compose.ui.text.font.FontWeight
36 | import androidx.compose.ui.unit.dp
37 | import com.joco.composeshowcase.dialog.MyArrowDialog
38 | import com.joco.composeshowcase.dialog.SkeletonArrowDialog
39 | import com.joco.composeshowcase.dialog.TransparentDialog
40 | import com.joco.composeshowcase.ui.theme.ComposeShowcaseTheme
41 | import com.joco.showcase.sequence.SequenceShowcase
42 | import com.joco.showcase.sequence.SequenceShowcaseScope
43 | import com.joco.showcase.sequence.SequenceShowcaseState
44 | import com.joco.showcase.sequence.rememberSequenceShowcaseState
45 | import com.joco.showcaseview.AnimationDuration
46 | import com.joco.showcaseview.BackgroundAlpha
47 | import com.joco.showcaseview.ShowcaseAlignment
48 | import com.joco.showcaseview.ShowcasePosition
49 | import com.joco.showcaseview.highlight.ShowcaseHighlight
50 |
51 |
52 | class MainActivity : ComponentActivity() {
53 | @OptIn(ExperimentalMaterial3Api::class)
54 | override fun onCreate(savedInstanceState: Bundle?) {
55 | super.onCreate(savedInstanceState)
56 | setContent {
57 | ComposeShowcaseTheme {
58 | val sequenceShowcaseState = rememberSequenceShowcaseState()
59 | val columnScrollState = rememberScrollState()
60 |
61 | SequenceShowcase(state = sequenceShowcaseState) {
62 | Scaffold(
63 | topBar = {
64 | TopAppBar(
65 | title = { Text(text = "Showcase App") },
66 | colors = TopAppBarDefaults.topAppBarColors(
67 | containerColor = MaterialTheme.colorScheme.primary,
68 | titleContentColor = Color.White
69 | ),
70 | )
71 | }
72 | ) { innerPadding ->
73 | MainContent(innerPadding, columnScrollState, sequenceShowcaseState)
74 | }
75 | }
76 | }
77 | }
78 | }
79 |
80 | companion object {
81 | const val SHOWCASE_2_DURATION = 900
82 | const val SHOWCASE_3_DURATION = 300
83 | }
84 | }
85 |
86 | @Composable
87 | fun SequenceShowcaseScope.MainContent(
88 | innerPadding: PaddingValues,
89 | columnScrollState: ScrollState,
90 | sequenceShowcaseState: SequenceShowcaseState
91 | ) {
92 | Surface(
93 | modifier = Modifier
94 | .fillMaxSize()
95 | .then(if (sequenceShowcaseState.currentTargetIndex == 3) {
96 | Modifier.clickable { sequenceShowcaseState.next() }
97 | } else {
98 | Modifier
99 | })
100 | .padding(innerPadding),
101 | color = MaterialTheme.colorScheme.background
102 | ) {
103 | val loremIpsumText = """
104 | 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.
105 | """
106 | Column(
107 | modifier = Modifier
108 | .fillMaxWidth()
109 | .padding(16.dp)
110 | .verticalScroll(columnScrollState)
111 | ) {
112 | Greeting(
113 | modifier = Modifier
114 | .sequenceShowcaseTarget(
115 | index = 0,
116 | content = {
117 | MyShowcaseDialog(
118 | text = "Hello Andy, Welcome abroad! ",
119 | onClick = { sequenceShowcaseState.next() }
120 | )
121 | }
122 | ),
123 | name = "Andy",
124 | onClick = { sequenceShowcaseState.start() }
125 | )
126 | Spacer(modifier = Modifier.height(30.dp))
127 | Article(
128 | modifier = Modifier
129 | .align(Alignment.Start)
130 | .sequenceShowcaseTarget(
131 | index = 1,
132 | highlight = ShowcaseHighlight.Rectangular(24.dp),
133 | animationDuration = AnimationDuration.create(
134 | MainActivity.SHOWCASE_2_DURATION,
135 | MainActivity.SHOWCASE_2_DURATION
136 | ),
137 | content = {
138 | MyArrowDialog(
139 | targetRect = it,
140 | text = "You can read cool articles here!",
141 | onClick = { sequenceShowcaseState.next() }
142 | )
143 | }
144 | ),
145 | subheading = "Today's Article",
146 | paragraph = loremIpsumText
147 | )
148 | Row(modifier = Modifier.align(Alignment.CenterHorizontally)) {
149 | LikeButton(
150 | modifier = Modifier
151 | .sequenceShowcaseTarget(
152 | index = 2,
153 | position = ShowcasePosition.Top,
154 | highlight = ShowcaseHighlight.Circular(targetMargin = 12.dp),
155 | animationDuration = AnimationDuration.create(
156 | MainActivity.SHOWCASE_3_DURATION,
157 | MainActivity.SHOWCASE_3_DURATION
158 | ),
159 | alignment = ShowcaseAlignment.CenterHorizontal,
160 | content = {
161 | SkeletonArrowDialog(
162 | targetRect = it,
163 | pointerSize = 28.dp,
164 | text = "Click here if you love the article!",
165 | onClick = { sequenceShowcaseState.next() }
166 | )
167 | }
168 | )
169 | )
170 | Spacer(modifier = Modifier.width(16.dp))
171 | ShareButton(
172 | modifier = Modifier
173 | .sequenceShowcaseTarget(
174 | index = 3,
175 | position = ShowcasePosition.Bottom,
176 | highlight = ShowcaseHighlight.Rectangular(0.dp),
177 | alignment = ShowcaseAlignment.CenterHorizontal,
178 | backgroundAlpha = BackgroundAlpha.Dark,
179 | content = {
180 | TransparentDialog(
181 | title = "Share Article",
182 | text = "You also can share the article!",
183 | alignment = Alignment.End
184 | )
185 | }
186 | )
187 | )
188 | }
189 | Spacer(modifier = Modifier.height(16.dp))
190 | Article(
191 | modifier = Modifier
192 | .align(Alignment.Start),
193 | subheading = "Today's Article 2",
194 | paragraph = loremIpsumText
195 | )
196 | }
197 | }
198 | }
199 |
200 | @Composable
201 | fun Greeting(modifier: Modifier = Modifier, name: String, onClick: () -> Unit) {
202 | Text(
203 | text = stringResource(id = R.string.label_greetings, name),
204 | modifier = modifier.clickable { onClick() },
205 | )
206 | }
207 |
208 | @Composable
209 | fun Article(
210 | modifier: Modifier = Modifier,
211 | subheading: String,
212 | paragraph: String
213 | ) {
214 | Column(modifier = modifier.padding(horizontal = 16.dp, vertical = 8.dp)) {
215 | Text(
216 | text = subheading,
217 | style = MaterialTheme.typography.headlineSmall,
218 | color = MaterialTheme.colorScheme.primary,
219 | fontWeight = FontWeight.W500
220 | )
221 | Text(
222 | text = paragraph,
223 | style = MaterialTheme.typography.labelMedium,
224 | color = MaterialTheme.colorScheme.secondary
225 | )
226 | }
227 | }
228 |
229 | @Composable
230 | fun LikeButton(modifier: Modifier = Modifier) {
231 | Row(modifier = modifier, verticalAlignment = Alignment.CenterVertically) {
232 | Icon(
233 | imageVector = Icons.Default.Favorite,
234 | contentDescription = "Like Icon",
235 | tint = Color.Gray
236 | )
237 | Spacer(modifier = Modifier.width(8.dp))
238 | Text(
239 | text = "Love It!",
240 | style = MaterialTheme.typography.labelMedium,
241 | color = MaterialTheme.colorScheme.primary
242 | )
243 | }
244 | }
245 |
246 | @Composable
247 | fun ShareButton(modifier: Modifier = Modifier) {
248 | Row(modifier = modifier, verticalAlignment = Alignment.CenterVertically) {
249 | Icon(
250 | imageVector = Icons.Default.Share,
251 | contentDescription = "Share Icon",
252 | tint = Color.Gray
253 | )
254 | Spacer(modifier = Modifier.width(8.dp))
255 | Text(
256 | text = "Share",
257 | style = MaterialTheme.typography.labelMedium,
258 | color = MaterialTheme.colorScheme.primary
259 | )
260 | }
261 | }
--------------------------------------------------------------------------------
/app/src/main/java/com/joco/composeshowcase/MyShowcaseDialog.kt:
--------------------------------------------------------------------------------
1 | package com.joco.composeshowcase
2 |
3 | import androidx.compose.foundation.background
4 | import androidx.compose.foundation.layout.Arrangement
5 | import androidx.compose.foundation.layout.Column
6 | import androidx.compose.foundation.layout.Spacer
7 | import androidx.compose.foundation.layout.height
8 | import androidx.compose.foundation.layout.padding
9 | import androidx.compose.foundation.shape.RoundedCornerShape
10 | import androidx.compose.material3.Button
11 | import androidx.compose.material3.Text
12 | import androidx.compose.runtime.Composable
13 | import androidx.compose.ui.Alignment
14 | import androidx.compose.ui.Modifier
15 | import androidx.compose.ui.graphics.Color
16 | import androidx.compose.ui.res.stringResource
17 | import androidx.compose.ui.unit.dp
18 |
19 | @Composable
20 | fun MyShowcaseDialog(text: String, onClick: () -> Unit) {
21 | Column(
22 | modifier = Modifier
23 | .background(Color.White, shape = RoundedCornerShape(12.dp))
24 | .padding(16.dp),
25 | verticalArrangement = Arrangement.Center,
26 | horizontalAlignment = Alignment.End
27 | ) {
28 | Text(text = text)
29 | Spacer(modifier = Modifier.height(8.dp))
30 | Button(
31 | shape = RoundedCornerShape(8.dp),
32 | onClick = onClick
33 | ) {
34 | Text(stringResource(R.string.button_nice))
35 | }
36 | }
37 | }
38 |
39 | @Composable
40 | fun MyShowcaseDialog2(text: String, onClick: () -> Unit) {
41 | Column(
42 | modifier = Modifier
43 | .background(Color.White, shape = RoundedCornerShape(16.dp))
44 | .padding(16.dp),
45 | verticalArrangement = Arrangement.Center,
46 | horizontalAlignment = Alignment.End
47 | ) {
48 | Text(text = text)
49 | Spacer(modifier = Modifier.height(8.dp))
50 | Button(
51 | modifier = Modifier.align(Alignment.CenterHorizontally),
52 | shape = RoundedCornerShape(24.dp),
53 | onClick = onClick
54 | ) {
55 | Text(stringResource(R.string.button_awesome))
56 | }
57 | }
58 | }
--------------------------------------------------------------------------------
/app/src/main/java/com/joco/composeshowcase/dialog/MyArrowDialog.kt:
--------------------------------------------------------------------------------
1 | package com.joco.composeshowcase.dialog
2 |
3 | import androidx.compose.foundation.background
4 | import androidx.compose.foundation.layout.Arrangement
5 | import androidx.compose.foundation.layout.Column
6 | import androidx.compose.foundation.layout.Spacer
7 | import androidx.compose.foundation.layout.height
8 | import androidx.compose.foundation.layout.padding
9 | import androidx.compose.foundation.shape.RoundedCornerShape
10 | import androidx.compose.material3.Button
11 | import androidx.compose.material3.Text
12 | import androidx.compose.runtime.Composable
13 | import androidx.compose.ui.Alignment
14 | import androidx.compose.ui.Modifier
15 | import androidx.compose.ui.draw.clip
16 | import androidx.compose.ui.geometry.Rect
17 | import androidx.compose.ui.graphics.Color
18 | import androidx.compose.ui.res.stringResource
19 | import androidx.compose.ui.unit.Dp
20 | import androidx.compose.ui.unit.dp
21 | import com.joco.composeshowcase.R
22 | import com.joco.dialog.arrow.ArrowDialog
23 | import com.joco.dialog.arrow.ArrowDialogDefaults
24 |
25 | @Composable
26 | fun MyArrowDialog(
27 | targetRect: Rect,
28 | text: String,
29 | pointerSize: Dp = ArrowDialogDefaults.pointerSize,
30 | onClick: () -> Unit
31 | ) {
32 | ArrowDialog(
33 | targetRect = targetRect,
34 | pointerColor = Color.White,
35 | pointerSize = pointerSize,
36 | content = { color ->
37 | InnerDialog(text, color, onClick)
38 | }
39 | )
40 | }
41 |
42 | @Composable
43 | private fun InnerDialog(
44 | text: String,
45 | color: Color,
46 | onClick: () -> Unit
47 | ) {
48 |
49 | Column(
50 | modifier = Modifier
51 | .clip(RoundedCornerShape(16.dp))
52 | .background(color)
53 | .padding(16.dp),
54 | verticalArrangement = Arrangement.Center,
55 | ) {
56 | Text(text = text)
57 | Spacer(modifier = Modifier.height(8.dp))
58 | Button(
59 | modifier = Modifier.align(Alignment.End),
60 | shape = RoundedCornerShape(8.dp),
61 | onClick = onClick
62 | ) {
63 | Text(stringResource(R.string.button_nice))
64 | }
65 | }
66 | }
--------------------------------------------------------------------------------
/app/src/main/java/com/joco/composeshowcase/dialog/SkeletonArrowDialog.kt:
--------------------------------------------------------------------------------
1 | package com.joco.composeshowcase.dialog
2 |
3 | import androidx.compose.foundation.border
4 | import androidx.compose.foundation.layout.Arrangement
5 | import androidx.compose.foundation.layout.Column
6 | import androidx.compose.foundation.layout.Spacer
7 | import androidx.compose.foundation.layout.height
8 | import androidx.compose.foundation.layout.padding
9 | import androidx.compose.foundation.shape.RoundedCornerShape
10 | import androidx.compose.material3.Button
11 | import androidx.compose.material3.Text
12 | import androidx.compose.runtime.Composable
13 | import androidx.compose.ui.Alignment
14 | import androidx.compose.ui.Modifier
15 | import androidx.compose.ui.draw.clip
16 | import androidx.compose.ui.geometry.Rect
17 | import androidx.compose.ui.graphics.Color
18 | import androidx.compose.ui.res.stringResource
19 | import androidx.compose.ui.unit.Dp
20 | import androidx.compose.ui.unit.dp
21 | import com.joco.composeshowcase.R
22 | import com.joco.dialog.arrow.ArrowDialog
23 |
24 | @Composable
25 | fun SkeletonArrowDialog(targetRect: Rect, pointerSize: Dp, text: String, onClick: () -> Unit) {
26 | ArrowDialog(
27 | targetRect = targetRect,
28 | pointerSize = pointerSize,
29 | pointerColor = Color.White,
30 | content = {
31 | InnerDialog(text, onClick)
32 | }
33 | )
34 | }
35 |
36 | @Composable
37 | private fun InnerDialog(
38 | text: String,
39 | onClick: () -> Unit
40 | ) {
41 |
42 | Column(
43 | modifier = Modifier
44 | .clip(RoundedCornerShape(16.dp))
45 | .border(1.dp, Color.Red)
46 | .padding(16.dp),
47 | verticalArrangement = Arrangement.Center,
48 | horizontalAlignment = Alignment.CenterHorizontally
49 | ) {
50 | Text(
51 | text = text,
52 | color = Color.White
53 | )
54 | Spacer(modifier = Modifier.height(8.dp))
55 | Button(
56 | modifier = Modifier,
57 | shape = RoundedCornerShape(24.dp),
58 | onClick = onClick
59 | ) {
60 | Text(
61 | stringResource(R.string.button_awesome),
62 | color = Color.White
63 | )
64 | }
65 | }
66 | }
--------------------------------------------------------------------------------
/app/src/main/java/com/joco/composeshowcase/dialog/TransparentDialog.kt:
--------------------------------------------------------------------------------
1 | package com.joco.composeshowcase.dialog
2 |
3 | import androidx.compose.foundation.background
4 | import androidx.compose.foundation.layout.Arrangement
5 | import androidx.compose.foundation.layout.Box
6 | import androidx.compose.foundation.layout.Column
7 | import androidx.compose.foundation.layout.Spacer
8 | import androidx.compose.foundation.layout.height
9 | import androidx.compose.material3.MaterialTheme
10 | import androidx.compose.material3.Text
11 | import androidx.compose.runtime.Composable
12 | import androidx.compose.ui.Alignment
13 | import androidx.compose.ui.Modifier
14 | import androidx.compose.ui.graphics.Color
15 | import androidx.compose.ui.tooling.preview.Preview
16 | import androidx.compose.ui.unit.dp
17 |
18 | @Composable
19 | fun TransparentDialog(title: String, text: String, alignment: Alignment.Horizontal = Alignment.Start) {
20 | Column(
21 | modifier = Modifier
22 | .background(Color.Transparent),
23 | horizontalAlignment = alignment,
24 | verticalArrangement = Arrangement.Center,
25 | ) {
26 | Text(text = title, color = Color.White, style = MaterialTheme.typography.headlineMedium)
27 | Spacer(modifier = Modifier.height(8.dp))
28 | Text(text = text, color = Color.White)
29 | }
30 | }
31 |
32 | @Preview(showBackground = true)
33 | @Composable
34 | fun PreviewTransparentDialog() {
35 | Box(Modifier.background(Color.Black)) {
36 | TransparentDialog(
37 | title = "Preview Title",
38 | text = "This is a preview of the TransparentDialog."
39 | )
40 | }
41 | }
--------------------------------------------------------------------------------
/app/src/main/java/com/joco/composeshowcase/ui/theme/Color.kt:
--------------------------------------------------------------------------------
1 | package com.joco.composeshowcase.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)
12 |
13 | val Orange = Color(0xFFFF9811)
14 | val Red = Color(0xFFDF4A33)
--------------------------------------------------------------------------------
/app/src/main/java/com/joco/composeshowcase/ui/theme/Theme.kt:
--------------------------------------------------------------------------------
1 | package com.joco.composeshowcase.ui.theme
2 |
3 | import android.app.Activity
4 | import android.os.Build
5 | import androidx.compose.foundation.isSystemInDarkTheme
6 | import androidx.compose.material3.MaterialTheme
7 | import androidx.compose.material3.darkColorScheme
8 | import androidx.compose.material3.dynamicDarkColorScheme
9 | import androidx.compose.material3.dynamicLightColorScheme
10 | import androidx.compose.material3.lightColorScheme
11 | import androidx.compose.runtime.Composable
12 | import androidx.compose.runtime.SideEffect
13 | import androidx.compose.ui.graphics.toArgb
14 | import androidx.compose.ui.platform.LocalContext
15 | import androidx.compose.ui.platform.LocalView
16 | import androidx.core.view.WindowCompat
17 |
18 | private val DarkColorScheme = darkColorScheme(
19 | primary = Purple80,
20 | secondary = PurpleGrey80,
21 | tertiary = Pink80
22 | )
23 |
24 | private val LightColorScheme = lightColorScheme(
25 | primary = Red,
26 | secondary = PurpleGrey40,
27 | tertiary = Pink40
28 |
29 | /* Other default colors to override
30 | background = Color(0xFFFFFBFE),
31 | surface = Color(0xFFFFFBFE),
32 | onPrimary = Color.White,
33 | onSecondary = Color.White,
34 | onTertiary = Color.White,
35 | onBackground = Color(0xFF1C1B1F),
36 | onSurface = Color(0xFF1C1B1F),
37 | */
38 | )
39 |
40 | @Composable
41 | fun ComposeShowcaseTheme(
42 | darkTheme: Boolean = isSystemInDarkTheme(),
43 | // Dynamic color is available on Android 12+
44 | dynamicColor: Boolean = true,
45 | content: @Composable () -> Unit
46 | ) {
47 | val colorScheme = when {
48 | dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
49 | val context = LocalContext.current
50 | if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
51 | }
52 |
53 | darkTheme -> DarkColorScheme
54 | else -> LightColorScheme
55 | }
56 | val view = LocalView.current
57 | if (!view.isInEditMode) {
58 | SideEffect {
59 | val window = (view.context as Activity).window
60 | window.statusBarColor = colorScheme.primary.toArgb()
61 | WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
62 | }
63 | }
64 |
65 | MaterialTheme(
66 | colorScheme = colorScheme,
67 | typography = Typography,
68 | content = content
69 | )
70 | }
--------------------------------------------------------------------------------
/app/src/main/java/com/joco/composeshowcase/ui/theme/Type.kt:
--------------------------------------------------------------------------------
1 | package com.joco.composeshowcase.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 | )
--------------------------------------------------------------------------------
/app/src/main/res/drawable-v24/ic_launcher_foreground.xml:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
15 |
18 |
21 |
22 |
23 |
24 |
30 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/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/mipmap-hdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcase/1deae3176475f70f750a2e16cd41951cf53d6aa7/app/src/main/res/mipmap-hdpi/ic_launcher.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcase/1deae3176475f70f750a2e16cd41951cf53d6aa7/app/src/main/res/mipmap-hdpi/ic_launcher_round.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-mdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcase/1deae3176475f70f750a2e16cd41951cf53d6aa7/app/src/main/res/mipmap-mdpi/ic_launcher.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcase/1deae3176475f70f750a2e16cd41951cf53d6aa7/app/src/main/res/mipmap-mdpi/ic_launcher_round.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xhdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcase/1deae3176475f70f750a2e16cd41951cf53d6aa7/app/src/main/res/mipmap-xhdpi/ic_launcher.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcase/1deae3176475f70f750a2e16cd41951cf53d6aa7/app/src/main/res/mipmap-xhdpi/ic_launcher_round.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcase/1deae3176475f70f750a2e16cd41951cf53d6aa7/app/src/main/res/mipmap-xxhdpi/ic_launcher.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcase/1deae3176475f70f750a2e16cd41951cf53d6aa7/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcase/1deae3176475f70f750a2e16cd41951cf53d6aa7/app/src/main/res/mipmap-xxxhdpi/ic_launcher.webp
--------------------------------------------------------------------------------
/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcase/1deae3176475f70f750a2e16cd41951cf53d6aa7/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.webp
--------------------------------------------------------------------------------
/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/main/res/values/strings.xml:
--------------------------------------------------------------------------------
1 |
2 | Compose Showcase
3 |
4 | Hello %s!
5 |
6 | Awesome !
7 | Nice !
8 |
--------------------------------------------------------------------------------
/app/src/main/res/values/themes.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/app/src/main/res/xml/backup_rules.xml:
--------------------------------------------------------------------------------
1 |
8 |
9 |
13 |
--------------------------------------------------------------------------------
/app/src/main/res/xml/data_extraction_rules.xml:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
12 |
13 |
19 |
--------------------------------------------------------------------------------
/app/src/test/java/com/joco/composeshowcase/ExampleUnitTest.kt:
--------------------------------------------------------------------------------
1 | package com.joco.composeshowcase
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 | }
--------------------------------------------------------------------------------
/app/src/test/java/com/joco/composeshowcase/ShowcaseSequenceTest.kt:
--------------------------------------------------------------------------------
1 | package com.joco.composeshowcase
2 |
3 | import android.app.Application
4 | import android.content.ComponentName
5 | import androidx.activity.ComponentActivity
6 | import androidx.compose.foundation.layout.PaddingValues
7 | import androidx.compose.foundation.rememberScrollState
8 | import androidx.compose.ui.test.junit4.createAndroidComposeRule
9 | import androidx.compose.ui.test.onNodeWithText
10 | import androidx.compose.ui.test.onRoot
11 | import androidx.compose.ui.test.performClick
12 | import androidx.compose.ui.unit.dp
13 | import androidx.test.core.app.ApplicationProvider
14 | import com.github.takahirom.roborazzi.RobolectricDeviceQualifiers
15 | import com.github.takahirom.roborazzi.captureRoboImage
16 | import com.joco.showcase.sequence.SequenceShowcase
17 | import com.joco.showcase.sequence.rememberSequenceShowcaseState
18 | import org.junit.Rule
19 | import org.junit.Test
20 | import org.junit.rules.TestWatcher
21 | import org.junit.runner.Description
22 | import org.junit.runner.RunWith
23 | import org.robolectric.RobolectricTestRunner
24 | import org.robolectric.Shadows
25 | import org.robolectric.annotation.Config
26 | import org.robolectric.annotation.GraphicsMode
27 |
28 | @GraphicsMode(GraphicsMode.Mode.NATIVE)
29 | @RunWith(RobolectricTestRunner::class)
30 | @Config(qualifiers = RobolectricDeviceQualifiers.PixelXL)
31 | class ShowcaseSequenceTest {
32 |
33 | @get:Rule(order = 1)
34 | val addActivityToRobolectricRule = object : TestWatcher() {
35 | override fun starting(description: Description?) {
36 | super.starting(description)
37 | val appContext: Application = ApplicationProvider.getApplicationContext()
38 | Shadows.shadowOf(appContext.packageManager).addActivityIfNotPresent(
39 | ComponentName(
40 | appContext.packageName,
41 | ComponentActivity::class.java.name,
42 | )
43 | )
44 | }
45 | }
46 |
47 | @get:Rule(order = 2)
48 | val composeRule = createAndroidComposeRule()
49 |
50 | @Test
51 | fun test_launch_showcaseSequence() {
52 | val buttonNice = composeRule.onNodeWithText(getString(R.string.button_nice))
53 | val buttonAwesome = composeRule.onNodeWithText(getString(R.string.button_awesome))
54 | val textGreetings = composeRule.onNodeWithText(getString(R.string.label_greetings, "Andy"))
55 |
56 | composeRule.mainClock.autoAdvance = false
57 |
58 | composeRule.setContent {
59 | val sequenceShowcaseState = rememberSequenceShowcaseState()
60 | SequenceShowcase(state = sequenceShowcaseState) {
61 | MainContent(
62 | PaddingValues(16.dp),
63 | rememberScrollState(),
64 | sequenceShowcaseState
65 | )
66 | }
67 | }
68 |
69 | // Initial
70 | capture()
71 |
72 | // 1st showcase
73 | textGreetings.performClick()
74 | advanceTime(DEFAULT_MILLIS)
75 | capture()
76 |
77 | // 2nd showcase
78 | buttonNice.performClick()
79 | advanceTime(DEFAULT_MILLIS + MainActivity.SHOWCASE_2_DURATION)
80 | capture()
81 |
82 | // 3rd showcase
83 | buttonNice.performClick()
84 | advanceTime(MainActivity.SHOWCASE_2_DURATION + MainActivity.SHOWCASE_3_DURATION.toLong())
85 | capture()
86 |
87 | // 4th showcase
88 | buttonAwesome.performClick()
89 | advanceTime(MainActivity.SHOWCASE_3_DURATION.toLong() + DEFAULT_MILLIS)
90 | capture()
91 |
92 | // Close
93 | composeRule.onRoot().performClick()
94 | advanceTime()
95 | capture()
96 | }
97 |
98 | private fun advanceTime(millis: Long = DEFAULT_MILLIS * 2) {
99 | composeRule.mainClock.advanceTimeBy(millis)
100 | }
101 |
102 | private fun capture() {
103 | composeRule
104 | .onRoot()
105 | .captureRoboImage()
106 | }
107 |
108 | private fun getString(resId: Int, vararg formatArgs: Any): String {
109 | return composeRule.activity.getString(resId, *formatArgs)
110 | }
111 |
112 | companion object {
113 | const val DEFAULT_MILLIS = 700L
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/build.gradle.kts:
--------------------------------------------------------------------------------
1 | // Top-level build file where you can add configuration options common to all sub-projects/modules.
2 | plugins {
3 | alias(libs.plugins.androidApplication) apply false
4 | alias(libs.plugins.jetbrainsKotlinAndroid) apply false
5 | alias(libs.plugins.androidLibrary) apply false
6 | }
--------------------------------------------------------------------------------
/dialog/.gitignore:
--------------------------------------------------------------------------------
1 | /build
--------------------------------------------------------------------------------
/dialog/build.gradle.kts:
--------------------------------------------------------------------------------
1 | plugins {
2 | alias(libs.plugins.androidLibrary)
3 | alias(libs.plugins.jetbrainsKotlinAndroid)
4 | }
5 |
6 | android {
7 | namespace = "com.joco.dialog"
8 | compileSdk = 34
9 |
10 | defaultConfig {
11 | minSdk = 21
12 |
13 | testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
14 | consumerProguardFiles("consumer-rules.pro")
15 | }
16 |
17 | buildTypes {
18 | release {
19 | isMinifyEnabled = false
20 | proguardFiles(
21 | getDefaultProguardFile("proguard-android-optimize.txt"),
22 | "proguard-rules.pro"
23 | )
24 | }
25 | }
26 | compileOptions {
27 | sourceCompatibility = JavaVersion.VERSION_17
28 | targetCompatibility = JavaVersion.VERSION_17
29 | }
30 | kotlinOptions {
31 | jvmTarget = "17"
32 | }
33 | buildFeatures {
34 | compose = true
35 | }
36 | composeOptions {
37 | kotlinCompilerExtensionVersion = "1.5.1"
38 | }
39 | }
40 |
41 | dependencies {
42 |
43 | implementation(libs.androidx.core.ktx)
44 | implementation(platform(libs.androidx.compose.bom))
45 | implementation(libs.androidx.foundation)
46 |
47 | testImplementation(libs.junit)
48 | androidTestImplementation(libs.androidx.junit)
49 | androidTestImplementation(libs.androidx.espresso.core)
50 | }
--------------------------------------------------------------------------------
/dialog/consumer-rules.pro:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcase/1deae3176475f70f750a2e16cd41951cf53d6aa7/dialog/consumer-rules.pro
--------------------------------------------------------------------------------
/dialog/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
--------------------------------------------------------------------------------
/dialog/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/dialog/src/main/java/com/joco/dialog/arrow/ArrowDialog.kt:
--------------------------------------------------------------------------------
1 | package com.joco.dialog.arrow
2 |
3 | import androidx.compose.foundation.background
4 | import androidx.compose.foundation.layout.Box
5 | import androidx.compose.foundation.layout.offset
6 | import androidx.compose.foundation.layout.size
7 | import androidx.compose.runtime.Composable
8 | import androidx.compose.runtime.mutableIntStateOf
9 | import androidx.compose.runtime.remember
10 | import androidx.compose.ui.Alignment
11 | import androidx.compose.ui.Modifier
12 | import androidx.compose.ui.draw.rotate
13 | import androidx.compose.ui.geometry.Rect
14 | import androidx.compose.ui.graphics.Color
15 | import androidx.compose.ui.layout.boundsInRoot
16 | import androidx.compose.ui.layout.onGloballyPositioned
17 | import androidx.compose.ui.platform.LocalDensity
18 | import androidx.compose.ui.unit.Dp
19 | import androidx.compose.ui.unit.dp
20 |
21 | /**
22 | * A composable that displays a dialog with arrow.
23 | *
24 | * @param targetRect The rectangle of the target element that the arrow will point to.
25 | * @param modifier The modifier to be applied to the layout.
26 | * @param pointerColor The color of the pointer that points to the target element.
27 | * @param pointerSize The size of the pointer.
28 | * @param content The content to be displayed inside the dialog. A [Color] parameter
29 | * to allow the content to adapt to the pointer's color.
30 | *
31 | * Note currently support only vertical arrow.
32 | */
33 | @Composable
34 | fun ArrowDialog(
35 | targetRect: Rect,
36 | modifier: Modifier = Modifier,
37 | pointerColor: Color = ArrowDialogDefaults.pointerColor,
38 | pointerSize: Dp = ArrowDialogDefaults.pointerSize,
39 | content: @Composable (Color) -> Unit
40 | ) {
41 | val dialogOffsetX = remember { mutableIntStateOf(0) }
42 | val dialogOffsetY = remember { mutableIntStateOf(0) }
43 |
44 | Box(
45 | modifier = modifier
46 | .onGloballyPositioned {
47 | it.boundsInRoot().let { rect ->
48 | dialogOffsetX.intValue = rect.left.toInt()
49 | dialogOffsetY.intValue = rect.top.toInt()
50 | }
51 | }
52 | ) {
53 | val yAlignment = with(Alignment) {
54 | if (dialogOffsetY.intValue < targetRect.center.y) BottomStart else TopStart
55 | }
56 | val half = pointerSize / 2
57 |
58 | val pointerOffsetX = (targetRect.center.x - dialogOffsetX.intValue).toDp() - half
59 | Box(
60 | modifier = Modifier
61 | .align(yAlignment)
62 | .offset(x = pointerOffsetX)
63 | .size(pointerSize)
64 | .rotate(45f)
65 | .background(pointerColor)
66 | )
67 |
68 | val offsetY = if (yAlignment == Alignment.BottomStart) -half else half
69 | Box(
70 | modifier = Modifier
71 | .offset(y = offsetY)
72 | ) {
73 | content(pointerColor)
74 | }
75 | }
76 | }
77 |
78 | @Composable
79 | private fun Float.toDp() = with(LocalDensity.current) {
80 | toDp()
81 | }
82 |
83 | object ArrowDialogDefaults {
84 |
85 | val pointerSize = 22.dp
86 |
87 | val pointerColor = Color.White
88 | }
--------------------------------------------------------------------------------
/gradle.properties:
--------------------------------------------------------------------------------
1 | # Project-wide Gradle settings.
2 | # IDE (e.g. Android Studio) users:
3 | # Gradle settings configured through the IDE *will override*
4 | # any settings specified in this file.
5 | # For more details on how to configure your build environment visit
6 | # http://www.gradle.org/docs/current/userguide/build_environment.html
7 | # Specifies the JVM arguments used for the daemon process.
8 | # The setting is particularly useful for tweaking memory settings.
9 | org.gradle.jvmargs=-Xmx2048m -Dfile.encoding=UTF-8
10 | # When configured, Gradle will run in incubating parallel mode.
11 | # This option should only be used with decoupled projects. For more details, visit
12 | # https://developer.android.com/r/tools/gradle-multi-project-decoupled-projects
13 | # org.gradle.parallel=true
14 | # AndroidX package structure to make it clearer which packages are bundled with the
15 | # Android operating system, and which are packaged with your app's APK
16 | # https://developer.android.com/topic/libraries/support-library/androidx-rn
17 | android.useAndroidX=true
18 | # Kotlin code style for this project: "official" or "obsolete":
19 | kotlin.code.style=official
20 | # Enables namespacing of each library's R class so that its R class includes only the
21 | # resources declared in the library itself and none from the library's dependencies,
22 | # thereby reducing the size of the R class for that library
23 | android.nonTransitiveRClass=true
24 |
25 | # Roborazzi
26 | roborazzi.record.resizeScale=0.5
27 |
28 | # Publishing
29 | SONATYPE_HOST=CENTRAL_PORTAL
30 | RELEASE_SIGNING_ENABLED=true
31 |
32 | GROUP=io.github.jocoand
33 | POM_ARTIFACT_ID=showcase-sequence
34 | VERSION_NAME=1.3.0
35 |
36 | POM_NAME=Sequence Showcase
37 | POM_DESCRIPTION=A Jetpack Compose library for creating a sequence of showcases in a specific order.
38 | POM_INCEPTION_YEAR=2024
39 | POM_URL=https://github.com/jocoand/compose-showcase
40 |
41 | POM_LICENSE_NAME=MIT License
42 | POM_LICENSE_URL=https://opensource.org/licenses/MIT
43 | POM_LICENSE_DIST=repo
44 |
45 | POM_SCM_URL=https://github.com/jocoand/compose-showcase
46 | POM_SCM_CONNECTION=scm:git:git://github.com/jocoand/compose-showcase.git
47 | POM_SCM_DEV_CONNECTION=scm:git:ssh://git@github.com/jocoand/compose-showcase.git
48 |
49 | POM_DEVELOPER_ID=jocoand
50 | POM_DEVELOPER_NAME=jocoand
51 | POM_DEVELOPER_URL=https://github.com/jocoand
--------------------------------------------------------------------------------
/gradle/libs.versions.toml:
--------------------------------------------------------------------------------
1 | [versions]
2 | agp = "8.3.1"
3 | composeShowcaseview = "1.4.4"
4 | dialog = "1.0.0"
5 | kotlin = "1.9.0"
6 | coreKtx = "1.13.1"
7 | junit = "4.13.2"
8 | junitVersion = "1.1.5"
9 | espressoCore = "3.5.1"
10 | lifecycleRuntimeKtx = "2.8.7"
11 | activityCompose = "1.9.0"
12 | composeBom = "2024.06.00"
13 | material3Version = "1.2.1"
14 | mavenpub = "0.28.0"
15 | nmcp = "0.0.7"
16 | robolectric = "4.11.1"
17 | roborazzi = "1.8.0-alpha-5"
18 |
19 | [libraries]
20 | androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
21 | androidx-foundation = { module = "androidx.compose.foundation:foundation" }
22 | compose-showcaseview = { module = "io.github.jocoand:compose-showcaseview", version.ref = "composeShowcaseview" }
23 | dialog = { module = "io.github.jocoand:dialog", version.ref = "dialog" }
24 | junit = { group = "junit", name = "junit", version.ref = "junit" }
25 | androidx-junit = { group = "androidx.test.ext", name = "junit", version.ref = "junitVersion" }
26 | androidx-espresso-core = { group = "androidx.test.espresso", name = "espresso-core", version.ref = "espressoCore" }
27 | androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" }
28 | androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }
29 | androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
30 | androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
31 | androidx-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
32 | androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
33 | androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
34 | androidx-material3 = { group = "androidx.compose.material3", name = "material3", version.ref = "material3Version"}
35 | ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
36 | robolectric = { group = "org.robolectric", name = "robolectric", version.ref = "robolectric" }
37 | roborazzi = { group = "io.github.takahirom.roborazzi", name = "roborazzi", version.ref = "roborazzi" }
38 | roborazzi-compose = { group = "io.github.takahirom.roborazzi", name = "roborazzi-compose", version.ref = "roborazzi" }
39 | roborazzi-rule = { group = "io.github.takahirom.roborazzi", name = "roborazzi-junit-rule", version.ref = "roborazzi" }
40 |
41 | [plugins]
42 | androidApplication = { id = "com.android.application", version.ref = "agp" }
43 | jetbrainsKotlinAndroid = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
44 | androidLibrary = { id = "com.android.library", version.ref = "agp" }
45 | mavenPublish = { id = "com.vanniktech.maven.publish", version.ref = "mavenpub" }
46 | nmcp = { id = "com.gradleup.nmcp", version.ref = "nmcp" }
47 | roborazzi = { id = "io.github.takahirom.roborazzi", version.ref = "roborazzi" }
48 |
--------------------------------------------------------------------------------
/gradle/wrapper/gradle-wrapper.jar:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcase/1deae3176475f70f750a2e16cd41951cf53d6aa7/gradle/wrapper/gradle-wrapper.jar
--------------------------------------------------------------------------------
/gradle/wrapper/gradle-wrapper.properties:
--------------------------------------------------------------------------------
1 | #Sun Jul 21 14:23:04 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 |
--------------------------------------------------------------------------------
/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 |
--------------------------------------------------------------------------------
/gradlew.bat:
--------------------------------------------------------------------------------
1 | @rem
2 | @rem Copyright 2015 the original author or authors.
3 | @rem
4 | @rem Licensed under the Apache License, Version 2.0 (the "License");
5 | @rem you may not use this file except in compliance with the License.
6 | @rem You may obtain a copy of the License at
7 | @rem
8 | @rem https://www.apache.org/licenses/LICENSE-2.0
9 | @rem
10 | @rem Unless required by applicable law or agreed to in writing, software
11 | @rem distributed under the License is distributed on an "AS IS" BASIS,
12 | @rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13 | @rem See the License for the specific language governing permissions and
14 | @rem limitations under the License.
15 | @rem
16 |
17 | @if "%DEBUG%" == "" @echo off
18 | @rem ##########################################################################
19 | @rem
20 | @rem Gradle startup script for Windows
21 | @rem
22 | @rem ##########################################################################
23 |
24 | @rem Set local scope for the variables with windows NT shell
25 | if "%OS%"=="Windows_NT" setlocal
26 |
27 | set DIRNAME=%~dp0
28 | if "%DIRNAME%" == "" set DIRNAME=.
29 | set APP_BASE_NAME=%~n0
30 | set APP_HOME=%DIRNAME%
31 |
32 | @rem Resolve any "." and ".." in APP_HOME to make it shorter.
33 | for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
34 |
35 | @rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
36 | set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
37 |
38 | @rem Find java.exe
39 | if defined JAVA_HOME goto findJavaFromJavaHome
40 |
41 | set JAVA_EXE=java.exe
42 | %JAVA_EXE% -version >NUL 2>&1
43 | if "%ERRORLEVEL%" == "0" goto execute
44 |
45 | echo.
46 | echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
47 | echo.
48 | echo Please set the JAVA_HOME variable in your environment to match the
49 | echo location of your Java installation.
50 |
51 | goto fail
52 |
53 | :findJavaFromJavaHome
54 | set JAVA_HOME=%JAVA_HOME:"=%
55 | set JAVA_EXE=%JAVA_HOME%/bin/java.exe
56 |
57 | if exist "%JAVA_EXE%" goto execute
58 |
59 | echo.
60 | echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
61 | echo.
62 | echo Please set the JAVA_HOME variable in your environment to match the
63 | echo location of your Java installation.
64 |
65 | goto fail
66 |
67 | :execute
68 | @rem Setup the command line
69 |
70 | set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
71 |
72 |
73 | @rem Execute Gradle
74 | "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
75 |
76 | :end
77 | @rem End local scope for the variables with windows NT shell
78 | if "%ERRORLEVEL%"=="0" goto mainEnd
79 |
80 | :fail
81 | rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
82 | rem the _cmd.exe /c_ return code!
83 | if not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
84 | exit /b 1
85 |
86 | :mainEnd
87 | if "%OS%"=="Windows_NT" endlocal
88 |
89 | :omega
90 |
--------------------------------------------------------------------------------
/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 Showcase"
23 | include(":app")
24 | include(":dialog")
25 | include(":showcase-sequence")
26 | include(":showcaseview")
27 |
--------------------------------------------------------------------------------
/showcase-sequence/.gitignore:
--------------------------------------------------------------------------------
1 | /build
--------------------------------------------------------------------------------
/showcase-sequence/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.showcase.sequence"
11 | compileSdk = 34
12 |
13 | defaultConfig {
14 | minSdk = 21
15 |
16 | testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
17 | consumerProguardFiles("consumer-rules.pro")
18 | }
19 |
20 | buildTypes {
21 | release {
22 | isMinifyEnabled = false
23 | proguardFiles(
24 | getDefaultProguardFile("proguard-android-optimize.txt"),
25 | "proguard-rules.pro"
26 | )
27 | }
28 | }
29 | compileOptions {
30 | sourceCompatibility = JavaVersion.VERSION_17
31 | targetCompatibility = JavaVersion.VERSION_17
32 | }
33 | kotlinOptions {
34 | jvmTarget = "17"
35 | }
36 | buildFeatures {
37 | compose = true
38 | }
39 | composeOptions {
40 | kotlinCompilerExtensionVersion = "1.5.1"
41 | }
42 | }
43 |
44 | dependencies {
45 |
46 | implementation(libs.androidx.core.ktx)
47 | implementation(platform(libs.androidx.compose.bom))
48 | implementation(libs.androidx.foundation)
49 |
50 | api(libs.compose.showcaseview)
51 | api(libs.dialog)
52 |
53 | testImplementation(libs.junit)
54 | androidTestImplementation(libs.androidx.junit)
55 | androidTestImplementation(libs.androidx.espresso.core)
56 | }
--------------------------------------------------------------------------------
/showcase-sequence/consumer-rules.pro:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcase/1deae3176475f70f750a2e16cd41951cf53d6aa7/showcase-sequence/consumer-rules.pro
--------------------------------------------------------------------------------
/showcase-sequence/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
--------------------------------------------------------------------------------
/showcase-sequence/src/androidTest/java/com/joco/showcase/sequence/ExampleInstrumentedTest.kt:
--------------------------------------------------------------------------------
1 | package com.joco.showcase.sequence
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.showcase.sequence.test", appContext.packageName)
23 | }
24 | }
--------------------------------------------------------------------------------
/showcase-sequence/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/showcase-sequence/src/main/java/com/joco/showcase/sequence/SequenceShowcase.kt:
--------------------------------------------------------------------------------
1 | package com.joco.showcase.sequence
2 |
3 | import androidx.compose.foundation.layout.Box
4 | import androidx.compose.foundation.layout.fillMaxWidth
5 | import androidx.compose.runtime.Composable
6 | import androidx.compose.runtime.remember
7 | import androidx.compose.ui.Modifier
8 | import androidx.compose.ui.geometry.Rect
9 | import androidx.compose.ui.layout.onGloballyPositioned
10 | import com.joco.showcaseview.AnimationDuration
11 | import com.joco.showcaseview.BackgroundAlpha
12 | import com.joco.showcaseview.ShowcaseAlignment
13 | import com.joco.showcaseview.ShowcaseDisplayState
14 | import com.joco.showcaseview.ShowcasePosition
15 | import com.joco.showcaseview.ShowcaseView
16 | import com.joco.showcaseview.highlight.ShowcaseHighlight
17 |
18 | @Composable
19 | fun SequenceShowcase(
20 | state: SequenceShowcaseState = rememberSequenceShowcaseState(),
21 | content: @Composable SequenceShowcaseScope.() -> Unit
22 | ) {
23 | val scope = remember(state) { SequenceShowcaseScope(state) }
24 |
25 | Box(modifier = Modifier.fillMaxWidth()) {
26 | scope.content()
27 |
28 | state.currentTarget?.let { target ->
29 | ShowcaseView(
30 | visible = state.showCaseVisible,
31 | targetCoordinates = target.coordinates,
32 | position = target.position,
33 | alignment = target.alignment,
34 | highlight = target.highlight,
35 | animationDuration = target.duration,
36 | backgroundAlpha = target.backgroundAlpha,
37 | onDisplayStateChanged = { displayState ->
38 | when(displayState) {
39 | ShowcaseDisplayState.Appeared -> {
40 | state.onShowcaseViewAppear()
41 | }
42 | ShowcaseDisplayState.Disappeared -> {
43 | state.onShowcaseViewDisappear()
44 | }
45 | }
46 | }
47 | ) { targetRect ->
48 | target.content(targetRect)
49 | }
50 | }
51 | }
52 | }
53 |
54 | /**
55 | * Provides a function to create a Modifier that marks a Composable as a target for the SequenceShowcase.
56 | */
57 | class SequenceShowcaseScope(
58 | private val state: SequenceShowcaseState,
59 | ) {
60 | /**
61 | * Creates a Modifier that marks a Composable as a target for the SequenceShowcase.
62 | *
63 | * @param index The index of the target in the sequence.
64 | * @param position The position of the dialog relative to the target element.
65 | * @param alignment The alignment of the dialog relative to the target element.
66 | * @param highlight The highlight around the target element.
67 | * @param animationDuration The duration of the fade enter and exit animation.
68 | * @param backgroundAlpha The alpha value of the background overlay.
69 | * @param content The content of the dialog.
70 | */
71 | fun Modifier.sequenceShowcaseTarget(
72 | index: Int,
73 | position: ShowcasePosition = ShowcasePosition.Default,
74 | alignment: ShowcaseAlignment = ShowcaseAlignment.Default,
75 | highlight: ShowcaseHighlight = ShowcaseHighlight.Rectangular(),
76 | animationDuration: AnimationDuration = AnimationDuration.Default,
77 | backgroundAlpha: BackgroundAlpha = BackgroundAlpha.Normal,
78 | content: @Composable (Rect) -> Unit,
79 | ): Modifier = onGloballyPositioned { coordinates ->
80 | state.targets[index] = SequenceShowcaseTarget(
81 | index = index,
82 | coordinates = coordinates,
83 | position = position,
84 | alignment = alignment,
85 | highlight = highlight,
86 | duration = animationDuration,
87 | backgroundAlpha = backgroundAlpha,
88 | content = content
89 | )
90 | }
91 | }
--------------------------------------------------------------------------------
/showcase-sequence/src/main/java/com/joco/showcase/sequence/SequenceShowcaseState.kt:
--------------------------------------------------------------------------------
1 | package com.joco.showcase.sequence
2 |
3 | import androidx.compose.runtime.Composable
4 | import androidx.compose.runtime.getValue
5 | import androidx.compose.runtime.mutableIntStateOf
6 | import androidx.compose.runtime.mutableStateMapOf
7 | import androidx.compose.runtime.mutableStateOf
8 | import androidx.compose.runtime.remember
9 | import androidx.compose.runtime.setValue
10 | import androidx.compose.ui.geometry.Rect
11 | import androidx.compose.ui.layout.LayoutCoordinates
12 | import com.joco.showcaseview.AnimationDuration
13 | import com.joco.showcaseview.BackgroundAlpha
14 | import com.joco.showcaseview.ShowcaseAlignment
15 | import com.joco.showcaseview.ShowcasePosition
16 | import com.joco.showcaseview.highlight.ShowcaseHighlight
17 |
18 | @Composable
19 | fun rememberSequenceShowcaseState(): SequenceShowcaseState {
20 | return remember {
21 | SequenceShowcaseState()
22 | }
23 | }
24 |
25 | /**
26 | * Manages the targets of the showcase and the current target index.
27 | * It also controls the visibility of the showcase.
28 | */
29 | class SequenceShowcaseState {
30 | internal var targets = mutableStateMapOf()
31 |
32 | var currentTargetIndex by mutableIntStateOf(0)
33 | private set
34 | val currentTarget: SequenceShowcaseTarget?
35 | get() = targets[currentTargetIndex]
36 |
37 | var showCaseVisible by mutableStateOf(false)
38 | private set
39 |
40 | private var isTransitioning = false
41 |
42 | /**
43 | * Start the sequence showcase.
44 | *
45 | * @param index The index of the target to start with.
46 | */
47 | fun start(index: Int = 0) {
48 | currentTargetIndex = index
49 | showCaseVisible = true
50 | }
51 |
52 | /**
53 | * Move to the next target in the sequence showcase.
54 | */
55 | fun next() {
56 | isTransitioning = true
57 | showCaseVisible = false
58 | }
59 |
60 | /**
61 | * Dismiss the sequence showcase.
62 | */
63 | fun dismiss() {
64 | showCaseVisible = false
65 | isTransitioning = false
66 | }
67 |
68 | internal fun onShowcaseViewAppear() {
69 | if (isTransitioning) {
70 | isTransitioning = false
71 | }
72 | }
73 |
74 | internal fun onShowcaseViewDisappear() {
75 | if (isTransitioning) {
76 | currentTargetIndex++
77 | showCaseVisible = currentTarget != null
78 | }
79 | }
80 | }
81 |
82 | data class SequenceShowcaseTarget(
83 | val index: Int,
84 | val coordinates: LayoutCoordinates,
85 | val position: ShowcasePosition,
86 | val alignment: ShowcaseAlignment,
87 | val highlight: ShowcaseHighlight,
88 | val duration: AnimationDuration,
89 | val backgroundAlpha: BackgroundAlpha,
90 | val content: @Composable (Rect) -> Unit
91 | )
--------------------------------------------------------------------------------
/showcase-sequence/src/test/java/com/joco/showcase/sequence/ExampleUnitTest.kt:
--------------------------------------------------------------------------------
1 | package com.joco.showcase.sequence
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 | }
--------------------------------------------------------------------------------
/showcaseview/.gitignore:
--------------------------------------------------------------------------------
1 | /build
--------------------------------------------------------------------------------
/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.showcaseview"
11 | compileSdk = 34
12 |
13 | version = findProperty("VERSION_NAME") as String
14 |
15 | defaultConfig {
16 | minSdk = 21
17 |
18 | testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
19 | consumerProguardFiles("consumer-rules.pro")
20 | }
21 |
22 | buildTypes {
23 | release {
24 | isMinifyEnabled = false
25 | proguardFiles(
26 | getDefaultProguardFile("proguard-android-optimize.txt"),
27 | "proguard-rules.pro"
28 | )
29 | }
30 | }
31 | compileOptions {
32 | sourceCompatibility = JavaVersion.VERSION_17
33 | targetCompatibility = JavaVersion.VERSION_17
34 | }
35 | kotlinOptions {
36 | jvmTarget = "17"
37 | }
38 | buildFeatures {
39 | compose = true
40 | }
41 | composeOptions {
42 | kotlinCompilerExtensionVersion = "1.5.1"
43 | }
44 | }
45 |
46 | dependencies {
47 |
48 | implementation(libs.androidx.core.ktx)
49 | implementation(platform(libs.androidx.compose.bom))
50 | implementation(libs.androidx.material3)
51 |
52 | testImplementation(libs.junit)
53 | androidTestImplementation(libs.androidx.junit)
54 | androidTestImplementation(libs.androidx.espresso.core)
55 | }
--------------------------------------------------------------------------------
/showcaseview/consumer-rules.pro:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jocoand/compose-showcase/1deae3176475f70f750a2e16cd41951cf53d6aa7/showcaseview/consumer-rules.pro
--------------------------------------------------------------------------------
/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
--------------------------------------------------------------------------------
/showcaseview/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/showcaseview/src/main/java/com/joco/showcaseview/AnimationDuration.kt:
--------------------------------------------------------------------------------
1 | package com.joco.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 | data class AnimationDuration internal 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 default duration for both enter and exit animations.
21 | */
22 | val Fast = AnimationDuration(300, 300)
23 |
24 | /**
25 | * Creates a `AnimationDuration` with the default duration for both enter and exit animations.
26 | */
27 | val Slow = AnimationDuration(1000, 1000)
28 |
29 | /**
30 | * Creates a `AnimationDuration` with the same duration for both enter and exit animations.
31 | *
32 | * @param durationMillis Animations duration in milliseconds.
33 | */
34 | fun create(durationMillis: Int) = AnimationDuration(durationMillis, durationMillis)
35 |
36 | /**
37 | * Creates a `AnimationDuration` with different durations for enter and exit animations.
38 | *
39 | * @param enterMillis The enter animation duration in milliseconds.
40 | * @param exitMillis The exit animation duration in milliseconds.
41 | */
42 | fun create(enterMillis: Int, exitMillis: Int) = AnimationDuration(enterMillis, exitMillis)
43 | }
44 | }
--------------------------------------------------------------------------------
/showcaseview/src/main/java/com/joco/showcaseview/BackgroundAlpha.kt:
--------------------------------------------------------------------------------
1 | package com.joco.showcaseview
2 |
3 | /**
4 | * Represent the alpha (transparency) level of a background.
5 | *
6 | * @property value The alpha value as a Float.
7 | */
8 | @JvmInline
9 | value class BackgroundAlpha(val value: Float) {
10 | companion object {
11 | /**
12 | * Normal alpha value for the background.
13 | */
14 | val Normal = BackgroundAlpha(0.6f)
15 | /**
16 | * Dark alpha value for the background.
17 | */
18 | val Dark = BackgroundAlpha(0.9f)
19 | }
20 | }
--------------------------------------------------------------------------------
/showcaseview/src/main/java/com/joco/showcaseview/ShowcaseAlignment.kt:
--------------------------------------------------------------------------------
1 | package com.joco.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 | }
--------------------------------------------------------------------------------
/showcaseview/src/main/java/com/joco/showcaseview/ShowcaseDisplayState.kt:
--------------------------------------------------------------------------------
1 | package com.joco.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 | }
--------------------------------------------------------------------------------
/showcaseview/src/main/java/com/joco/showcaseview/ShowcasePosition.kt:
--------------------------------------------------------------------------------
1 | package com.joco.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 | }
--------------------------------------------------------------------------------
/showcaseview/src/main/java/com/joco/showcaseview/ShowcaseView.kt:
--------------------------------------------------------------------------------
1 | package com.joco.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.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 backgroundAlpha the alpha value of the background overlay.
43 | * @param dialog the content of the dialog.
44 | */
45 | @Composable
46 | fun ShowcaseView(
47 | visible: Boolean,
48 | targetCoordinates: LayoutCoordinates,
49 | position: ShowcasePosition = ShowcasePosition.Default,
50 | alignment: ShowcaseAlignment = ShowcaseAlignment.Default,
51 | animationDuration: AnimationDuration = AnimationDuration.Default,
52 | onDisplayStateChanged: (ShowcaseDisplayState) -> Unit = {},
53 | highlight: ShowcaseHighlight = ShowcaseHighlight.Rectangular(),
54 | backgroundAlpha: BackgroundAlpha = BackgroundAlpha.Normal,
55 | dialog: @Composable (Rect) -> Unit
56 | ) {
57 | val transition = remember { MutableTransitionState(false) }
58 | val highlightDrawer = highlight.create(targetCoordinates = targetCoordinates)
59 |
60 | AnimatedVisibility(
61 | visibleState = transition,
62 | enter = fadeIn(tween(animationDuration.enterMillis)),
63 | exit = fadeOut(tween(animationDuration.exitMillis))
64 | ) {
65 | Box {
66 | ShowcaseBackground(
67 | coordinates = targetCoordinates,
68 | drawHighlight = highlightDrawer.drawHighlight,
69 | backgroundAlpha = backgroundAlpha
70 | )
71 | ShowcaseDialog(
72 | targetRect = targetCoordinates.boundsInRoot(),
73 | position = position,
74 | alignment = alignment,
75 | highlightBounds = highlightDrawer.highlightBounds,
76 | content = dialog
77 | )
78 | }
79 | }
80 | LaunchedEffect(key1 = visible) {
81 | transition.targetState = visible
82 | }
83 | LaunchedEffect(key1 = transition.isIdle) {
84 | if (transition.isIdle) {
85 | if (transition.targetState) {
86 | onDisplayStateChanged(ShowcaseDisplayState.Appeared)
87 | } else {
88 | onDisplayStateChanged(ShowcaseDisplayState.Disappeared)
89 | }
90 | }
91 | }
92 | }
93 |
94 | /**
95 | * Draws the background overlay and the highlight around the target element.
96 | *
97 | * @param coordinates the coordinates of the target element that the Showcase is highlighting.
98 | * @param drawHighlight draws the highlight around the target element.
99 | */
100 | @Composable
101 | private fun ShowcaseBackground(
102 | coordinates: LayoutCoordinates,
103 | backgroundAlpha: BackgroundAlpha,
104 | drawHighlight: DrawScope.(LayoutCoordinates) -> Unit
105 | ) {
106 | Canvas(
107 | modifier = Modifier
108 | .fillMaxSize()
109 | .graphicsLayer(alpha = backgroundAlpha.value)
110 | ) {
111 | // Overlay
112 | drawRect(
113 | Color.Black.copy(alpha = backgroundAlpha.value),
114 | size = Size(size.width, size.height)
115 | )
116 | drawHighlight(coordinates)
117 | }
118 | }
119 |
120 | /**
121 | * A Composable function that positions and displays the dialog.
122 | *
123 | * @param targetRect te bounding rectangle of the target element.
124 | * @param position the position of the dialog relative to the target element.
125 | * @param alignment the alignment of the dialog relative to the target element.
126 | * @param highlightBounds the bounding rectangle of the highlight.
127 | * @param content the content of the dialog.
128 | */
129 | @Composable
130 | private fun ShowcaseDialog(
131 | targetRect: Rect,
132 | position: ShowcasePosition,
133 | alignment: ShowcaseAlignment,
134 | highlightBounds: Rect,
135 | content: @Composable (Rect) -> Unit
136 | ) {
137 | var offsetX by remember { mutableFloatStateOf(0f) }
138 | var offsetY by remember { mutableFloatStateOf(0f) }
139 | val configuration = LocalConfiguration.current
140 | val density = LocalDensity.current
141 |
142 | val screenHeight = with(density) {
143 | configuration.screenHeightDp.dp.toPx()
144 | }
145 | val screenWidth = with(density) {
146 | configuration.screenWidthDp.dp.toPx()
147 | }
148 |
149 | val verticalSpacerPx = with(density) { 16.dp.toPx() }
150 |
151 | Box(
152 | modifier = Modifier
153 | .offset(x = offsetX.toDp(), y = offsetY.toDp())
154 | .onGloballyPositioned {
155 | val dialogHeight = it.size.height
156 | val dialogWidth = it.size.width
157 | val highlightCenterX = highlightBounds.center.x
158 |
159 | offsetX = when (alignment) {
160 | ShowcaseAlignment.Start -> highlightBounds.left
161 | ShowcaseAlignment.End -> highlightBounds.right - dialogWidth
162 | ShowcaseAlignment.CenterHorizontal -> (highlightCenterX - dialogWidth / 2)
163 | ShowcaseAlignment.Default -> {
164 | if (highlightCenterX > screenWidth / 2) {
165 | highlightBounds.right - dialogWidth
166 | } else {
167 | highlightBounds.left
168 | }
169 | }
170 | }
171 |
172 | offsetY = when (position) {
173 | ShowcasePosition.Top -> highlightBounds.top - verticalSpacerPx - dialogHeight
174 | ShowcasePosition.Bottom -> highlightBounds.bottom + verticalSpacerPx
175 | ShowcasePosition.Default -> {
176 | if (targetRect.center.y > screenHeight / 2 + verticalSpacerPx) {
177 | highlightBounds.top - verticalSpacerPx - dialogHeight
178 | } else {
179 | highlightBounds.bottom + verticalSpacerPx
180 | }
181 | }
182 | }
183 | }
184 | ) {
185 | content(highlightBounds)
186 | }
187 | }
188 |
189 | @Composable
190 | fun Float.toDp() = with(LocalDensity.current) {
191 | toDp()
192 | }
--------------------------------------------------------------------------------
/showcaseview/src/main/java/com/joco/showcaseview/highlight/HighlightProperties.kt:
--------------------------------------------------------------------------------
1 | package com.joco.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 | )
--------------------------------------------------------------------------------
/showcaseview/src/main/java/com/joco/showcaseview/highlight/ShowcaseHighlight.kt:
--------------------------------------------------------------------------------
1 | package com.joco.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 | }
--------------------------------------------------------------------------------