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

[devcafeofficial]

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

• 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

Blocks Part

For random image I’m using an API from picsum.photos.
Just simply use this link 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

---- [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

[Xoma (Kumaraswamy)]

Nice.

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

[UnknownBeast (Beast)]

Nice guide @devcafeofficial

[devcafeofficial]

Thanks @Xoma @UnknownBeast

@Xoma

load the image with ImageUtils

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.

[Jinx]

Nice Guide

[Still-learning (1-2-3-4...)]

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

#off-topic

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

[Anu10 (Anu)]

Nice Guide

[Midhlaj_am (Midhlaj Am@786)]

Mh perfect
Good Guide
Thanks

[Pankaj_Saha]

Nice guide. Waiting for more tutorials like this

[devcafeofficial]

Thanks @Jinx @Anu10 @Midhlaj_am

@Still-learning

Vertical arrangement but mob opera too

@Still-learning 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

Nice guide. Waiting for more tutorials like this

@Pankaj_Saha Thanks, more awesome guides coming by…

[Muhendis_Matematik (Mühendis Matematik)]

Thanks for the great guide

[Superjay (Jay Lee)]

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.

[devcafeofficial]

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

@devcafeofficial

AIA File

CardUIWithRandonImage.aia (5.0 KB)

[Jinx]

Downloaded Love You for this @devcafeofficial you are pro

[Superjay (Jay Lee)]

Thank you! It works as I intended.