How to make this UI, want to learn the basics

[Meghraj_Singh (Meghraj Singh Beniwal)]

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.

[Meghraj_Singh (Meghraj Singh Beniwal)]

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.

[The_K_Studio (Karan M.)]

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

[ADDYLIN]

For The Dot View Below Images This Might Help -
https://community.kodular.io/t/customizable-image-slider-extension-with-cache-system-paid/71527?u=addylin

OR -
https://community.appybuilder.com/t/dotsview-extension/1679

[ADDYLIN]

@Meghraj_Singh

Set the radius to 100 to make it round

This Misbehaves in Smaller Screen Devices.

@Meghraj_Singh

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

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

[FREE] LeoProfileView - Extension help you to create Circular Image with Icon || Version - 3

Write a short description LeoProfileView Extension Help you to make a beautiful UI. Previews 1 [1] (Top-Left) 2 [2] (Top-Right) 3 [3] (Bottom-Left) 4 [4] (Bottom-Right) Add a picture of all the blocks [PLeLupmFXt] [chrome_nFDfUZs3JW] Write instructions to use your extension Usually, all blocks named according to Use. [blocks (2)] Icon Position 1 → Top-Left 2 → Top-Right 3 → Bottom-Left 4 → Bottom-Right Update ( Version - 2) Added New Block [blocks (1)] Add New Ic…

[Meghraj_Singh (Meghraj Singh Beniwal)]

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

[ADDYLIN]

@The_K_Studio

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

Try This.

OR -

Try Replacing CardView With Round .png’s

[Meghraj_Singh (Meghraj Singh Beniwal)]

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

[The_K_Studio (Karan M.)]

also u can use circle image view extension…

[CJcorp (Asit)]

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

[CJcorp (Asit)]

See made with card view, image and decorations utility

Preview in companion

[Xoma (Kumaraswamy)]

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