Custom button with click effect

Hello
i want create a button with custom icon and without text

Is it possible to add click effect like this?

I think using this extension ripple effect:
https://community.kodular.io/t/viewaddon-extension-paid/77296/5
And settign the font type face to material icons and pasting the icon name in the text property.Any way i think kodular button has this effect already. :thinking:

2 Likes

It is already on the creator. You can change the effect color here​:down_arrow:

For the icon, change the font to Material Icons and write on TEXT, the name of the icon

Thanks i will try the extension
i tried the tips before but nothing changed.

and yes kodular button have this effect but not when change button image like this:

don’t work when add image to the button

don’t work for me, or i miss something ?

Update , it’s the size very small (6)
work fine now with size > 100

Mark the solution as checked :wink::blush:

The effect need background color to work , that why it didn’t work with images

But what image are you going to use? Only the icon no?

Before i tried with png image , appinventor don’t have the feature to use icons
I see beautiful effect in Kodular companion , the two buttons to change theme / and buy.
How they made it with Kodular? i tried with oval button but the icon can’t placed in the center.

Those aren’t buttons.Those are title bar icons you can create them with this block ( screen component ):
component_method (45)

1 Like

Thank you
i will try it

You’re welcoem.
BTWm if it worked just mark my answer as solution ( take care : that will create icons on the title bar only.No way except that )

1 Like

Thanks , i tried but don’t work
even for a simple example

Do this @seghier

  1. When the screen1 initialize, create a list with items a and b
  2. Then, for each item in list, add menu item (On menu item insert the variable item)

Thanks, but don’t work, am i miss something?

This work

2 Likes

Hi @seghier,
Actully , i told you to use this block -ofc- in menu intialize event:
https://kodular-community-uploads.s3.dualstack.eu-west-1.amazonaws.com/original/3X/c/5/c5056caff181ecba8ea5ca095f4e203ebd53bd46.png

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.