Cards UI by having random image in the background - Guide #2

Hello everyone, Thanks for stopping by this post.
In this guide I’m going to share how you can make beautiful card design having random image in the background.

Demo Results

---- [Start of Tutorial] ----

Let’s talk about design first.
I’ve used a CardView as a container of this card, 1 Horizontal Arrangement (for display random image), 1 Space, 2 Vertical Arrangements and 2 Labels for some content.

Properties of components :point_down:

  • Card_View1 - (Renamed as - CardView)
    – Background color = white
    – All paddings = 0
    – Corner radius = 15
    – Elevation = 0
    – Width = 92%

    • Vertical Arrangement - (Renamed as - RANDOM_IMAGE)
      – Align vertical = center
      – Height = 140px
      – Width = fill parent

      • Horizontal_Arrangement1
        – Align vertical = center
        – Height = fill parent
        – Width = 60%
        Image = gradient image (Image link below to download)

        • Space1
          – Width = 20px

        • Vertical_Arrangement2
          – Width = 20px

          • Label1 - (Label for title)
            – Font size = 16px
            – Bold = true
            – Text color = white
            – Text = Possibilities are endless

          • Label1 - (Label for title)
            – Font size = 12px
            – Text color = #CCCCCCFF (off white)
            – Text = ~ devcafe official

Click me to Download Gradient Image
I know i could use gradient maker extension, but I preferred to use the image here

Reference Image :point_down:

Blocks Part

For random image I’m using an API from picsum.photos.
Just simply use this link :point_right: https://picsum.photos/500/200 to generate random image every time when page loads. and as you can see 500 & 200 in the link above, which are width and height of the image. You may change that according to your need.

In the block, on screen initialize just simply add API link into the image block of RANDOM_IMAGE

Reference Image :point_down:

---- [End of Tutorial] ----

AIA File

CardUIWithRandonImage.aia (5.0 KB)

This is it for now. I hope it will be very helpful guide for you. and will see you in the next guide very soon
Don’t forget to follow me devcafe official

11 Likes

Nice.

Also its better to load the image with ImageUtils or with an image loader.

2 Likes

Nice guide @devcafeofficial

noice GIF

1 Like

Thanks @Xoma @UnknownBeast

I just tried to keep the Guide short. and I’m demonstrating how we can create this kinda design. So now it depends on developers how they can optimize their app.

3 Likes

Nice Guide

1 Like

Interesting… Really this kind of design will be so impressive… waited for such guide…
As usual you Rocks this time too in term of Guide

Welcome @devcafeofficial

:clap::clap::clap::clap::clap::clap::clap::clap:

#off-topic

Not only you alone used Vertical arrangement but mob opera too…

Nice Guide :heart_eyes: :heart_eyes: :heart_eyes:

1 Like

Mh perfect
Good Guide :grinning::+1:
Thanks

2 Likes

Nice guide. Waiting for more tutorials like this :fire::fire:

1 Like

Thanks @Aditya_Nanda @Anu @Midhlaj_am

@Still-learning :laughing: I tried to place components as parent, child & siblings in this guide. I didn’t expected it is gonna happen this in mobiles. You can try Desktop Mode

@Pankaj_Saha Thanks, more awesome guides coming by…

2 Likes

Thanks for the great guide :innocent:

1 Like

Does it works when I put various sizes of image? Because if I set Card width and height with percentage, then width and height pixel can be changed.

@Superjay, I’ve updated description of this post. I’ve added AIA File above. You can download and play around with that

Downloaded :grin::grin::grin::grin: Love You for this @devcafeofficial you are pro :fire::fire::fire::boom::boom:

1 Like

Thank you! It works as I intended.