Hello everyone, Thanks for reading this post.
Let’s learn something new today
In this guide I’m going to share how you can make Minimal Stacked Card UI to improve your app design.
Stacked card will look like this 
---- [Start of Tutorial] ----
Let’s talk about design first.
I’ve used a Vertical_Arrangement as a container of this card and renamed as MainContainer, 3 CardView to stack on each other, and rest of the content will go inside the 3rd CardView.
NOTE: I’ve used OverlapView extension, made by Vsatish, to achieve this design
Components & their Properties
-
Vertical_Arrangement - (Renamed as - MainContainer)
– Align Horizontal = center
– Width = fill parent -
Card_View1
– Background color = #E2E5F6FE
– Corner radius = 12
– Height = 136px
– Width = 82% -
Card_View2
– Background color = #FCCA0FFE
– Corner radius = 12
– Height = 128px
– Width = 88% -
Card_View3
– Background color = #171056FF
– Corner radius = 12
– Height = 120px
– Width = 94%
– All paddings = 0 -
Horizontal_Arrangement1
– Align vertical = center
– Height = fill parent
– Width = fill parent -
Space1
– Width = 20px -
Vertical_Arrangement3
– Width = fill parent -
Label1 - (Label for title)
– Font size = 14
– Bold = true
– Text color = white
– Text = Possibilities are endless -
Label2 - (Label for sub-title)
– Font size = 12
– Text color = #DCD3D3FE (off white)
– Text = ~ devcafe official -
Space1
– Width = 20px -
Card_View4
– Background color = #FCCA0FFE
– Corner radius = 20
– Height = auto
– Width = auto -
Vertical_Arrangement3
– Width = fill parent
– Height = 44px
– Width = 44px
– Align vertical = center
– Align Horizontal = center -
Label3 - (Label for arrow icon)
– Font size = 22
– Text color = any dark
– Text = arrow_forward
– Font Typeface = Material Icons -
Space1
– Width = 10px
Reference Image
NOTE: I know, design looks weird in the designer of Kodular dashboard. But trust me It’s gonna be better when you apply blocks to it. Keep reading
Blocks Part
For stacking cards on each other I’m using OverlapView extension as I mentioned above.
On Screen Initialize simply add MainContainer (vertical arrangement) to the method MainContainer of OverlapView and then add Card_View2 & Card_View3 into the AddLayer method, having 0 margin from all sides and gravity must be TopCenter and you can keep the same index for both card, but I’m using 2 & 3 index number for Card_View2 & Card_View3 respectively
Reference Blocks Image
---- [End of Tutorial] ----
AIA File (optional)
I’ve mentioned everything above and provided the guided images as well. and it’s really easy thing to do. So I want you to TIY (Try It Yourself), that will help you to learn more
This is it for now. I hope it will be very helpful guide for you. and will see you in the next guide very soon
Don’t forget to follow me devcafe official
