Shake It Up with CMPShakeDetection: Integrating Fun in Compose Multiplatform

Published in

Mobile Innovation Network

3 min readAug 1, 2024

Welcome to the exciting world of shake detection! Imagine your app responding to a simple shake of your device. Whether you want to add a quirky feature, a secret Easter egg, or just a fun way to interact with your app, CMPShakeDetection for Compose Multiplatform has got you covered. Let’s shake things up!

Shake Detection: Because Why Not?

Ever thought, “Hey, what if I could just shake my phone to…”? Now you can! With CMPShakeDetection, adding shake detection to your Compose Multiplatform app is easier than ever. It’s like giving your app a magic wand. Wave (or shake) it, and voilà — cool things happen!

Installation

Add the necessary dependencies to your build.gradle.kts:

commonMain.dependencies {
    implementation("network.chaintech:compose-multiplatform-shake-detection:1.0.0")
}

Setup

iOS
Add the following key to your Info.plist to request permission for motion data:

<key>NSMotionUsageDescription</key>
<string>This app uses motion data to detect shakes.</string>

Usage

Initialize the Shake Detector
Create an instance of ShakeDetector in your shared code using rememberShakeDetector():

val shakeDetector = rememberShakeDetector()

Start Detecting Shakes
Start detecting shakes in a LaunchedEffect block:

LaunchedEffect(Unit) {
    shakeDetector.start()
}

Handle Shake Events
Use the onShake callback to define what happens when a shake is detected:

shakeDetector.onShake {
    //Handle Shake Event
}

Stop Detecting Shakes
Ensure that shake detection is stopped when the Composable is disposed by using DisposableEffect:

DisposableEffect(Unit) {
    onDispose {
        shakeDetector.stop()
    }
}

Example Usage in Compose UI

Here’s how you can integrate the shake detection logic within a Composable function to refresh content:

@Composable
fun ShakeToRefreshView() {
    val shakeDetector = rememberShakeDetector()
    val scaffoldState = rememberScaffoldState()
    var refreshing by remember { mutableStateOf(false) }

    LaunchedEffect(Unit) {
        shakeDetector.start()
    }

    DisposableEffect(Unit) {
        onDispose {
            shakeDetector.stop()
        }
    }

    shakeDetector.onShake {
        if (!refreshing) {
            refreshing = true
            // Perform your refresh action here
            MainScope().launch {
                scaffoldState.snackbarHostState.showSnackbar("Refreshing content...")
                delay(2000) // Simulate a refresh delay
                refreshing = false
                scaffoldState.snackbarHostState.showSnackbar("Content refreshed")
            }
        }
    }

    Scaffold(scaffoldState = scaffoldState) {
        // Your Compose UI here
        Text("Shake the device to refresh content", modifier = Modifier.padding(16.dp))
    }
}

The Fun Part: What Can You Do with a Shake?

Trigger Hidden Features: Shake to reveal hidden features.
Easter Eggs: Shake to find hidden Easter eggs in your app.
Fun Animations: Shake to trigger fun animations or effects.
Interactive Games: Shake to roll dice, shuffle cards, or implement other game mechanics.

The possibilities are endless! And the best part? It’s all super easy to implement with CMPShakeDetection.

Conclusion

In the world of mobile apps, interaction is key. Adding fun, intuitive features like shake detection can make your app stand out and keep users engaged. So why wait? Shake up your development process and bring some fun into your apps today with CMPShakeDetection!

Stay tuned for more cool libraries and tips on how to make your Compose Multiplatform apps even more awesome. Until next time, happy shaking!

All the code and examples it is in this repository.

Connect with us 👇

GitHub