✨ Card View Extension for MIT App Inventor

Extensions
, , , ,
1

CardView Extension for MIT App Inventor: Elevate Your App's Design

Give your App Inventor projects a modern, sleek look with the CardView extension! This powerful extension allows you to effortlessly transform any layout into a native Android CardView, enhancing its visual appeal and user experience.

No more boring rectangles! With CardView, you can:

  • Instantly enhance layouts: Wrap any arrangement or component in a visually appealing card with just a single block call.

  • Customize extensively: Fine-tune every aspect of your card's appearance, including:

    • Shape and Corners: Control corner radius for rounded edges.

    • Elevation and Shadows: Add depth and dimension with customizable shadows.

    • Colors and Borders: Set background and stroke colors, along with border width.

    • Padding and Margins: Precisely control spacing within and around the card.

  • Add interactive elements:

    • Enable click and long-click events with customizable foreground ripple effects for a modern touch response.

    • Easily detect user interactions through dedicated event blocks.

  • Maintain flexibility:

    • Seamlessly revert to the original layout using the ClearCardView function.

    • Preserve your existing layout structure and component hierarchy.

Benefits of using the CardView Extension:

  • Modern UI/UX: Instantly modernize your app's interface, aligning it with current design trends.

  • Improved Visual Hierarchy: Cards naturally group content, making your app easier to scan and navigate.

  • Enhanced User Engagement: Interactive cards with touch feedback create a more engaging and delightful user experience.

  • Easy Integration: Simple blocks and properties make it incredibly easy to use, even for beginners.

Functions and Examples:

1. MakeCardView

component_method|
component_method|528×658 14.5 KB

Purpose: Transforms a layout into a CardView, applying various styling options.

Parameters:

  • layoutComponent (AndroidViewComponent): The layout you want to convert into a CardView.

  • cardBackgroundColor (int): Background color of the card (use color blocks).

  • cardCornerRadius (float): Corner radius in pixels (e.g., 10 for slightly rounded, 25 for more rounded).

  • cardElevation (float): Elevation/shadow depth in pixels (higher value = stronger shadow).

  • cardMaxElevation (int): Maximum elevation of the card (relevant for shadow behavior).

  • cardPadding (int): Internal padding within the card, applied to all sides.

  • cardMargin (int): External margin around the card, applied to all sides.

  • strokeWidth (int): Width of the card's border in pixels.

  • strokeColor (int): Color of the card's border (use color blocks).

  • clickable (boolean): Enables/disables click functionality for the card.

  • fullClickable (boolean): Enables/disables long-click functionality for the card.

  • clickForegroundColor (int): Foreground color (ripple effect) when the card is clicked (use color blocks).

Example:

blocks
blocks880×682 47.8 KB

result:

cardviewConvert
cardviewConvert3509×2482 296 KB

2. ClearCardView

component_method(1)

Purpose: Reverts a CardView back to its original layout, removing all CardView styling.

Parameters:

  • layoutComponent (AndroidViewComponent): The CardView you want to revert back to its original layout.

Example:

blocks(1)
blocks(1)876×110 10.4 KB

Result:

cardView reverse
cardView reverse3509×2482 296 KB

3. Events

The CardView extension provides two events to handle user interactions:

  • CardViewClick: Triggered when the CardView is clicked.
    component_event

  • CardViewLongClick: Triggered when the CardView is long-clicked.
    component_event(1)

Aix File:

:arrow_down: CardView.aix (33.8 KB)

What Do you think about CardView extension ?

  • Execellent
  • Very Good
  • Good
  • Bad
0 voters
5 Likes
2

Is the layout arrangement always visible before setting the cardview ?

3

No, the layout arrangement is not always visible before setting the CardView. The visibility of the layout arrangement depends on several factors, including:

  1. Visibility Property: The Visible property of the layout arrangement itself. If it's set to false, the layout and its contents will not be visible, regardless of the CardView.

  2. Parent Layout Visibility: If the layout arrangement is nested within another layout that has its Visible property set to false, the inner layout will also be hidden.

  3. CardView Elevation: If the CardView has a significant elevation (shadow), it might visually overlap the layout arrangement, making it appear as if the layout is behind the CardView.

  4. Background Colors: If the CardView and the layout arrangement have the same background color, the layout might blend in with the CardView and not be clearly visible.

1 Like
4

Does light/shadow always follow the same direction?

image
image1468×1083 92.6 KB

:pray:

Lito

@>-->---

5

Tested now, it is visible if you do not set the visibility of the underlying arrangement...

BLOCKS

image

Before Button press

image

After Button press

image
(and the underlying background colour shows as well???)

will stick with "Enhance" for now...

1 Like
6

no, shadows don't always go the same way.

7

You can avoid this by making the background Color of the arrangement layout to transparent of default color

8

And where is the configuration that indicates the direction of light?

@>-->---

9

The CardView extension uses the CardView native library in Android which does not provide a direct API for configuring light direction, as shadow direction is system-defined and based on the elevation property.

10

Really? What parameters should I specify to obtain the shadow in the direction of the lower right corner?

image
image1016×774 47.2 KB

:pray:

Lito

@>-->---

11

You were informed that it can't be done with native methods available in CardView, so why are you asking what parameters to use to do it?

1 Like
12

I believe there was a misunderstanding of the statement: 'shadow direction is system-defined and based on the elevation property.'

"Shadow direction is system-defined".

End.

Perhaps the 'depth' of the shadow is based on elevation property.

But the way it was informed to me led me to think that elevation property could change the direction of the shadow.

Now I understand that shadow direction is fixed and not based on the elevation property.

Sorry for the misunderstanding. :pray:

In Photoshop there is a control that allows me to choose the direction of the shadow (or light) as well as other customization parameters.

image
image934×478 20.9 KB

Honestly, I believe this extension is to make things easier for those not familiar with graphic applications. :pray:

Lito

@>-->---

13

Unfortunately CardView is a convenient, fast and limited creation of the Android developers and I don't see the point in using this view. Using any view and a few view properties you can create your own card view with much more customization, including the ability to modify the direction of the shadow.

1 Like
14

Hi, Theres a problem when I try to compile, or generate APK,
It works great on the Companion but generates a big error when compiling

¡Ha fallado la compilación! [RunD8] ERROR: d8 failed.

15

Yes, this is possible because the extension uses the cardview library, which if not repacked may conflict with the built-in cardview library.

16

Please . How can I pack it,to make it work?

17

Do you use a ListView component in your application?

18

No.
I didn't use a list view.
I tried with just an empty app, loading this extension and it won't generate APK.
I doesn't matter if you actually inizialise it in an frame or other objet