├── README.md
├── assets
├── banner.png
└── spin-animation.gif
├── build.gradle.kts
├── composeApp
├── build.gradle.kts
└── src
│ ├── androidMain
│ ├── AndroidManifest.xml
│ └── kotlin
│ │ └── chaintech
│ │ └── networkapp
│ │ ├── App.android.kt
│ │ └── theme
│ │ └── Theme.android.kt
│ ├── commonMain
│ ├── composeResources
│ │ ├── drawable
│ │ │ ├── icn_background.png
│ │ │ ├── icn_center.xml
│ │ │ ├── icn_coin.png
│ │ │ ├── icn_gift.png
│ │ │ ├── icn_jackpot.png
│ │ │ ├── icn_sad.png
│ │ │ ├── icn_tick.xml
│ │ │ ├── icn_ticket.png
│ │ │ └── icn_wheel_bg.xml
│ │ ├── font
│ │ │ └── IndieFlower-Regular.ttf
│ │ └── values
│ │ │ └── strings.xml
│ └── kotlin
│ │ └── chaintech
│ │ └── networkapp
│ │ ├── App.kt
│ │ ├── theme
│ │ ├── Color.kt
│ │ └── Theme.kt
│ │ ├── ui
│ │ ├── SpinWheel.kt
│ │ ├── SpinWheelComponent.kt
│ │ ├── SpinWheelItem.kt
│ │ ├── SpinWheelSlice.kt
│ │ └── SpinWheelState.kt
│ │ └── util
│ │ ├── ColorUtil.kt
│ │ └── util.kt
│ ├── commonTest
│ └── kotlin
│ │ └── chaintech
│ │ └── networkapp
│ │ └── ComposeTest.kt
│ └── iosMain
│ └── kotlin
│ ├── chaintech
│ └── networkapp
│ │ ├── App.ios.kt
│ │ └── theme
│ │ └── Theme.ios.kt
│ └── main.kt
├── gradle.properties
├── gradle
├── libs.versions.toml
└── wrapper
│ ├── gradle-wrapper.jar
│ └── gradle-wrapper.properties
├── gradlew
├── gradlew.bat
├── iosApp
├── iosApp.xcodeproj
│ ├── project.pbxproj
│ └── project.xcworkspace
│ │ ├── contents.xcworkspacedata
│ │ └── xcshareddata
│ │ └── IDEWorkspaceChecks.plist
└── iosApp
│ ├── Assets.xcassets
│ ├── AccentColor.colorset
│ │ └── Contents.json
│ ├── AppIcon.appiconset
│ │ └── Contents.json
│ └── Contents.json
│ ├── Preview Content
│ └── Preview Assets.xcassets
│ │ └── Contents.json
│ └── iosApp.swift
└── settings.gradle.kts
/README.md:
--------------------------------------------------------------------------------
1 | # Compose Multiplatform Shake Detection
2 |
3 | CMPShakeDetection is a powerful library designed to bring shake detection capabilities to your Compose Multiplatform applications. Whether you're looking to add fun interactions, hidden features, or intuitive controls, CMPShakeDetection makes it easy to implement shake detection across Android and iOS platforms.
4 |
5 | 
6 |
7 | ## Features
8 | **Cross-Platform:** Works seamlessly with Compose Multiplatform.
9 |
10 | **Easy Integration:** Simple setup and usage.
11 |
12 | **Highly Customizable:** Define custom actions on shake events.
13 |
14 | **Lightweight:** Minimal impact on app performance.
15 |
16 | ## Installation
17 |
18 | Add the following dependency to your `build.gradle.kts` file:
19 |
20 | ```kotlin
21 | commonMain.dependencies {
22 | implementation("network.chaintech:compose-multiplatform-shake-detection:1.0.0")
23 | }
24 | ```
25 | ### iOS Setup
26 | Add the following key to your Info.plist to request permission for motion data:
27 |
28 | ```kotlin
29 | NSMotionUsageDescription
30 | This app uses motion data to detect shakes.
31 | ```
32 | ## Usage
33 |
34 | **Initialize the Shake Detector**
35 |
36 | Create an instance of ShakeDetector in your shared code using rememberShakeDetector():
37 |
38 | ```kotlin
39 | val shakeDetector = rememberShakeDetector()
40 | ```
41 |
42 | **Start Detecting Shakes**
43 |
44 | Start detecting shakes in a LaunchedEffect block:
45 |
46 | ```kotlin
47 | LaunchedEffect(Unit) {
48 | shakeDetector.start()
49 | }
50 | ```
51 |
52 | **Handle Shake Events**
53 |
54 | Use the onShake callback to define what happens when a shake is detected:
55 |
56 | ```kotlin
57 | shakeDetector.onShake {
58 | // Handle Shake Event
59 | }
60 | ```
61 |
62 | **Stop Detecting Shakes**
63 |
64 | Ensure that shake detection is stopped when the Composable is disposed by using DisposableEffect:
65 |
66 | ```kotlin
67 | DisposableEffect(Unit) {
68 | onDispose {
69 | shakeDetector.stop()
70 | }
71 | }
72 | ```
73 | ## Sample Example
74 |
75 | 
76 |
77 |
78 | ```kotlin
79 | @Composable
80 | fun SpinWheel() {
81 | var isSpinning = false
82 | val shakeDetector = rememberShakeDetector()
83 | // Start detecting shakes
84 | LaunchedEffect(Unit) {
85 | shakeDetector.start()
86 | }
87 | shakeDetector.onShake {
88 | if(!isSpinning) {
89 | isSpinning = true
90 | spinState.launchInfinite()
91 |
92 | MainScope().launch {
93 | delay(timeMillis = Random.nextLong(5000, 9000))
94 | spinState.stoppingWheel(Random.nextInt(0, 6))
95 | isSpinning = false
96 | }
97 | }
98 | }
99 |
100 | // Stop detecting shakes when the composable is disposed
101 | DisposableEffect(Unit) {
102 | onDispose {
103 | shakeDetector.stop()
104 | }
105 | }
106 |
107 | Box(
108 | modifier = Modifier
109 | .fillMaxSize()
110 | ) {
111 | Image(
112 | modifier = Modifier.fillMaxSize(),
113 | painter = painterResource(Res.drawable.icn_background),
114 | contentScale = ContentScale.FillBounds,
115 | contentDescription = null,
116 | )
117 |
118 | Column(
119 | modifier = Modifier
120 | .fillMaxSize()
121 | .windowInsetsPadding(WindowInsets.safeDrawing),
122 | horizontalAlignment = Alignment.CenterHorizontally
123 | ) {
124 | Spacer(modifier = Modifier.size(50.dp))
125 |
126 | Image(
127 | modifier = Modifier.width(303.dp).height(144.dp),
128 | painter = painterResource(Res.drawable.icn_jackpot),
129 | contentScale = ContentScale.Crop,
130 | contentDescription = null,
131 | )
132 |
133 | Spacer(modifier = Modifier.size(30.dp))
134 |
135 | Box(
136 | modifier = Modifier
137 | .fillMaxWidth()
138 | .padding(horizontal = 30.dp)
139 | .aspectRatio(1f)
140 | ) {
141 | SpinWheelComponent(spinState)
142 | }
143 | Spacer(modifier = Modifier.size(20.dp))
144 | }
145 | }
146 | }
147 | ```
148 |
149 |
150 | ## Detailed Explanation
151 | - For a detailed explanation and a comprehensive guide, please read the [Medium blog post.](https://medium.com/mobile-innovation-network/shake-it-up-with-cmpshakedetection-integrating-fun-in-compose-multiplatform-79bc360c11e7)
152 | - Followus On [Linkedin](https://www.linkedin.com/showcase/mobile-innovation-network)
153 |
--------------------------------------------------------------------------------
/assets/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chaintech-Network/CMPShakeDetection/9dbadcd284b0014fc650e578520b2c95906af445/assets/banner.png
--------------------------------------------------------------------------------
/assets/spin-animation.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chaintech-Network/CMPShakeDetection/9dbadcd284b0014fc650e578520b2c95906af445/assets/spin-animation.gif
--------------------------------------------------------------------------------
/build.gradle.kts:
--------------------------------------------------------------------------------
1 | plugins {
2 | alias(libs.plugins.multiplatform).apply(false)
3 | alias(libs.plugins.compose.compiler).apply(false)
4 | alias(libs.plugins.compose).apply(false)
5 | alias(libs.plugins.android.application).apply(false)
6 | alias(libs.plugins.android.library).apply(false)
7 | alias(libs.plugins.mavenPublish).apply(false)
8 | }
9 |
--------------------------------------------------------------------------------
/composeApp/build.gradle.kts:
--------------------------------------------------------------------------------
1 | import org.jetbrains.compose.ExperimentalComposeLibrary
2 | import com.android.build.api.dsl.ManagedVirtualDevice
3 | import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi
4 | import org.jetbrains.kotlin.gradle.dsl.JvmTarget
5 | import org.jetbrains.kotlin.gradle.plugin.KotlinSourceSetTree
6 |
7 | plugins {
8 | alias(libs.plugins.multiplatform)
9 | alias(libs.plugins.compose.compiler)
10 | alias(libs.plugins.compose)
11 | alias(libs.plugins.android.application)
12 | }
13 |
14 | kotlin {
15 | androidTarget {
16 | compilations.all {
17 | compileTaskProvider {
18 | compilerOptions {
19 | jvmTarget.set(JvmTarget.JVM_1_8)
20 | freeCompilerArgs.add("-Xjdk-release=${JavaVersion.VERSION_1_8}")
21 | }
22 | }
23 | }
24 | //https://www.jetbrains.com/help/kotlin-multiplatform-dev/compose-test.html
25 | @OptIn(ExperimentalKotlinGradlePluginApi::class)
26 | instrumentedTestVariant {
27 | sourceSetTree.set(KotlinSourceSetTree.test)
28 | dependencies {
29 | debugImplementation(libs.androidx.testManifest)
30 | implementation(libs.androidx.junit4)
31 | }
32 | }
33 | }
34 |
35 | listOf(
36 | iosX64(),
37 | iosArm64(),
38 | iosSimulatorArm64()
39 | ).forEach {
40 | it.binaries.framework {
41 | baseName = "ComposeApp"
42 | isStatic = true
43 | }
44 | }
45 |
46 | sourceSets {
47 | commonMain.dependencies {
48 | implementation(compose.runtime)
49 | implementation(compose.foundation)
50 | implementation(compose.material3)
51 | implementation(compose.components.resources)
52 | implementation(compose.components.uiToolingPreview)
53 | implementation("network.chaintech:compose-multiplatform-shake-detection:1.0.0")
54 | }
55 |
56 | commonTest.dependencies {
57 | implementation(kotlin("test"))
58 | @OptIn(ExperimentalComposeLibrary::class)
59 | implementation(compose.uiTest)
60 | }
61 |
62 | androidMain.dependencies {
63 | implementation(compose.uiTooling)
64 | implementation(libs.androidx.activityCompose)
65 | }
66 |
67 | iosMain.dependencies {
68 | }
69 |
70 | }
71 | }
72 |
73 | android {
74 | namespace = "chaintech.networkapp"
75 | compileSdk = 34
76 |
77 | defaultConfig {
78 | minSdk = 24
79 | targetSdk = 34
80 |
81 | applicationId = "chaintech.networkapp.androidApp"
82 | versionCode = 1
83 | versionName = "1.0.0"
84 |
85 | testInstrumentationRunner = "androidx.test.runner.AndroidJUnitRunner"
86 | }
87 | sourceSets["main"].apply {
88 | manifest.srcFile("src/androidMain/AndroidManifest.xml")
89 | res.srcDirs("src/androidMain/res")
90 | }
91 | //https://developer.android.com/studio/test/gradle-managed-devices
92 | @Suppress("UnstableApiUsage")
93 | testOptions {
94 | managedDevices.devices {
95 | maybeCreate("pixel5").apply {
96 | device = "Pixel 5"
97 | apiLevel = 34
98 | systemImageSource = "aosp"
99 | }
100 | }
101 | }
102 | compileOptions {
103 | sourceCompatibility = JavaVersion.VERSION_1_8
104 | targetCompatibility = JavaVersion.VERSION_1_8
105 | }
106 | buildFeatures {
107 | //enables a Compose tooling support in the AndroidStudio
108 | compose = true
109 | }
110 | }
111 |
--------------------------------------------------------------------------------
/composeApp/src/androidMain/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/composeApp/src/androidMain/kotlin/chaintech/networkapp/App.android.kt:
--------------------------------------------------------------------------------
1 | package chaintech.networkapp
2 |
3 | import android.app.Application
4 | import android.content.Intent
5 | import android.net.Uri
6 | import android.os.Bundle
7 | import androidx.activity.ComponentActivity
8 | import androidx.activity.compose.setContent
9 | import androidx.activity.enableEdgeToEdge
10 |
11 | class AndroidApp : Application() {
12 | companion object {
13 | lateinit var INSTANCE: AndroidApp
14 | }
15 |
16 | override fun onCreate() {
17 | super.onCreate()
18 | INSTANCE = this
19 | }
20 | }
21 |
22 | class AppActivity : ComponentActivity() {
23 | override fun onCreate(savedInstanceState: Bundle?) {
24 | super.onCreate(savedInstanceState)
25 | enableEdgeToEdge()
26 | setContent { App() }
27 | }
28 | }
29 |
30 |
--------------------------------------------------------------------------------
/composeApp/src/androidMain/kotlin/chaintech/networkapp/theme/Theme.android.kt:
--------------------------------------------------------------------------------
1 | package chaintech.networkapp.theme
2 |
3 | import android.app.Activity
4 | import androidx.compose.runtime.Composable
5 | import androidx.compose.runtime.LaunchedEffect
6 | import androidx.compose.ui.platform.LocalView
7 | import androidx.core.view.WindowInsetsControllerCompat
8 |
9 | @Composable
10 | internal actual fun SystemAppearance(isDark: Boolean) {
11 | val view = LocalView.current
12 | LaunchedEffect(isDark) {
13 | val window = (view.context as Activity).window
14 | WindowInsetsControllerCompat(window, window.decorView).apply {
15 | isAppearanceLightStatusBars = isDark
16 | isAppearanceLightNavigationBars = isDark
17 | }
18 | }
19 | }
--------------------------------------------------------------------------------
/composeApp/src/commonMain/composeResources/drawable/icn_background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Chaintech-Network/CMPShakeDetection/9dbadcd284b0014fc650e578520b2c95906af445/composeApp/src/commonMain/composeResources/drawable/icn_background.png
--------------------------------------------------------------------------------
/composeApp/src/commonMain/composeResources/drawable/icn_center.xml:
--------------------------------------------------------------------------------
1 |
7 |
11 |
12 |
18 |