Adding swipe gesture handling to a Compose View

Question

Cannot find any example code. Since I didn't see any gesture classes, I just went to the regular docs and those center on having the Activity setup a GestureRecognizerCompat, which does not work. Setting it up works, but detection of swipe or tap does not happen (in the Emulator). In SwiftUI there are handlers for Gestures. Asked on the Compose Slack Channel and was told to look for the FooGestureDetector composable functions.

Looking for some sample code. There is a Compose Tutorial at long last, and it's fine for what it is, but your app does very little when you are done. I also looked at the sample project on GitHub, which is for creating Posts to a News site. Has some interesting stuff, but no gestures.

Main goal is just to have a number of Cards and the ability to swipe through them (a la ViewPager(1/2) which is also not yet available in Compose).

I did manage to detect a click on the view, like this:

@Composable
fun PreviewPane(name: String, info:String) {
    val pagenumber = +state { 0 }

    CustomTheme{
        Column(
            crossAxisSize = LayoutSize.Expand,
            modifier = Spacing(16.dp)
        ) {
        Clickable(onClick = { Log.d("DEMO", "click detected..")}) {
            Text(text = name, style = TextStyle(fontWeight = FontWeight.Bold))
            Text(text = info)
            Text(text = "${pagenumber.value}")
        }

        Row {
            Button(text = "Back", onClick = {
                if (pagenumber.value > 0) pagenumber.value--
                Log.d("DEMO", "button clicked..")
            })
            Button(text = "Next", onClick = {
                pagenumber.value++
                Log.d("DEMO", "button clicked..")
            })
        }
    }

    }
}

This works, and I do see the log message (notice I am not wrapping the buttons with the Click directive). But what I really want is swipe detection of the outer view, that contains all these components.

Answer 1

@Rob If you need only view pager you could check this Gist for ViewPager, I create a sample for ViewPager, Please copy the ComposeViewPager.kt.kt from the Gist and sample below.

Note: I take this code from Leland Richardson Git repo and modified according to my need.

Ex:

val listItem = arrayListOf<String>("One", "Two", "Three", "Four", "Five")

@Composable
fun FullViewPagerSample() {
    Box {
        ViewPager(
            items = listItem
        ) { listItem, itemWidthInDp ->
            ViewItem(
                item = listItem,
                normalWidth = itemWidthInDp
            )
        }
    }
}


@Composable
fun ViewPagerSample() {
    val configuration = ConfigurationAmbient.current
    val screenWidth = configuration.screenWidthDp.dp
    val posterWidthDp = screenWidth * 0.6f
    Box {
        ViewPager(
            items = listItem, width = posterWidthDp
        ) { listItem, itemWidthInDp ->
            ViewItem(
                item = listItem,
                normalWidth = itemWidthInDp
            )
        }
    }
}

@Composable
fun ViewPagerSampleWithYDeltaAnimation() {
    val configuration = ConfigurationAmbient.current
    val screenWidth = configuration.screenWidthDp.dp
    val posterWidthDp = screenWidth * 0.6f
    Box {
        ViewPager(
            items = listItem, width = posterWidthDp, bottomYDelta = 50f
        ) { listItem, itemWidthInDp ->
            ViewItem(
                item = listItem,
                normalWidth = itemWidthInDp
            )
        }
    }
}

@Composable
fun ViewItem(
    item: String,
    normalWidth: Dp,
    modifier: Modifier = Modifier,
    isScrollable: Boolean = true
) {
    ScrollableColumn(
        modifier = modifier
            .width(normalWidth)
            .padding(10.dp)
            .clip(RoundedCornerShape(10.dp))
            .background(Color.Red),
        contentPadding = PaddingValues(posterPadding),
        isScrollEnabled = isScrollable,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            item,
            fontSize = 24.sp,
            color = Color.White
        )
    }
}

And the result will be like,