comparekit

CompareKit
Before/after image comparison for Kotlin Multiplatform

Maven Central · Install · Quick Start · Changelog · License

A Compose Multiplatform library for interactive before/after image sliders. One composable, Android + iOS, no platform-specific UI code.

Highlights

• Horizontal and vertical sliders
• Synced pinch-zoom and pan (both images stay aligned)
• Custom thumb, divider, labels, and gestures
• Auto-scrub animation (PingPong, RevealOnce)
• Coil image loading via CompareImageSource
• Hoisted SliderState for full control
• Accessibility: slider semantics, progress, and keyboard navigation

Platforms: Android (minSdk 24), iOS (iosArm64, iosSimulatorArm64)

Add to your shared commonMain dependencies:

implementation("io.github.usmandev0:comparekit:0.1.4")

Requirements: Kotlin 2.4+, Compose Multiplatform 1.11.1+

# gradle/libs.versions.toml
[versions]
comparekit = "0.1.4"

[libraries]
comparekit = { module = "io.github.usmandev0:comparekit", version.ref = "comparekit" }

// build.gradle.kts
commonMain.dependencies {
    implementation(libs.comparekit)
}

@Composable
fun PhotoComparison(before: Painter, after: Painter) {
    BeforeAfterSlider(
        before = before,
        after = after,
        modifier = Modifier
            .fillMaxWidth()
            .height(280.dp),
    )
}

Drag to compare. Starts at 50% by default.

val state = rememberCompareSliderState(initialProgress = 0.5f)

BeforeAfterSlider(
    before = before,
    after = after,
    state = state,
)

BeforeAfterSlider(
    before = before,
    after = after,
    cornerRadius = 12.dp,
    dividerColor = Color.White,
    thumbSize = 40.dp,
    beforeLabel = { CompareLabel(text = "Before") },
    afterLabel = { CompareLabel(text = "After") },
)

BeforeAfterSlider(
    orientation = SliderOrientation.Vertical,
    before = before,
    after = after,
    modifier = Modifier.fillMaxWidth().height(240.dp),
)

BeforeAfterSlider(
    before = before,
    after = after,
    animationMode = CompareAnimationMode.PingPong,
    autoScrubDurationMillis = 2500,
    pauseAutoScrubOnInteraction = true,
)

BeforeAfterSlider(
    before = CompareImageSource.url("https://example.com/before.jpg"),
    after = CompareImageSource.url("https://example.com/after.jpg"),
)

Pinch (or use the scroll wheel) to magnify both images with the same transform. While zoomed, drag the image to pan; drag near the divider to keep comparing. Double-tap resets zoom, then a second double-tap resets the slider.

val zoomState = rememberCompareZoomState(maxScale = 4f)

BeforeAfterSlider(
    before = before,
    after = after,
    zoomEnabled = true,
    zoomState = zoomState,
)

Pass zoomEnabled = false to keep the original drag-only behavior.

• Drag — move the slider (or pan when zoomed, away from the divider)
• Pinch / scroll wheel — zoom both images together
• Double tap — reset zoom if magnified, otherwise reset the slider to center
• Long press — onLongPress callback

BeforeAfterSlider(
    before = before,
    after = after,
    onDoubleTap = { /* reset feedback */ },
    onLongPress = { /* action */ },
)

The slider exposes progress semantics (progressBarRangeInfo, setProgress, stateDescription) and keyboard support (arrows ± step, Home/End). Images stay decorative; describe them via optional params when needed.

BeforeAfterSlider(
    before = before,
    after = after,
    contentDescription = "Photo retouch comparison",
    beforeContentDescription = "Original photo",
    afterContentDescription = "Edited photo",
    progressStep = 0.05f,
)

Package: com.usmandev.comparekit.beforeafterslider

git clone https://github.com/usmandev0/comparekit.git
cd comparekit
./gradlew :androidApp:installDebug

The demo covers basic usage, Coil loading, customization, labels, gestures, orientation, live controls, auto animation, accessibility, and synced zoom/pan.

See CHANGELOG.md for release history.

1. Fork the repo
2. Create a feature branch
3. Open a Pull Request

./gradlew :CompareKit:compileAndroidMain
./gradlew :CompareKit:compileKotlinIosSimulatorArm64

Apache License 2.0 — see LICENSE.

Author: Usman (@usmandev0)

If CompareKit helps your project, consider starring the repo on GitHub.