Tutorials

How to Make a Toggle Button with Condition

Learn how conditions in ProtoPie to work to make toggle buttons, and much more.

Fredo Tan
Fredo Tan, Head of Customer SuccessAugust 4, 2021
how to make a toggle button with condition thumbnail

What you will learn

It’s an old tutorial video. UI and assets might look different but the essence is the same!

We are going to make interaction for the toggle button in 2 steps.

  1. The first step is making it move to the right side.
  2. And then as a second step, make it move to the left side.

In the end, you’ll be able to make something like this!

toggle button example using protopie

Step-by-step instructions

Phase 1: Make the toggle move to the right

First, let's make a toggle button move to the right. Add a Tap-Move interactions with Tap being the trigger and Move as the response. Assign both to the toggle-btn layer.

tap-move interactions

The initial x-coordinate of toggle-btn is 120. For the move response, punch in 200 as the x-coordinate the toggle-btn should move to. When you tap toggle-btn, it will move to x-coordinate 200.

But the toggle doesn't move back when you tap it again. So let's expand our current interaction for the toggle button to move to the left.

Phase 2: Make the toggle move to the left

To make the toggle button move to the left—its initial position, we need to use conditions. A condition is something that checks whether a specific requirement has been met. If so, the condition activates the responses underneath. Let's see how this works in practice.

using condition for toggle button

As the initial x-coordinate of toggle-btn is 120, we'll add this at the requirement to be met.

Assign the condition to toggle-btn. Select X as the property and 120 as the value in the condition. This comes down to: if toggle-btn its x-coordinate is 120, make toggle-btn move to x-coordinate 200. In simpler terms, if the toggle button is on the left, move it to the right.

requirement for toggle button to move right

Let's do the same but then the other way around. Create a second condition the same way you made the first one. However, this time the value to be met is 200.

create second condition for toggle button

Add a Move response under this condition. Assign this Move to toggle-btn as well and punch 120 as the x-coordinate to move to.

add a move response under the condition

Try what you made in the preview window. Tap on the toggle and you will see move it right. Tap again and it will move to the left, and so on.

Congratulations!

You've learned how to make a Toggle Button using Condition.