How to make design like this

Discuss
, ,
1

Please look at the below image and check
I need to make like this design but I don’t want use background as image

IMG_20210114_111513
IMG_20210114_111513384×304 39.5 KB

Look above blue cardview like that
I can use overlay extention but that blue arrangment (cardview) will be curve from both sides
Please let me know

1 Like
2

Yes, you can. Set cardview round.

3

Use Extension -

To Make That Background Blue Card.

blocks
blocks677×297 16.2 KB

6ac4b9a2-c8e0-4f57-85f1-92c2573972db
6ac4b9a2-c8e0-4f57-85f1-92c2573972db540×1200 9.46 KB

You Can Ask For Help In Overlap If You Need.

5 Likes
4

use arrangement design extension for the vertical arrange(blue background) and set the bottom left corner and bottom right corner to what suite you, and for the card you can use decoration component to overlap the card on the arrangement.

6

Extension link please

7

https://community.thunkable.com/t/extension-change-the-design-of-the-button/36717

8

see these -

and -

also for overlapping it use this -

3 Likes
9

it is easy
use a a background like that purple
use cardveiw and inside that add a view pager
and for header add a HA add inside it use a label a textbox and a btn
if u need any help pm me regarding this

1 Like
10

This what I needed thanks for it , let me implement then I’ll let you know :slight_smile:

3 Likes
11

https://community.thunkable.com/t/extension-change-the-design-of-the-button/36717

Off Topic The colors on the smartphone and notebook screen are completely different (I looked now at the notebook screen. The first image is not blue, but a purple. The second is a very light purple)

Screenshot_20210113-170142~2
Screenshot_20210113-170142~2706×1457 66.4 KB

Screenshot_20200807-195448~4
Screenshot_20200807-195448~4706×1463 62.3 KB

3 Likes
12

also you can put background of this type and components on it

13

thats wat i said

1 Like
14

sorry i didn’t read the comments :sweat_smile::sweat_smile:

1 Like
15

Thank you very much this worked !! can you tell me about overlay :slight_smile:

16

thank you everyone for helping
finally did it

f5c0d286-28ae-44ec-8f8e-a714893220f2
f5c0d286-28ae-44ec-8f8e-a714893220f21080×852 120 KB

3 Likes
17

Can you share .aia?

1 Like
18

yes @Victor_Ken is right it will help other users also

19

Why don’t you try to do it yourself?
Don’t like challenges?

I don’t think it’s the right way to help.

4 Likes
20

ShopyFilter.aia (2.9 MB)
anyways lll share
but by doing yourself you will understand and learn more

2 Likes
21

also if you want to make exactly same design then you can use elevation of cardview 10 and use decoration component to move cardview up a lil bit

1 Like