Custom Toggle Button in Jetpack Compose.

Jayant Kumar🇮🇳
2 min readJan 6


Hello everyone , In this post we will see how to create custom Toggle Button in Jetpack Compose. Let’s see the demo.

Open Color.kt file and paste the below colors.

First we will make a white circle of toggle button.

In the above code , we have created a composable function and inside this we put Card and given the circular shape and white color.

Now let’s come into Custom toggle button, like when we click on that it will ON/OFF.

You can see in the above code we have created a composable function, inside this we have a Card , we are changing the background color and White Circle position in on click and updating the data in onUpdate(Boolean) lambda function.

Now Use this function where ever you want

By default we passed the selected value to “false” and whenever we click on card it will change the value and update into isToggle.

That’s all for today my friends, Hope you enjoyed and learn something new from this post :)



Jayant Kumar🇮🇳

My name is jayant, i am a youtuber and software Engineer from India 🇮🇳