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:

22 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.

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

1 Like

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.

3 Likes

Full Detailed Video Tutorial

3 Likes