How to make this UI, want to learn the basics

Hi,
I have saw some UI from another app and i was wondering how can i create similar thing myself using the kodular.

Few of you might also point me to some of the already created apps here in kodular itself but those might be the paid AIAs but i am more curious on learning the fundamentals like what all components will be needed to achieve something like this.

Here is what i have tried,
Taken a horizontal scroll bar
Added Card View inside it
Then added an image and a label component inside card view
Set the radius to 100 to make it round

But i am somehow now able to make the image fill the complete cardview.

change card view properties like all paddings to 0 and stroke width to 0.

1 Like

For The Dot View Below Images This Might Help -

OR -

This Misbehaves in Smaller Screen Devices.

You Can Use This ( Can Work as a Workaround ) -

I have tried this as well but result is not something which i am looking.

Try This.

OR -

Try Replacing CardView With Round .png’s

okay finally using the round images itself i was able to achieve this.

2 Likes

also u can use circle image view extension…

I think it could be done with decoration utility components too why need to use an extension for a simple task

See made with card view, image and decorations utility

Preview in companion

3 Likes

To make round card what I do is - All Padding to zero, and the height will be half of the width (25% x 50%)

2 Likes