I want to change the color of buttons after a user clicks on them
1 Like
You can just use 2 buttons, for now.
Hi Henry,
As AJAY states, just add 2 buttons and change the visibility based on the conditions. This feature is already planed and can be seen in the road map here
I’ve tried the visible non visible 2 button approach but I struggle to get the buttons to stay where I want them to be. Am I right that’s because you cant have one overlapping (on top of) the other?
2 Likes
Just add them under each other 
I tried that but they move. When I put them next to each other they stay put. I did change the style to fix to top but they still jump around. Is that maybe only in the web preview?
@speakupboy, it’s not just in the webview. Here’s what I did.
- On one screen I have a group of 4 buttons. On that first screen I changed the color of the 1st button to what I wanted (clicked). Let’s call it DFDFDF, 4D4D4D, 4D4D4D, 4D4D4D.
- I created a second screen. On this screen I have the buttons 4D4D4D, DFDFDF, 4D4D4D, 4D4D4D.
- I created a third screen. On this screen I have 4D4D4D, 4D4D4D, DFDFDF, 4D4D4D.
Hope that helps get you to where you want to go.
I have had the same problem. There is an example of a follow button that changes in this tutorial that might help Creating the Follow Function in Adalo (Followers and Following Others).
Hopefully this is a just a temporary work around until conditional states is added.
Yes, 3 in one state, and 1 in another. I group them, copy them to a new screen. You can also do as @zensiblesolutions says, but depending on your use case you may have to tweak the layout or position of the buttons so that the appearance fits well on different devices. I find it quicker to just create different screens.
@bakerofideas yep in the end that’s what I did- another screen. In the end it may not be a bad thing as it’s a button that chooses between showing 2 different lists and having a second screen means that the other list is only drawn from the database if the user selects the option.
It’s just the OCD in me that hates having 2 screens that are identical except for one part! 
@PaulDJ87 yep thanks for that video. It confirms the whole moving button thing I was having and you use it as a feature! 
i’ve switched to using toggle buttons, they’re working pretty well for me
@speakupboy & @PaulDJ87 - How did you all resolve the moving buttons? Having different screens isn’t an option for me (at least I think) since I’m using a Custom List with vary lengths.
I watched the Creating the Follow Function in Adalo Video and I couldn’t figure out how they keep the Follow and Unfollow buttons in the same position. I even did the ALT + Click to create a new button, drag it down slightly, make it an outline and changed the visibility based on the rules I wanted.
What am I missing? Here’s a screenshot for what I have right now which may be helpful.
@zachbharris - Any chance you can get me headed in the right direction here? Is it something to do with Edit Styles > Fixed Top? Feel like I’ve tried everything and can’t figure it out. Thanks!
Typically you can place a white rectangle behind these two buttons to act as a container and then group all 3 together. It’s also very important that the buttons just touch, not overlap or have any separation.
3 Likes
I thought Adalo was working on states on buttons, is this the case? Would be awesome! Since we can have multiple actions now, but can’t have multiple states, which makes multiple actions kinda useless often.
This is currently in planned status, hopefully we’ll have it soon!
1 Like
Thanks for sharing! I hope so!