Step Counter App in Wear OS

If you're a fan of fitness trackers or wearables, chances are you've already seen a step counter app in action. But have you ever wanted to build one yourself? In this complete tutorial, we’ll walk you through creating your very own Step Counter app for Wear OS using Jetpack Compose, Android’s modern UI toolkit.

We’ll use Jetpack Compose, ViewModel, and the step detector sensor provided by the Android operating system. Whether you’re just getting started with Compose or looking for a wearable-specific project, this is the perfect guide for you.

🔧 What We’ll Build

We’ll create a minimal yet functional Wear OS app that:

• Detects and displays your steps using the step detector sensor.
• Reactively updates the UI with the current step count.
• Handles activity recognition permission.
• Follows best practices with ViewModel and state handling in Compose.

🧰 Tools & Tech Stack

• Jetpack Compose – UI toolkit
• ViewModel – Logic holder across configuration changes
• SensorManager – Access to step detector
• Wear OS Emulator or Physical Watch – To test
• Kotlin – Our primary programming language

🛠 Step 1: Create a New Wear OS Project

Open Android Studio and select New Project > Empty Wear OS Compose Activity.

• Make sure to select:
• Kotlin
• Minimum SDK: API 26 (Android 8.0 Oreo) or higher
• Name your app something like StepTrackerWear

After the project is created, clean up your MainActivity.kt and theme if needed.

📦 Step 2: Add Required Dependencies

In your build.gradle(:app), ensure these dependencies are present:

    // ViewModel for Compose
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.9.0")

// ViewModel for Android application (used with Application context)
    implementation("androidx.lifecycle:lifecycle-viewmodel:2.9.0")

// If you use LiveData or lifecycle-aware components (optional)
    implementation("androidx.lifecycle:lifecycle-livedata-ktx:2.9.0")

Sync your project after making changes.

🧠 Step 3: Create the ViewModel for Step Tracking

We'll create a StepCounterViewModel that listens to the step sensor and holds the step count using mutableIntStateOf.

class StepCounterViewModel(application: Application) : AndroidViewModel(application), SensorEventListener {

    private val sensorManager = application.getSystemService(Context.SENSOR_SERVICE) as SensorManager
    private val stepSensor = sensorManager.getDefaultSensor(Sensor.TYPE_STEP_COUNTER)

    private val _steps = mutableIntStateOf(0)
    val steps: IntState get() = _steps  // ✅ Correct

    private var initialSteps: Float = -1f

    fun startTracking() {
        stepSensor?.let {
            sensorManager.registerListener(this, it, SensorManager.SENSOR_DELAY_UI)
        }
    }

    override fun onSensorChanged(event: SensorEvent?) {
        event?.let {
            if (initialSteps < 0) {
                initialSteps = it.values[0]
            }
            _steps.intValue = (it.values[0] - initialSteps).toInt()
        }
    }

    override fun onAccuracyChanged(sensor: Sensor?, accuracy: Int) {}
}

🎓 Why mutableIntStateOf instead of mutableStateOf(0)?

Jetpack Compose introduced specialized state types like IntState for primitive types. It's more efficient and prevents unnecessary recompositions or boxing of values.

🎨 Step 4: Create the UI Screen with Compose

Now, let’s design a minimal user interface that shows the step count in real-time.

@Composable
fun StepCounterScreen(viewModel: StepCounterViewModel) {
    val steps by viewModel.steps
    val stepGoal = 5000
    val progress = steps / stepGoal.toFloat()

    Scaffold(
        timeText = { TimeText() }
    ) {
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            Column(horizontalAlignment = Alignment.CenterHorizontally) {
               Spacer(Modifier.height(18.dp))
                Text("Steps", style = MaterialTheme.typography.title3)
                Text("$steps", style = MaterialTheme.typography.display1)
                Text("www.codingbihar.com")

                CircularProgressIndicator(
                    progress = progress.coerceAtMost(1f),
                    modifier = Modifier
                        .padding(16.dp)
                        .size(100.dp),
                    strokeWidth = 8.dp
                )

                Text("Goal: $stepGoal", style = MaterialTheme.typography.title3)
            }
        }
    }
}

This UI centers the step count and label on the screen, using Wear Compose’s layout components.

🔐 Step 5: Request ACTIVITY_RECOGNITION Permission

Step counting is considered sensitive data, so Android requires runtime permission on API 29+ (Android 10+).

Add this to your AndroidManifest.xml:

<uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />

Now in your MainActivity, request it if not granted:

private val PERMISSION_REQUEST_CODE = 1001

🏗 Step 6: Finalize the MainActivity

Here’s the complete MainActivity.kt setup:

class MainActivity : ComponentActivity() {
    private lateinit var viewModel: StepCounterViewModel
    override fun onCreate(savedInstanceState: Bundle?) {
        installSplashScreen()
        super.onCreate(savedInstanceState)
        viewModel = ViewModelProvider(
            this,
            ViewModelProvider.AndroidViewModelFactory.getInstance(application)
        )[StepCounterViewModel::class.java]

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU &&
            ContextCompat.checkSelfPermission(this, android.Manifest.permission.ACTIVITY_RECOGNITION)
            != PackageManager.PERMISSION_GRANTED) {

            ActivityCompat.requestPermissions(
                this,
                arrayOf(android.Manifest.permission.ACTIVITY_RECOGNITION),
                1001
            )
        }

         viewModel.startTracking()
        setTheme(android.R.style.Theme_DeviceDefault)
        setContent {
            StepCounterScreen(viewModel)

        }
    }
}

Output:

🎯 Optional Enhancements

Now that the base app is ready, here are some ideas to make it even better:

🔘 Add a Goal Tracker

Set a daily step goal and use a circular progress indicator to visualize progress.

🧠 Add Persistent History

Use DataStore or Room to store step counts per day and show a history screen.

🎉 Celebrate Milestones

Use ConfettiCompose or Lottie animations to celebrate when a user hits a goal.

📱 Testing Tips

To test step detection in the Wear OS emulator, go to:

Extended Controls > Sensors > Virtual Sensors > Step Counter

You can simulate steps to check your app’s response.

On a real device, simply start walking and check the live step updates!

🏁 

You’ve just built your own Step Counter App for Wear OS using Jetpack Compose! This app reads sensor data, manages permission, and displays updates in real time using modern Android architecture components.

This was a great beginner-friendly wearable project. With just a few more steps, you can turn this into a full fitness tracking app.

💡 What's Next?

If you’d like a follow-up tutorial on:

• Adding charts to show step trends
• Tracking steps while the app is closed
• Building a full health dashboard app