How to make app design like this

Hey i want to make a app design like below screenshot . I want to make it dynamic means call data from airtable and if someone click on that (cardview) move to another screen to show it’s relevant data . Plz help me
And i am not working on that so I don’t have any blocks or designing . So plz how to do it . Because it is a listview than i do it very easily

You can set Cardview background image … So there will be white lines… But remaining you can create using dynamic arrangement & image…

Is there any lag in scrolling dynamic arrangements because i see it lag in scrolling when it is dynamic components

Talking about design(as your question is about design), then yes it can be definitely made. See :point_down:

In above video everything is manually set, but you can optimize the same on your side by using the dynamic arrangement and dynamic component extensions as said earlier by other community members.

A break down of single cardview from above video is as follows

  1. Take a Card View. Set it’s height and width as desired
  2. Set all the paddings to 0.
  3. Add a vertical arrangement in the card view
  4. Add any desired image as a background image of Vertical arrangement.
  5. For header(top bar) of card view, I took a horizontal arrangement with two label inside it. The fonts on label were set to Material icon.
  6. The below part consist of 3 labels for The content, progress percentage and progress bar respectively(the last two are kept in separate horizontal arrangements)
  7. Below the label there is button again in an arrangement. It’s text is also set to font awesome with some general text appended to it. Lastly I used spacer arrangement for spacing and padding where-ever necessary in the whole Card View.

Card view back ground Image source :- Photo by Diego PH on Unsplash

7 Likes

Really helpful thanks buddy :grinning: it would be much better i you provide me aia or .ais.

But in dynamic arrangement there is no option to arrange labels and buttons horizontally i automatically set in vertical mode only . Is there any solution for it.

If you are using dynamic components extension then I think you can use Any Component method to tweak the properties of created dynamic arrangements

Here :point_down: is the aia of the above experiment :smiley:

CardView.aia (28.6 KB)
As said earlier, only the first view is manually designed, rest are Ctrl+C and Ctrl+V. Hence dynamic components extension may come handy while creating this project.

And below is the apk if someone want to try :grinning:

StickyCrimsonDonkey.apk (5.0 MB)

Ignore the name as it is automatically taken as the app is created with apps.new. And I was not able to change it, though I changed the aia name :sweat_smile:

2 Likes

Hey i am making this app design plz rate how it’s look by scrolling
donation_app.apk (5.4 MB)

And before you sharing your aia @Vaibhav i was created it successfully but thanks for early help for make this design

1 Like

can we play a video in background. like this in light (bulb) picture in vertical arrangement