I have a button working using native icons. I want to use my custom art on the buttons instead.
I have created a transparent rectangle instead of button as the base, and set it’s functionality.
I have the two image components (reacted state and unreacted state) and the new transparent rectangle placed on the parent rectangle. They are the same size. I know this is a known issue but can’t decipher how to untangle it.
When i put the unreacted image in the transparent rectangle, it nests in the rectangle instead of sitting on top of it in the components. And when i lay the reacted image on that, it nests inside the unreacted image.
The net result is that the unreacted image (always visible) never shows; the reacted image DOES show up when i click the new “button” (the transparent rectangle).
Hey @obrienpaule, the way to handle this is two separate rectangles, each managing its own state:
Rectangle 1: Unreacted image inside, visible when not reacted. The action updates reacted = true
Rectangle 2: Reacted image inside, visible when reacted = true. The action updates reacted = false
Place both at the same position on screen. Each rectangle has its own visibility condition and its own tap action, with no transparent overlay needed, and no parent container needed.
@obrienpaule if I understood you correctly:
try to rearrange the elements on the left pane, when you select a screen.
Rectangles and Images both “catch” other elements and puts them inside, when you drag them on the screen (this was introduced along with Adalo 2.0), so you may want to rearrange elements manually.
Another option is to prepare the elements in different parts of the screen, and then move them to the final destination with leyboard arrow keys (1px) or shift+arrows (10px).
@Ali-Bazzi your approach requires rewiring my database just to try if it works. @Victor why isn’t there a “un-nest” or “don’t nest” option for elements?? It seems crazy that Adalo auto-nests components just because you stack them, AND doesn’t allow you to undo it OR to drag them out of each other in the left panel. It’s so frustrating.
I am not quite sure what issues did you find with @Ali-Bazzi ‘s and my advices. Did you try them? What didn’t work for you? Why do you think any database changes are needed? What exact issue did you face in elements’ rearranging on the left panel? Did “undo” (ctrl+Z) work for you?
I have created a couple of video with explanations on how rectangles and images work in Adalo:
Just in case, if you would like to suggest an improvement for Adalo, you can do it in the respective section of this forum.
Also please let me remind you that Adalo Community Leaders are not Adalo employees, are not paid by Adalo and have quite limited influence on product development. We spend our personal time helping other Makers to build their apps and sharing our experience, so that everyone can benefit from it.
@Victor great resource for new makers, the visual explanation of the component tree behaviour is exactly what this topic needs.
@obrienpaule no database changes needed at all, the two rectangles approach is purely a UI structure change. You’re just reorganising how components sit in the component tree. Your database stays exactly as it is. The “reacted” condition is a simple true/false toggle stored on the logged-in user record. Give it a try and let me know if you get stuck on a specific step.
It would be cool if designing was easier, and followed proven approaches.
i.e. layers, locking layers, hide show, better snapping, design libraries, a way to understand where the top of the screen is; as opposed to knowing where the bottom of the notch is, I could go on, and on, and on…
Photoshop, Canva, Figma, and many others, have a similar approach to designing, they work, and may be worth emulating.
Designing is the most frustrating, time-consuming, thing about Adalo.
It’s surprising how easy, and almost how well the database, and actions are to use.
Yet, the experience of designing leaves a lot to be desired.
@C3PO with all my respect, I would disagree with your “Designing is the most frustrating” statement.
I’ve been working with quite a lot of various visual app development platforms. Adalo offers an unmatched combination of the easy and quick drag’n’drop design, low starting learning effort, no need for specific design-related knowledge on the one side; and a lot of advanced capabilities - on the other side - with which a pretty complex app can be made. I’ve been working on multiple projects with apps with 500+ screens and some collections’ IDs surpassed 100K (fortunately we implemented removal of old records ); so I have a bit of experience (and knowledge about when NOT to use Adalo).
Based on my experience, creating a pretty complex screen on Adalo takes ~3-4 times less than doing that in other visual builders. Yes you can’t make it pixel-perfect; but at the same time, with some practice, you can create a full nice-looking app version within 1-2 days, and the same app would take a week or two in other platforms. You will have to accept some compromise of course - but that’s the usual choice.
To add more, the lack of some basic UI capabilities, like a conditional-state button with an image on it - discussed here - is not an Adalo platform limitation per se. Technically, I have developed multiple private components for myself which do things like this. It’s just the problem of resources; Adalo Team had many things to fix before, and didn’t have time to focus on components. Now you can see how new long-awaited components appear, and I hope the team will keep the pace.
@obrienpaule, did the great tutorial videos from Victor and text explanation from Ali help you out? If you’re still stuck, feel free to share a quick screen recording so we can take a look at what’s going on!
@C3PO , I hear you, I’ve noted your feedback regarding the design tools—thanks for sharing your perspective! I also appreciate Victor chiming in to share his experience; that kind of community collaboration is what keeps us moving forward. If you have any other suggestions regarding those design tools, please feel free to create a new topic under Roadmap > Feature Requests category or send me a DM.
); so I have a bit of experience (and knowledge about when NOT to use Adalo).