Dynamic Delivery Listview - Clean UI

Dynamic Delivery Listview

Hello Awesome Friends!
Today i present to you a very simple and clean UI for a Delivery app that i found on Behance. The design was quite impressive so I thought why not make it with dynamic components extension. The source code is open source so anyone can use it freely.

Design Reference : https://www.behance.net/gallery/92019977/Groad-Food-Ordering-System-UIUX-Case-Study?tracking_source=search_projects_recommended|food%20figma%20mobile


Screenshots of my design


The main part of this design which is the images and its descriptive labels are fully dynamic and fully customizable. Therefore you can change any part of the design according to your desire.

JSON Template

{
“name”: “Dynamic Delivery Listview”,
“metadata-version”: 1,
“author”: “Thiago Cavalcanti”,
“platforms”: [
“Kodular”
],
“keys”: [
“count”,
“image”,
“image2”,
“title”,
“sub”,
“review”,
“tempo”
],
“components”: [
{
“id”:“cardz_{count}”,
“type”:“MakeroidCardView”,
“properties”: {
“WidthPercent”: 90,
“Height”: 320,
“CornerRadius”: 8,
“Elevation”:0,
“FullClickable”: true
},
“components”: [
{
“id”:“img_{count}”,
“type”:“VerticalArrangement”,
“properties”: {
“Width”: -2,
“Height”: -2
},
“components”: [
{
“id”:“img2_{count}”,
“type”:“VerticalArrangement”,
“properties”: {
“Image”: “{image2}”,
“Width”: -2,
“Height”: -2
}
}
]
},
{
“id”:“title_{count}”,
“type”:“Label”,
“properties”: {
“Text”: “{title}”,
“FontSize”: 18,
“FontColor”: -769226
}
},
{
“id”:“sub_{count}”,
“type”:“Label”,
“properties”: {
“Text”: “{sub}”,
“FontSize”: 14
}
},
{
“id”:“hz_{count}”,
“type”:“HorizontalArrangement”,
“properties”: {
“Width”: -2
},
“components”: [
{
“id”:“star_{count}”,
“type”:“Label”,
“properties”: {
“Width”: -2,
“Text”: “{review}”,
“FontSize”: 18
}
},
{
“id”:“circle_{count}”,
“type”:“MakeroidCardView”,
“properties”: {
“Elevation”:0,
“ContentPaddingTop”:0,
“ContentPaddingLeft”:2,
“ContentPaddingRight”:2,
“ContentPaddingBottom”:0,
“CornerRadius”: 8,
“BackgroundColor”: -3355444
},
“components”:[
{
“id”:“tempo_{count}”,
“type”:“Label”,
“properties”: {
“Text”: “{tempo}”,
“FontSize”: 14
}
}
]
}
]
}
]
}
]
}


Free aia

ListViewDelivery.aia (5.2 MB)

13 Likes

More card views, for you’re awesome

Can you make the listview so awesome with click animation? It looks like that.

1 Like

beyond perfect :joy:

it is very simple to do, I will create a tutorial here in the community

thanks friend for sharing.
I even watch your videos on the Youtube channel :blush:

1 Like

https://f10.photo.talk.zdn.vn/1936330905627335524/e4d2def346ccb592ecdd.jpg
Could you make cardview corner and silde view look like pic attachment.

Why is width and height must be -2 ?

“components”: [
{
“id”:“img2_{count}”,
“type”:“VerticalArrangement”,
“properties”: {
“Image”: “{image2}”,
“Width”: -2,
“Height”: -2
}

thanks for your help

add to this

i already tried to change json component as your guide but padding image has a gap between image and border cardview (pic attachment )

“components”: [
{
“id”: “img_{count}”,
“type”: “MakeroidCardView”,
“properties”: {
“Image”: “{image2}”,
“ContentPaddingTop”: 0,
“”: 2,
“ContentPaddingRight” : 0,
“ContentPaddingLeft” : 0,
“ContentPaddingBottom”: 0,
“CornerRadius”: 8,
“Width”: -2,
“Height” : -2
},

materialcardbydxh.apk (5.3 MB)

You can design ui like this . Thanks for your helps


an S +++ level design and can’t be implemented with it, just a little.