Button • Customizing buttons • Icon, Radius, Gradient

[Joejsanz]

This extension gives you options to adjust corner radius, choose gradient colors, add asset images to place next to text as icons, and set outlines.

---

SetButton

• buttons: The list of buttons to customize.
• cornerRadius: The radius of the button's corners (in pixels).
• colors: A list of colors in hexadecimal format for the gradient (for example, YailList.makeList(new String[]{"#FF0000", "#00FF00"})).
• elevation: The elevation of the button (in pixels).
• imageName: The name of the image found in the assets.
• imagePosition: The position of the image (1: top, 2: right, 3: bottom, 4: left).
• imageWidth: Image width (in pixels; use -1 for original size).
• imageHeight: Image height (in pixels; use -1 for original size).
• borderColor: Outline color in hexadecimal format (for example, "#000000").
• borderWidth: Outline thickness (in pixels).

---

SetShadow

• buttons: The list of buttons to add the shadow to.
• radius: The radius of the shadow (in pixels).
• dx: The X-axis offset of the shadow (in pixels).
• dy: The Y-axis offset of the shadow (in pixels).
• color: The color of the shadow in hexadecimal format (e.g. "#000000").

Note: This shadow is for the button text.
For the shadow that goes under the button, I'm still working on it.

---

Update:

Function inputs have been completely changed, they now accept lists of buttons and each parameter also accepts lists to individually configure each button, if you have a list of buttons with more than 1 button and in the parameters only the first button is configured, the other buttons will take those settings.

Color inputs now accept native App Inventor colors and colors in hexadecimal.

---

Examples:

---

---

---

---

At the request of @HarshVardhanSolanki , instead of accepting values ​​from a single button, a list of buttons was implemented.

And at the request of @Kevinkun , AI2 color inputs are now also accepted.

---

---

Update • Oct 22, 2024.

The method has been updated to be able to obtain and display the images in the button while in companion.

The imagePosition input has been changed from int to String
Now instead of using: 1, 2, 3 and 4, you can use: "top", "right", "bottom" and "left".

---

---

Extension:
joejsanz.joedevbutton.aix (13.5 KB)

---

Thanks

[uskiara]

Awesome extension !

[Joejsanz]

Thank you so much @uskiara

[HarshVardhanSolanki]

Nice extension, It will help us alot in UI enhancements.

[Joejsanz]

Thank you so much @HarshVardhanSolanki

[HarshVardhanSolanki]

I give you a suggestion, register button aside not with the main component, use id feature in the main block, it will help user to register button or buttons in two, but designs in a one.

1. Register single button block

2. Register Buttons list block

3. SetShadow for list

4. SetShadow for button

I hope you got my points.

[Usane]

Fantastic! Finally customized buttons. Thank you.

[Joejsanz]

@HarshVardhanSolanki

@Joejsanz

Note: This shadow is for the button text.
For the shadow that goes under the button, I'm still working on it.

I had already implemented the shadow behind the button, but I removed that function because when clicking the button, the shadow disappeared, then I managed to make it stay, but I had to remove the interaction of the button with the native events of App Inventor.
So for now the shadow will have to wait a bit.

• This is a look at what was done, the shading is very faint but it looks good.....

---

@HarshVardhanSolanki

use id feature in the main block

About using ID in the block, it would be nice if I created some events to identify which block was clicked, but I don't have any events created, since this extension works with App Inventor's native events.

Or I don't know if you mean something different and I misunderstood.

@HarshVardhanSolanki

• Register Buttons list block
• SetShadow for list

I imagine you suggest the list of buttons to put the same style on that list and not use too many blocks?

[Joejsanz]

Thank you so much @Usane

[HarshVardhanSolanki]

@Joejsanz

I imagine you suggest the list of buttons to put the same style on that list and not use too many blocks?

Yes

[Kevinkun]

it will be better if the color socket can accept AI2 color.

[Joejsanz]

@HarshVardhanSolanki Your suggestion sounds good, I'll check that out.

[HarshVardhanSolanki]

Sure, Also Kevin's suggestion will very helpful after sockets accepts the Ai2 colors.

[Joejsanz]

@Kevinkun You're right, I'm going to implement that.

[Joejsanz]

Update:

@Joejsanz

Function inputs have been completely changed, they now accept lists of buttons and each parameter also accepts lists to individually configure each button, if you have a list of buttons with more than 1 button and in the parameters only the first button is configured, the other buttons will take those settings.

Color inputs now accept native App Inventor colors and colors in hexadecimal.

---

Examples:

---

---

[uskiara]

Dear @Usane,
while this extension is still really awesome and powerful (@Joejsanz don't stop to develop yours !!!) please do not forget these two:
@gordonlu310 's com.gordonlu.buttonicons.aix
and
@TIMAI2 's uk.co.metricrat.buttonmaticon.aix

Now we have a "big choice" for customizing buttons.
Great !

[HarshVardhanSolanki]

Great you listen, best you built.

[Usane]

You are right but, those are not focusing on shaping the button itself. For example I really missed the radius of the fillets. Now we have it. Now I miss the triangle, hexagon and star shapes, haha.

[Maximo_Aguilar]

excelente

[TechInterest]

8.827912/10
Pros:

• Everything except cons
  Cons:
• No button shadow but text shadow