Full width home advertisement

Windows

Android ROMs

Post Page Advertisement [Top]

Kodular

How to Create Modern Rounded Buttons in Kodular?

Rounded Buttons using 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
Add Card View

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)
Customize Card

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

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

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.
Add Gradient Effect

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

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.

You May Also Like

No comments

Post a Comment

Bottom Ad [Post Page]