[FREE] BeautifyComponents - Visual Enhancement Toolkit for Kodular Components

Description

These methods collectively provide a wide range of functionalities to enhance the visual aesthetics of Android UI components, offering effects like shadows, gradients, transformations, animations, and more. The parameters allow customization, making the extension versatile for different design needs.


Blocks


Demo


Files


COMMANDS

1. AddShadowEffect

  • Description: Applies a shadow effect to a visual component.
  • Parameters:
    • component
    • Number shadowColor
    • Number shadowRadius
    • Number dx
    • Number dy
  • Return: None

2. AddShadowEffectToAllViews

  • Description: Applies shadow effect to all components within a container, excluding linear layouts.
  • Parameters:
    • container
    • Number shadowColor
    • Number shadowRadius
    • Number dx
    • Number dy
  • Return: None

3. ChangeOpacity

  • Description: Changes the opacity of a visual component.
  • Parameters:
    • component
    • Number opacity
  • Return: None

4. RotateComponent

  • Description: Rotates a visual component.
  • Parameters:
    • component
    • Number angle
  • Return: None

5. ScaleComponent

  • Description: Scales a visual component.
  • Parameters:
    • component
    • Number scaleX
    • Number scaleY
  • Return: None

6. ApplyColorFilter

  • Description: Applies a color filter to a visual component.
  • Parameters:
    • component
    • Text filterType
  • Return: None

7. OverlayComponentAt

  • Description: Overlays a component at specific coordinates.
  • Parameters:
    • component
    • Number x
    • Number y
  • Return: None

(the list continues in a similar format for other methods)

I understand your request now. Let’s continue with the detailed explanation of the remaining @SimpleFunction methods in the BeautifyComponents class:


8. Apply3DEffect

  • Description: Applies a 3D effect to a visual component with customizable properties.
  • Parameters:
    • component
    • Number cornerRadius
    • Number borderWidth
    • Number backgroundColor
    • Number borderColor
    • Number shadowColor
    • Number elevation
    • Number textColor
    • boolean isItalic
    • boolean isBold
    • boolean applyToViewChildren
    • boolean applyToViewGroupChildren
    • boolean applyOrganizationVerticalHorizontal
  • Return: None

9. RoundCorners

  • Description: Applies rounded corners to a visual component and adjusts colors.
  • Parameters: Similar to Apply3DEffect.
  • Return: None

10. ApplyGradientBackground

  • Description: Applies a gradient background to a component.
  • Parameters: As described previously.
  • Return: None

11. AnimateComponent

  • Description: Applies an animation effect to a component.
  • Parameters:
    • component
    • Text effectType
    • Number duration
  • Return: None

12. ApplyCustomBorder

  • Description: Applies a custom border to a component.
  • Parameters:
    • component
    • Number color
    • Number width
    • Number dashWidth
    • Number dashGap
  • Return: None

13. Apply3DTransformation

  • Description: Applies a 3D transformation to a component.
  • Parameters:
    • component
    • Number rotationX
    • Number rotationY
    • Number depth
  • Return: None

14. ApplyMetallicEffect

  • Description: Applies a metallic effect to a visual component.
  • Parameters: Similar to Apply3DEffect.
  • Return: None

15. ApplyMetallicEffectToAllViews

  • Description: Applies metallic effect to all components within a container.
  • Parameters: Similar to ApplyMetallicEffect.
  • Return: None

16. ApplyBlurEffect

  • Description: Applies a blur effect to the background of a visual component.
  • Parameters:
    • component
    • Number radius
  • Return: None

17. ApplyRippleEffectToAllViews

  • Description: Applies a ripple effect to all child components within a container.
  • Parameters:
    • container
    • Number rippleColor
  • Return: None

18. CreateRippleEffect

  • Description: Creates a ripple effect on a component when touched.
  • Parameters:
    • component
    • Number rippleColor
  • Return: None

19. ApplyTexturedBackground

  • Description: Applies a textured background to the component.
  • Parameters:
    • component
    • Text texturePath
  • Return: None

20. ApplyGlowEffect

  • Description: Applies a glow effect around the component.
  • Parameters:
    • component
    • Number glowColor
    • Number glowRadius
  • Return: None

21. ApplyPressEffect

  • Description: Applies rounded corners and a press effect to a visual component.
  • Parameters:
    • component
    • Number normalBackgroundColor
    • Number pressedBackgroundColor
  • Return: None

22. ApplyPressEffectToAllViews

  • Description: Applies a press effect to all child components within a container.
  • Parameters:
    • container
    • Number normalBackgroundColor
    • Number pressedBackgroundColor
    • boolean applyToViewChildren
    • boolean applyToViewGroupChildren
  • Return: None

23. ApplyGlowEffectToAllViews

  • Description: Applies a glow effect around all child components within a container.
  • Parameters:
    • container
    • Number glowColor
    • Number glowRadius
  • Return: None

24. ApplyShapeToAllComponents

  • Description: Apply a specified shape to all components within a container.
  • Parameters:
    • container
    • ShapeType shapeType
    • Number defaultColor

Return: None

25. ChangeComponentShape

  • Description: Changes the shape of a visual component.
  • Parameters:
    • component
    • ShapeType shapeType
    • Number defaultColor
  • Return: None

EVENTS

1. ReportError

  • Description: Reports an error with a custom message.
  • Parameters:
    • Text errorMessage
  • Event Trigger: When an error is detected in the extension.

4 Likes

Please post demo screenshots

1 Like

Please add some demo screenshot (it may gif) or video so we can understand the output.

Bye the way, you’re doing some good work regularly.

1 Like

Thanks for the feedback! I am preparing an AIA file.

2 Likes

I added an MP4 and AIA file to the post

2 Likes

I added an MP4 and AIA file to the post.

1 Like

im having this error with the animation component

1 Like

What kind of component is this?

It’s a Label Component

1 Like