✨ Card View Extension for MIT App Inventor

[Black_Knight]

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

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).

• cardCornerRadiusTopLeft (float): Corner radius for the top-left corner in pixels.

• cardCornerRadiusTopRight (float): Corner radius for the top-right corner in pixels.

• cardCornerRadiusBottomLeft (float): Corner radius for the bottom-left corner in pixels.

• cardCornerRadiusBottomRight (float): Corner radius for the bottom-right corner in pixels.

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

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

• cardPaddingTop (int): Internal padding at the top of the card in pixels.

• cardPaddingBottom (int): Internal padding at the bottom of the card in pixels.

• cardPaddingLeft (int): Internal padding on the left side of the card in pixels.

• cardPaddingRight (int): Internal padding on the right side of the card in pixels.

• cardMarginTop (int): External margin at the top of the card in pixels.

• cardMarginBottom (int): External margin at the bottom of the card in pixels.

• cardMarginLeft (int): External margin on the left side of the card in pixels.

• cardMarginRight (int): External margin on the right side of the card in pixels.

• 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:

result:

2. ClearCardView

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:

Result:

3. Events

The CardView extension provides two events to handle user interactions:

• CardViewClick: Triggered when the CardView is clicked.
  

• CardViewLongClick: Triggered when the CardView is long-clicked.
  

Aix File:

CardView.aix-V1 (33.8 KB)

CardView.aix-V2 (33.9 KB)

What Do you think about CardView extension ?

• Execellent
• Very Good
• Good
• Bad

[TIMAI2]

Is the layout arrangement always visible before setting the cardview ?

[Black_Knight]

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.

[Lito]

Does light/shadow always follow the same direction?

Lito

@>-->---

[TIMAI2]

@TIMAI2

Is the layout arrangement always visible before setting the cardview

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

BLOCKS

Before Button press

After Button press

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

will stick with "Enhance" for now...

[Black_Knight]

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

[Black_Knight]

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

[Lito]

@Black_Knight

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

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

@>-->---

[Black_Knight]

@Lito

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

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.

[Lito]

@Black_Knight

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.

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

Lito

@>-->---

[Patryk_F]

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?

[Lito]

@Patryk_F

so why are you asking what parameters to use to do it?

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.

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

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

Lito

@>-->---

[Patryk_F]

@Lito

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.

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

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.

[Georgitus_Quete]

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.

[Patryk_F]

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

[Georgitus_Quete]

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

[Patryk_F]

Do you use a ListView component in your application?

[Georgitus_Quete]

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

[Black_Knight]

@Black_Knight

V2 Updates

• Individual Padding: Added separate parameters for top, bottom, left, and right padding.

• Individual Margins: Added separate parameters for top, bottom, left, and right margins.

• Individual Corner Radii: Added separate parameters for each corner's radius (top-left, top-right, bottom-left, bottom-right).

• Elevation Animation: Implemented elevation animation on click using StateListAnimator and ObjectAnimator.

• Masked Ripple Effect: Modified the ripple effect to be masked by the card's shape, including rounded corners.

• Advanced Stroke Handling: Used GradientDrawable and LayerDrawable to create strokes that accurately follow individual corner radii.

• Improved Code: Enhanced code clarity, error handling and potentially optimized the performance.