Creating views in Jetpack Compose is really easy but not all components have onClick listeners, this is where we can use either Clickable or Toggleable . We can use it to wrap our components and provide an onClick listener to them.

Beginning with Android Studio 4.0 Canary 1, you can preview your composable functions within the IDE. This is a really cool feature, you should download this Android Studio version, if you want to play with Jetpack Compose.

In this blog post we will be exploring these two components and understand common use cases where these components can be used. For instance a component like Button in Jetpack Compose which provides an onClick listener is using Clickable under the hood.

If you are interested in exploring other components in Jetpack Compose you can check out the series of articles that I have written.

Series Pit Stops

Let’s explore Clickable.

We need to include the following dependency for both Clickable and Toggleable .

Lets have a look at the method signature of Clickable .

We can define what happens when the user clicks on a Clickable component in the onClick method. A Clickable component does not provide a touch feedback for that we need to wrap our Clickable inside a Ripple component. If we are doing so then consumeDownOnStart should have a false value otherwise it can be true. It is used to consume down events. Finally whatever we put inside the lambda becomes clickable.

Lets see how we can use it!

In this simple example, we are displaying a toast message when the user clicks on our Clickable component. We have wrapped it around a Text component.

We can use Toggleable for simpler situations. Toggleable is useful for components that need to maintain 2 states, like a button that is enabled or disabled at a time. You can think of Toggleable as a simplified version of Clickable .

Let’s have a look at its method signature.

Here value is used to define the initial state of Toggleable whether it is on or off. You can think of onValueChange as the onClickListener , here we define what should be done when Toggleable is clicked and change the state of the Toggleable . We will get a callback whenever something that is inside the lambda gets clicked.

The above code snippet is quite self explanatory. We are providing a default value to our Togglleable and then showing a Toast message when the user clicks on the Text component.

Internally both Clickable and Toggleable are using PressReleasedGestureDetector which fires a callback when a press/click is being released. This is the reason why both of them have similar properties.

Now after creating a custom component in Jetpack Compose, you can easilly add an onClick listener by using either Clickable or Toggleable .

Jetpack Compose is still in developer preview, there will be breaking changes in the future so some of the things that I mentioned might change over time.

Thanks for reading! If you enjoyed this story, please click the 👏 button and share it to help others!

If you have any kind of feedback, feel free to connect with me on Twitter.