Card-view Full Guide 2020

Hi there, in this topic we will learn about Card-view with complete details. :grinning:


  • Card-view click event

  • Card-view long click event

  • Card-view alignment

  • Card-view background color

  • Card-view padding

  • Card-view corner overlap

  • Card-view elevation color

  • Card-view height & width

  • Card-view background image

  • Card-view long clickable property

  • Card-view Radius

  • Card-view ripple enabled

  • Card-view ripple color

  • Card-view visibility

Card-view click event


This block is triggered when the user clicks on the the visible Card-view.

Card-view long click event


This block is only triggered when Card-view is long clicked or clicked for more than seconds.

Card-view alignment

Here are some of the blocks which align things in card view in a custom way. You can also change them in designer properties. They are Horizontally Left aligned and Vertically Right aligned.

  • Horizontal alignment
  • Vertical alignment

Horizontal Alignment

Values for Horizontal Alignment

1 = Left Aligned
2 = Right Aligned
3 = Center Aligned

Vertical Alignment

Values for Vertical Alignment are different

1 = Top Aligned
2 = Center Aligned
3 = Bottom Aligned

Card-view background color

This block allows you to set the background color of a Card-view, you can also do it in designer properties. This block also needs other color block when can we found in COLORS group in the blocks editor.

Card-view padding

This feature is allows you to set margin inside the card view with the given value. However the value is set to 5 by default. You can find padding to set for each direction of the Card-view, those are Top, Bottom, Left and Right.

Card-view corner overlap

On Pre-lollipop platforms, Card-view does not clip the bounds of Cards for the rounded corners. It is false by default

Card-view elevation color

blocks (6)

Elevation is shadow called in Card-view. You can also find this option in designer properties of the Card-view. This block help us to set the rate of the shadow of Card-view

Card-view height & width

  • Sizing in Pixels
  • Sizing in Percentage

Sizing in pixels

blocks (7)

These blocks can be used to set the height & width measured in pixels, you can do it with designer properties too. I personally don’t recommend these blocks or use of pixels because as they are in pixels, they look different in other devices, so instead use Percent value.


Sizing in Percentage

These blocks helps you to adjust the height & width of a Card-view in Percent which are fixed.
You can set the value from 1 to 100.

Card-view image (background image)

This block helps you to set the background image of a Card-view, you can set the image which is in the assets or in the phone. This can be also set in designer properties.

Card-view long click property

Using this block, you can set if the card view should be long clickable or not. You can also set in designer properties and by default it’s false.

Card-view radius or radious

blocks (12)

Using this block, you can set the curvdness of Card-view, this can be also done in designer properties and by default it’s 2. I prefer you to only put value from 0 to 30. If you put more than 30, it would look different in older devices.

Card-view ripple color

blocks (13)

Using this block, you can set the touch color which is known as ripple color of the Card-view. It only works if Ripple property is enabled. You can also set in designer properties and by default it’s dark grey.

Card-view ripple enabled property

Using this block you can activate or deactivate the ripple of the Card-view. It’s false by default and also you can set in in the designer properties.

Card-view visibility

blocks (15)

This block allows to set the visibility of the Card-view, it’s true by default, and click and long click event will only work it’s visible. You can also set it in the designer properties.

Hope you liked the guide! If something is missing or any suggestion kindly say me, it will be appreciated. :grinning:

Was it helpful?
Comment down below.

Graphic Designers

Happy Niotroning!



Yes Very Helpful for new comers


Very helpful topic, keep it us :fire::fire::fire:


Good guide it will help begginers


Useful guide, thanks


Wonderful guide @Xoma, this is a good contribution to the community

Thanks a lot

missing full clickable


Yeah, hopefully we’ll get it soon :sweat_smile:

1 Like

Could anyone make this as a wiki? Then anyone could edit the post.

1 Like

u have 2 accounts
mods pls see

great guide :heart_eyes:

1 Like

I remember there is no such rule to not to keep two accounts. I think.

Can we change the shape of card view ? like normally card view visible in square so if i want to show card view in circle than it is possible or not ?

Set corner radius to 100 @RK_Jarvis_Gaming

1 Like

thanks bro i really don’t know about radius but after your reply have learn about it osm bro :star_struck:

Can the ripple effect generated programatically

Yes you can set it by blocks too, as shown in topic

can you please help…

I want

when clock.timer–> show ripple

Ripple will only be shown when the card will be clicked

Is there any thing like that in Animation?

Also, can you please guide me to thread where I can find how to test app on laptop?
thanks a lot