Button • Custom: Icon, Radius, Border, Color, Gradient, HTML Text, Text Alignment

[Joejsanz]

Button
Custom: Icon, Radius, Border, Color, Gradient, HTML Text, Text Alignment.

Some sample screenshots

---

SetButton

Initialize the button with the values ​​you set, the image shows how to do it.

Color input can be in Hexadecimal, RGB, and AI2 color blocks.

---

SetButtonShadow

Sets shadow behind the button.

Sets a list of lists with the values ​​for the shadow.

• I made the Shadow function to show in which position the values ​​go and for greater convenience.
  • But you can also pass just a list instead of the Shadow function.

Example of List

---

Shadow

Adds shadow to buttons.

Details

• color: Shadow color, in RGB, Hexadecimal or AI2 color blocks.
• spread: Shadow distance.
• offsetX: Horizontal offset of the shadow.
• offsetY: Vertical offset of the shadow.
• opacity: Opacity of the shadow, starting from 0.1.
• blur: It's recommended to set the value to 12.

It's recommended to set minimum values ​​so that the shadow is not too large, since it will make the button reduce its size taking its place.

---

RemoveButtonShadow

Removing the shadow increases the size of the button. Recommendation: If you add a shadow, don't remove it unless you configure the button correctly.

I have it in mind to fix it, but I don't know when yet.

---

ChangesButtonColors

Changes button colors dynamically.

Remember that you can put transparent buttons.

---

SetHtmlTextWithAlignments

Add text in html and alignment.

Alignment options:
center, left, right, top, bottom.

Screenshots with examples of buttons with and without HTML and alignment.
And the button below with transparency.

Screenshots

---

Update v1.0.3
Mar 22, 2025.

• The buttonShadows parameter has been separated from the SetButton function.

• Helper blocks have been added for the imagePosition parameter of the SetButton function and the alignments parameter of the SetHtmlTextWithAlignments function.

• Previously, the button only accepted two input colors; you couldn't enter more or less colors without getting an error.

  • Now, the button can accept one color or more than two colors for a gradient.

• A function has been added to dynamically change the button's color.

• A function has been added to remove the shadow. (Removing the shadow increases the button's size.) Recommendation: If you add a shadow, don't remove it unless you configure the button correctly.

• A function has been added to add HTML text and alignment.

---

aiaProject:
Button.aia (31.1 KB)

Extension v1.0.3.
joejsanz.joedevbutton.aix (17.4 KB)

---

minSdk: 21
maxSdk: 34
JDK: 11

Built using: FAST-CLI v2.7.0

---

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