B4A Library [B4X][B4A] B4XDaisyAvatar - Shaped Profile Images & Status Indicators

Hi Fam

I am pleased to introduce B4XDaisyAvatar, a versatile image component part of the B4X Daisy UI Kit series.

Inspired by the DaisyUI avatar utility, this component simplifies the creation of user profile pictures. It handles complex shape masking, status indicators (online/offline), and border rings automatically, drawing directly to a native canvas for high performance.

The "Glue": B4XDaisyVariants B4XDaisyAvatar is heavily powered by B4XDaisyVariants. The variants module calculates the complex geometry for shapes like Squircles and Hexagons and resolves abstract size tokens (e.g., "12" or "20") into native dip values.

Key Features
• Shape Masks: Supports over 20 built-in shapes including circle, squircle, hexagon, heart, star, and decagon.
• Status Indicators: Built-in "Online" (green dot) and "Offline" modes. The component automatically draws the status dot and a contrasting ring border around the avatar.
• Smart Cropping: Implements "Object-Fit: Cover" logic to ensure images fill the shape without distortion.
• Theme Aware: Can derive ring and status colors from your app's semantic palette (Primary, Secondary, Accent, etc.).

🛠 Dependencies
1. B4XDaisyVariants.bas (Static Code Module) - Included in the attachment
1. Designer Configuration: Add B4XDaisyAvatar to your layout.
• Mask: squircle
• Width/Height: 16 (Tailwind size token)
• ShowOnline: True

Sub Globals
    Private Avatar1 As B4XDaisyAvatar
    Private Avatar2 As B4XDaisyAvatar
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("MainLayout")
   
    ' Set image from assets
    Avatar1.SetAvatar("user_profile.jpg")
   
    ' Change status to Online (shows green dot + ring)
    Avatar1.SetStatus("online")
   
    ' Dynamic configuration for a second avatar
    Avatar2.SetAvatar("colleague.png")
    Avatar2.SetAvatarMask("hexagon")
    Avatar2.SetRingColor(xui.Color_Blue)
    Avatar2.SetRingWidth(3dip)
End Sub

' Handle Clicks
Sub Avatar1_AvatarClick(Payload As Object)
    Log("User clicked avatar!")
End Sub

Designer Properties
• Image: Path to the image file (Assets or full path).
• Mask: The shape of the avatar (circle, square, squircle, hexagon, heart, etc.).
• Status: Sets the initial state (none, online, offline).
• ShowOnline: Toggles the visibility of the status dot.
• RingWidth: Width of the border ring (useful for separating the avatar from the background).
• Shadow: Apply a drop shadow depth (xs to 2xl).

Related Content

 

[paragkini]

Is this view compatible with B4J? I see its tag as B4X and used the library. However, B4J is giving error while compiling.

B4J Version: 10.50
Parsing code.    Error
Error parsing program.
Error description: Unknown type: panel
Are you missing a library reference?
Error occurred on line: 177 (B4XDaisyAccordion)
        Dim p As Panel

Tip: press Ctrl + R to export IDE state for AI assistants.

I tried modifying the B4XDaisyAccordion.bas with below code and then re-zipping and renaming the file. But after that libraries pane shows version 0.00 and gives even more errors.

    #If B4J
    Dim p As Pane
    #Else If B4A   
    Dim p As Panel
    #End If

Am I doing something wrong here?

 

[Mashiane]

Not yet

 

[paragkini]

Ok. Thanks.

 

[Mashiane]

[UPDATE] B4XDaisyAvatar: Now with Glassmorphism, Blur Radius & Custom Resize Modes!

Hi Fam!

I'm excited to announce a major visual update to the B4XDaisyAvatar component. While the previous versions gave us a solid foundation of DaisyUI/Tailwind styles, this new release focuses entirely on modern, trendy visual capabilities! If you're looking to give your apps a premium, 2026 feel, you are going to love these additions.
Here are the highly-requested enhancements we just shipped:

1. Glass Effect (Glass): You can now enable a beautiful translucent glass shine with highlight borders over your avatars! Just set the boolean property to True.
2. Blur Radius (BlurRadius): Easily blur your avatar images directly inside the view. You can set the blur level from 1 (subtle) to 25 (heavy scale-down blur factor).
3. Resize Modes (ResizeMode): Stop worrying about distorted profile pictures. You now have complete scaling control with FIT, FILL, FILL_NO_DISTORTIONS, and NONE modes (similar to the standard B4XImageView).

You can also directly set an avatar from the B4XDaisyUIFileInput component. This uses a ContentChooser underneath.

These features are exposed both inside the Designer and programmatically.

Beginner-Friendly Usage Example: If you prefer adding and setting up the avatar purely through code rather than the designer, here is a quick snippet demonstrating how to initialize the view, configure the brand new properties, and trap the click event:

' 1. Declare the component in Class_Globals
Private MyTrendyAvatar As B4XDaisyAvatar

Sub B4XPage_Created (Root1 As B4XView)
    ' 2. Initialize the avatar and pass the Event Name ("MyTrendyAvatar")
    MyTrendyAvatar.Initialize(Me, "MyTrendyAvatar")
   
    ' 3. Add it to your layout (Parent, Left, Top, Width, Height)
    MyTrendyAvatar.AddToParent(Root1, 20dip, 20dip, 100dip, 100dip)
   
    ' 4. Load an image
    MyTrendyAvatar.setAvatar("profile_pic.png")
   
    ' --- THE NEW FEATURES ---
   
    ' Set the perfect aspect ratio scaling
    MyTrendyAvatar.setResizeMode("FILL_NO_DISTORTIONS")
   
    ' Apply a trendy glassmorphism shine
    MyTrendyAvatar.setGlass(True)
   
    ' Optional: Add a subtle blur to the image (0 = disabled, 1 to 25 = blur factor)
    MyTrendyAvatar.setBlurRadius(5)
End Sub

' 5. Trap the Click Event!
Private Sub MyTrendyAvatar_Click (Tag As Object)
    Log("The new Glass Avatar was clicked!")
End Sub

Enjoy building beautiful interfaces, and let me know how you are using these new effects in your projects!