Elements with customizable border

Hello, seeing that the borders on visual elements (Buttons, text boxes and cards) are turning design pattern into many applications out there, I decided to try my own solution with Kodular, and it worked, now I am sharing with you my solution.

The main

Add two cards, one will serve as the border, the other will house the elements, in which case I’ll use a label to create a button:
Screenshot%20from%202019-06-15%2011%3A00%3A53 Screenshot%20from%202019-06-15%2010%3A58%3A59

Why not a button?
The buttons have a “proper border” because of their shadow (even if the border shadow property is disabled), this makes the card view look extremely larger than the button, instead of being the same size, I preferred to use one caption to create my own button for this, but it stays at your will.

These will be the properties of the border:
Screenshot%20from%202019-06-15%2010%3A59%3A35 Screenshot%20from%202019-06-15%2010%3A59%3A55

The background color you define, as well as the fill (which will serve as the border thickness), the radius of the border should follow the radius of the element you put inside the card view.

Now see different components with their edges:

AIA:


Border_Elements.aia (1,9 KB)
13 Likes

Cardviews with a simple shadow and no bgcolour looked a litle bit ugly. :slightly_frowning_face:

They (yours) are look so nice! Maybe, I will use them instead of borderless and shadowless cardviews.

3 Likes

I just imported it and tested it on my device without doing any changes and it doesn’t look like your screenshots :slightly_frowning_face:

I think height and width shall be taken in pixels or percentage. You may give it try and show here what works for you

1 Like

Yes I tried it last night and it worked with pixels

1 Like