Modern Button UI Design with card view and Video tutorial

Hi friends, I’m Kumaraswamy and in this topic we will learn how to make Modern UI buttons.
This topic contains a video and steps.
*Video is located at the end

Step 1

Take a card view. (Card1)
Properties: -
Alignment (ALL) - Center
Background Colors – Prefer bright colors, ex: - #006CFAFF (Blue), #00FC02FE (Green) etc.
Padding (All) – 0
Corner radius – 30
Elevation – 0
Full clickable – true
Height- 9% or 10% (9% is recommended)
Width- Automatic

Step 2 (H1)

Take a Horizontal arrangement in card view
Properties: -
Align horizontal – Left
Align vertical – Center
Height & Width – fill parent
Background – None

Step 3 (Card2)

Take a card view inside horizontal arrangement
Properties: -
Alignment (ALL) – Centre
Padding at left & right – 20 and other default
Corner radius – 30
Height - The same of the “card ”
Elevation - 0

Background color - #EEEDED34 (Transparent Grey)

Step 4 (Space1)

Take a space next to the “Card2”
Property: -
Width- 2% or 3% (3% is recommended)

Step5 (Label1)

Take a label next to the “space1”
Properties: -
Font size – 20, 21 or 22 (20 is recommended)
Height & width – Auto
Text color – Depends on you
Alignment (Optional) – Center
Font typeface – Your wish, I’m using Comforta Bold

Step5 (Label2)

Now take a label inside “Card2”, this will be the icon for your button
Properties: -
Font size – 22 or 21 (22 is recommended)
Alignment (Optional) -center
Height & width – Auto
Font typeface – Your wish, I’m using Font awesome pro & free solid

Step6 (Decoration1)

This is a very important step to design your UI!
Block: - call decortion1. Set Margin
Component – “Card 1”
Value – “-10”

*And same for “Card2”

Step7 (Enjoy)

After you complete all the 6 Steps, your button is completed!!

Video Toturial

See full video
Please set the corner radius to 30 and not 100
Final Result


AIA file if you need more button to see: -Modren_Buttons.aia (316.4 KB)

My creativity :stuck_out_tongue_winking_eye:

If something is missing then please tell me, like the topic if you need more guides/tutorials. :wink: :slightly_smiling_face: :slightly_smiling_face: :slightly_smiling_face:

Bye :partying_face: :partying_face: :yum:

46 Likes

Great UI​:heart:
Keep it up

1 Like

Nice @Xoma :grin::grin::+1:

1 Like

If you all need more guide then like the topic :grinning: :yum:

Thanks

Thanks

Nice guide @Xoma

1 Like

Sensational @Xoma ! I really appreciate a great UI!

1 Like

Really good work!!! But can you explain me why have you used the decoration component I didn’t understand it’s use

1 Like

@Soham_Shah I used it to set the margin or the space between components, it was used to join card 1 and 2 together. :slightly_smiling_face: You can read about it in docs. Decoration is the main part.

1 Like

Would you guys like to see my textbox UI design guide? (As the hackathon starting it may be late for me to do.)

  • Yes
  • No
  • I don’t have time to vote

0 voters

2 Likes

Great work, i’m gonna use this. :star_struck:

@Xoma Here is what i got after exporting your aia

@Xoma I think its because of Corner-Radius being set to 100. I used 30 and it fixed the problem

Hmm, ok fine

I think your using tab right?

What do you mean by that??

Are you using phones or other device?

I tested it on a Phone

This issue only occurs in older devices

try not to change height/width of cardview
instead change these values of arrangements which is inside that cardview

1 Like

Thanks for the tutorial, the real one I didn’t follow it to the letter, I just watched your buttons, but I also liked this result.

4 Likes

Full Detailed Video Tutorial

3 Likes