Overlaying 2 icons for a favorite component

Get Help Design
1

Hi,

I am creating a meditation app. I would like to add a “Favorite” feature: when a user is listening to a song, he can add it as a favorite song and when a song is already a favorite one, the user can remove it from favorites.
To do that, I would like to do like normal apps (like Spotify):

  • When the users clicks on the empty heart icon, the icon disappears (with the “Sometimes visible” feature in Adalo), the song becomes a favorite and a full heart icon appears, at the same place
  • When the users clicks on the full heart icon, the icon disappears, the song is not a favorite anymore and the empty heart icon appears, at the same place

So it pretty works when I do that, except the 2 icons are not overlayed:

Capture d’écran 2022-03-19 à 10.28.04
Capture d’écran 2022-03-19 à 10.28.04700×1070 22.2 KB

Capture d’écran 2022-03-19 à 10.27.57
Capture d’écran 2022-03-19 à 10.27.57694×1012 20.7 KB

Whereas I put them at the same place (one on top of another):

Capture d’écran 2022-03-19 à 10.35.08
Capture d’écran 2022-03-19 à 10.35.082610×1460 174 KB

Do you know how I could do please to overlay the 2 icons?

Thank you in advance!

2

Hi Gary,

You can do this with a Toggle too. Then no need two icons. But if you do this with two icons add a rectangle too for alignment.

You can see here how Mario created this :

Thank you

3 Likes
3

Hi Dilon,

Thank you for your help! I tried to add the rectangle:

Capture d’écran 2022-03-19 à 11.04.50
Capture d’écran 2022-03-19 à 11.04.501662×654 32.4 KB

but still the 2 icons are not overlayed, maybe it is not possible with Adalo?

Thanks a lot in advance,

Gary

4

I can see only one icon in the screenshot? Does the other icon is top of the other icon?

Or you can try the Toggle.

1 Like
5

Yes the first icon is on top of the second one

6

Can you try like this?

image
image1296×522 26.8 KB

1 Like
7

indeed I did not :slight_smile: not it works!

Thanks a lot Dilon!

1 Like
8

Your Welcome Gary!

I didn’t understand :slightly_smiling_face: It’s working right?

9

Yes sorry it works :slight_smile: (I wanted to say “now it works” :sweat_smile:)

1 Like
10

The best option is with toggle. It is the easiest, the fastest and then it is easy to manage who gave it. The more buttons and visibility you add, the slower the action and navigation of your app will be.

2 Likes
11

Hey Gary, I have to agree with @Lofi that the “toggle” component will be much better for your UX.

The tutorial video that I made shows how to do the rectangle+2 icons but the toggle component is much faster to respond to the click than the 2 icons with visibility settings.

2 Likes
12

Yep me too! That’s why I mentioned it first :slightly_smiling_face:

2 Likes