How to Create Modern Rounded Buttons in Kodular?

Use of Rounded Buttons is more in fashion in modern App design. Buttons provide an interactive experience to users and make your apps useful. Also, buttons have a psychological effect on users, so choice of button style, button color etc. are of vital importance.

In Kodular we don't have much of a customization options for buttons. They are just simple flat and boring. They have an option for rounded shape but that doesn't work as expected. So, today I will share a method to create highly customizable buttons in Kodular without using any third party extension. So, let's see how we can do that.

Here to create buttons, we won't use the button component, we will use the Card View component from the Layout section instead. Card View offers such customization options that can be used to create awesome button designs.

So, let's create a Rounded Button!

Steps to Follow

1. First add a Card View to the Screen

2. Then change its properties as shown below:

• Align Horizontal, Align Vertical >>> Center
• Background Color of your choice
• All Padding >>> 0
• Corner Radius >>> 16 (depends on button/card size)
• Elevation for shadow effect (optional)
• Full Clickable >>> Enable
• Height >>> 50 pixels (as you wish)
• Width >>> 160 pixels (as you wish)

3. Then add a Label Component to it for button text. Change its properties according to your wish.

4. Hence, our fully functional Rounded Button is created.

Adding Gradient Effect

You can also add Gradient Effect to the Rounded Buttons by following my guide:
How to use Color Gradient in Kodular and other App Inventor based platforms?

But for gradient effect to work you have to add a Horizontal or Vertical Arrangement inside the Rounded Button.

Then follow the Gradient Effect guide or watch the tutorial video blow to add gradient of your choice.

Hence, you design your apps like a pro without using any third party extension for rounded buttons.

Video Tutorial

Download

Download the AIA file for the App UI Design with Rounded Buttons as shown in the featured image:

Rounded_Buttons.aia


What do you think, where are you going to use this trick? Let everyone know in the comment section.