Dynamic Real Estate App Design | Simple And Clean UI

Real Estate App Design

Hello Awesome Friends!
Today i present to you a very simple and clean UI for a real estate app that i found on Instagram. 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 : Login • Instagram


The Original Design are presented below


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": "RealEstate Image List View",

"metadata-version": 1,

"author": "Zain Ul Hassan",

"platforms": [

    "App Inventor",

    "Kodular"

],

"keys": [

    "number",

    "image",

    "price",

    "location",

    "properties"

],

"components": [

    {

        "id": "ListCardArranagement-{number}",

        "type": "VerticalArrangement",

        "properties": {

            "WidthPercent": 80,

            "AlignVertical": 2,

            "AlignHorizontal": 3

        },

        "components": [

            {

                "id" : "ContainerArrangement-{number}",

                "type" : "VerticalArrangement",

                "properties" : {

                    "AlignVertical": 2,

                    "AlignHorizontal": 3,

                    "Width" : -2,

                    "Height" : -1

                },

                "components" : [

                    {

                        "id": "ImageViewCard-{number}",

                        "type": "MakeroidCardView",

                        "properties": {

                            "ContentPaddingLeft": 0,

                            "ContentPaddingRight": 0,

                            "ContentPaddingTop": 0,

                            "ContentPaddingBottom": 0,

                            "AlignHorizontal": 3,

                            "AlignVertical": 2,

                            "HeightPercent": 25,

                            "Width": -2,

                            "CornerRadius": 25,

                            "Elevation": 0

                        },

                        "components": [

                            {

                                "id": "HotelImage-{number}",

                                "type": "Image",

                                "properties": {

                                    "Picture": "{image}",

                                    "Width": -2

                                }

                            }                        

                        ]

                    },

                    {

                        "id": "LoveButton-{number}",

                        "type": "MakeroidCardView",

                        "properties": {

                            "ContentPaddingLeft": 15,

                            "ContentPaddingRight": 15,

                            "ContentPaddingTop": 12,

                            "ContentPaddingBottom": 12,

                            "AlignHorizontal": 3,

                            "AlignVertical": 2,

                            "CornerRadius": 15,

                            "FullClickable": true

                        },

                        "components": [

                            {

                                "id": "loveButtonLabel-{number}",

                                "type": "Label",

                                "properties": {

                                    "Text": "favorite_border",

                                    "FontSize": 24,

                                    "TextColor": -15789538,

                                    "FontTypeface": 7

                                }

                            }

                        ]

                    }

                ]

            },

            {

                "id": "LabelsArrangement-{number}",

                "type": "HorizontalArrangement",

                "properties": {

                    "AlignVertical": 2,

                    "Width": -2

                },

                "components": [

                    {

                        "id": "PriceLabel-{number}",

                        "type": "Label",

                        "properties": {

                            "Text": "{price}",

                            "FontSize": 20,

                            "FontTypefaceImport": "Montserrat-Bold.ttf",

                            "TextColor": -15789538

                        }

                    },

                    {

                        "id": "LocationLabel-{number}",

                        "type": "Label",

                        "properties": {

                            "Text": "{location}",

                            "FontSize": 14,

                            "FontTypefaceImport": "Montserrat-Regular.ttf",

                            "TextColor": -15789538

                        }

                    }

                ]

            },

            {

                "id": "PropertiesLabel-{number}",

                "type": "Label",

                "properties": {

                    "Text": "{properties}",

                    "FontSize": 14,

                    "FontTypefaceImport": "Montserrat-Regular.ttf",

                    "TextColor": -15789538,

                    "Width": -2

                }

            }

        ]

    }

]

}

Download AIA File : RealEstate.aia (492.5 KB)

Let me know in the comments if you liked it. Thanks & Enjoy.

18 Likes

Congratulations. Very beautiful your UI! Light and Clean!

3 Likes

Professional UI design. :clap:t2:
Keep it up.

1 Like

That’s marvelous! Btw, if that is a #guides:resources, you should explain what you’ve done. Otherwise, you might wanna change it to #koded:opensource :blush:

I think everything is explained as I have just made the son template. Anyone can use it simply with dynamic components

now you have a mission: follow with the app!!

2 Likes

So that would be a open-source then :wink:

1 Like

loved it :heart_eyes:

1 Like

Great design… :star_struck: :star_struck: :star_struck: :star_struck:

Impressive. Nice ui. Keep it up. :+1:t2:

well very great ui but.but

but how u got soo soo hd images

Please contact me. I’m interested in your app and want to customize it.

The project is open source. You can customize it anyway you want.

2 Likes

I want a professional real estate app. Can you make one for me?

You should mention how much you will pay for it.