Card-view Full Guide 2020

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


Index

  • 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

Image1

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


Card-view long click event

Image5

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
Image4

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.

Xoma
Graphic Designers

Happy Niotroning!

/XOMA DEV

7 Likes

Yes Very Helpful for new comers

2 Likes

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

4 Likes

Good guide it will help begginers

4 Likes

Useful guide, thanks

2 Likes

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

Thanks a lot

missing full clickable