Boost Your UI Design - How to write text on images and Darken the image...

Have you ever seen anything like this?

An Image with text on it and contrast of the image is darkened. I used this design in my Real Estate Hub project. Many people asked me in Personal chat so here is the tutorial.


How to Add Text Over Image
It is fairly simple just Drag a Vertical Arrangement and Set its background image property to Any image you like and boom you can put any component on it like text or button.


Adding Contrast
To Darken the background image simple drag another vertical arrangement into it and set its background color to #00000075 and put your other content on it. I will give a dark background effect.


**Card View** To give a Drop Shadow Effect Drage a "Card View Arrangement". Set all the padding option (top, bottom, right, and left) to 0 and Drag all the setup to the Card View. And boom you got a Professional UI.


Also Check

My One Weather App - Kodular Community
Play Store - https://play.google.com/store/apps/details?id=com.matgrams.oneweather

4 Likes

nice work bro i also use like this but here i got to know to apply a layer of colour on it also…
thanks a lot.

2 Likes

@app_techgeeknerd
Welcome bro…