Android Question Set radios for imageview & Picasso

Javaneh

Member
Hello everyone

i use Picasso lib to load url image into imageview.
I want to set radios corner for my imageview.
How can i do this?
Thanks
 

Javaneh

Member
I recommend using SimpleMediaManager for this: https://www.b4x.com/android/forum/t...rk-for-images-videos-and-more.134716/#content
With SMM you can make the image round by setting REQUEST_ROUNDIMAGE: True.
Making the parent panel corners round should affect the image as well.
Hi Erel,
I would like to control the roundness of the image corners myself.
For example, I want to set different values for the top-right, top-left, etc. like this:

B4X:
Sub setCornerRadius(v As View, Rx_TopLeft As Float, Ry_TopLeft As Float, Rx_TopRight As Float, Ry_TopRight As Float, Rx_BottomRight As Float, Ry_BottomRight As Float, Rx_BottomLeft As Float, Ry_BottomLeft As Float)
    Dim jo As JavaObject = v.Background
    If v.Background Is ColorDrawable Or v.Background Is GradientDrawable Then
        jo.RunMethod("setCornerRadii", Array As Object(Array As Float(Rx_TopLeft, Ry_TopLeft, Rx_TopRight, Ry_TopRight, Rx_BottomRight, Ry_BottomRight, Rx_BottomLeft, Ry_BottomLeft)))
    End If
End Sub

However, this code doesn’t seem to work with Picasso library.

Thanks again!
 
Upvote 0

Javaneh

Member
What I truly meant is that SMM is cross platform, written in B4X and is better for B4X developers. So if OP needs help with implementing such feature I can help if he implements it with SMM :)


Erel, I don't know how to implement a custom corner radius for an ImageView using SMM. Could you please provide a sample or tutorial?

I have a list of ImageViews inside a parent panel that I implemented in a RecyclerView, and I want to apply different corner radius to each corner, just like in the code I sent above.
Thanks
 
Upvote 0

Javaneh

Member
"Erel, I haven't worked with SMM before, but I used the following code for testing. So, could you tell me how I can customize the radius of each corner of my image?"Why RecyclerView???

Create a new project. With SMM and CustomListView. Once you get it working I can help you with setting the corners.

Erel, I haven't worked with SMM before, but I used the following code for testing.

B4X:
Sub Globals
    Dim MediaManager As SimpleMediaManager
    Private Panel1 As Panel
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout")
  
    MediaManager.Initialize
    Dim extra As Map = CreateMap(MediaManager.REQUEST_ROUNDIMAGE: True, MediaManager.REQUEST_BACKGROUND: xui.Color_White)
    MediaManager.SetMediaWithExtra(Panel1, "https://downloadscdn6.freepik.com/1340/32/31672.jpg?filename=bunch-flowers-with-pink-yellow-background.jpg&token=exp=1727266960~hmac=48c3abfe28987e766e4d38ee4d5f5799&filename=31672.jpg", "", extra)
  
End Sub
So, could you tell me how I can customize the radius of each corner of my image?

Can SMM be used to manage caching, thumbnails, and other image management tasks as well?
Is SMM the correct and standard method for managing images, or is there a better method?

Thank you.
 
Last edited:
Upvote 0

Javaneh

Member
1. Why aren't you using B4XPages?
2. If are setting REQUEST_ROUNDIMAGE: True then you will get a round image.
3. Call setCornerRadius to set the corners of Panel1.
4. Set MediaManager.REQUEST_RESIZE_MODE to FILL or FILL_NO_DISTORTIONS.


Unfortunately, I haven't worked with B4xPage yet, but I will learn it soon.
Erel, unfortunately, I couldn't achieve what I wanted.
I got the following result using this code.

B4X:
Sub Globals
    Dim MediaManager As SimpleMediaManager
    Private Panel1 As Panel
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout")
    
    MediaManager.Initialize
    Dim extra As Map = CreateMap(MediaManager.REQUEST_ROUNDIMAGE: True, MediaManager.REQUEST_BACKGROUND: xui.Color_Green, MediaManager.REQUEST_RESIZE_MODE : "FILL_NO_DISTORTIONS")
    MediaManager.SetMediaWithExtra(Panel1, "https://i.ibb.co/cYy2CKB/mov-94214-1826821-ezgif-com-webp-to-jpg-converter.jpg", "", extra)
    
    setCornerRadius(Panel1,50,50,50,50,50,50,50,50)
    
End Sub

Sub setCornerRadius(v As View, Rx_TopLeft As Float, Ry_TopLeft As Float, Rx_TopRight As Float, Ry_TopRight As Float, Rx_BottomRight As Float, Ry_BottomRight As Float, Rx_BottomLeft As Float, Ry_BottomLeft As Float)
    Dim jo As JavaObject = v.Background
    If v.Background Is ColorDrawable Or v.Background Is GradientDrawable Then
        jo.RunMethod("setCornerRadii", Array As Object(Array As Float(Rx_TopLeft, Ry_TopLeft, Rx_TopRight, Ry_TopRight, Rx_BottomRight, Ry_BottomRight, Rx_BottomLeft, Ry_BottomLeft)))
    End If
End Sub


photo_2024-09-25_17-31-28.jpg





But what I really want is to achieve this:


photo_2024-09-25_17-32-57.jpg



Did I make any mistakes?
 
Upvote 0

Javaneh

Member
Remove REQUEST_ROUNDIMAGE

I have done the things you mentioned,
but the issue is that the radius is applied, but immediately the image covers the background, and the curve disappears. :(

I have attached the project.
 

Attachments

  • SMM.zip
    9.4 KB · Views: 46
Last edited:
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
I haven't checked your example. It is your choice to waste time with activities.
Full example:
B4X:
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private smm As SimpleMediaManager
    Private Panel1 As B4XView
End Sub

Public Sub Initialize
End Sub

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    smm.Initialize
    SetImageWithRoundCorners(Panel1, "https://s8.uupload.ir/files/mov_94214_1826821-ezgif.com-webp-to-jpg-converter_01x.jpg")
End Sub

Private Sub SetImageWithRoundCorners (Target As B4XView, Url As String)
    Target.Visible = False
    smm.SetMediaWithExtra(Target, Url, "", CreateMap(smm.REQUEST_CALLBACK: Me, smm.REQUEST_RESIZE_MODE: "FILL_NO_DISTORTIONS"))
    Wait For (Panel1) SMM_MediaReady (Success As Boolean, Media As SMMedia)
    If Success Then
        If Panel1.Getview(0).Tag Is B4XImageView Then
            Dim iv As B4XImageView = Panel1.Getview(0).Tag
            setCornerRadius(iv.mBase, 5dip, 5dip, 10dip, 10dip, 20dip, 20dip, 40dip, 40dip)
            iv.mBase.As(JavaObject).RunMethod("setClipToOutline", Array(True))
            Target.SetVisibleAnimated(300, True)
        End If
    End If
End Sub

Private Sub setCornerRadius(v As View, Rx_TopLeft As Float, Ry_TopLeft As Float, Rx_TopRight As Float, Ry_TopRight As Float, Rx_BottomRight As Float, Ry_BottomRight As Float, Rx_BottomLeft As Float, Ry_BottomLeft As Float)
    Dim jo As JavaObject = v.Background
    If v.Background Is ColorDrawable Or v.Background Is GradientDrawable Then
        jo.RunMethod("setCornerRadii", Array As Object(Array As Float(Rx_TopLeft, Ry_TopLeft, Rx_TopRight, Ry_TopRight, Rx_BottomRight, Ry_BottomRight, Rx_BottomLeft, Ry_BottomLeft)))
    End If
End Sub

1727413466703.png
 
Upvote 0

Javaneh

Member
I haven't checked your example. It is your choice to waste time with activities.
Full example:
B4X:
Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private smm As SimpleMediaManager
    Private Panel1 As B4XView
End Sub

Public Sub Initialize
End Sub

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPage")
    smm.Initialize
    SetImageWithRoundCorners(Panel1, "https://s8.uupload.ir/files/mov_94214_1826821-ezgif.com-webp-to-jpg-converter_01x.jpg")
End Sub

Private Sub SetImageWithRoundCorners (Target As B4XView, Url As String)
    Target.Visible = False
    smm.SetMediaWithExtra(Target, Url, "", CreateMap(smm.REQUEST_CALLBACK: Me, smm.REQUEST_RESIZE_MODE: "FILL_NO_DISTORTIONS"))
    Wait For (Panel1) SMM_MediaReady (Success As Boolean, Media As SMMedia)
    If Success Then
        If Panel1.Getview(0).Tag Is B4XImageView Then
            Dim iv As B4XImageView = Panel1.Getview(0).Tag
            setCornerRadius(iv.mBase, 5dip, 5dip, 10dip, 10dip, 20dip, 20dip, 40dip, 40dip)
            iv.mBase.As(JavaObject).RunMethod("setClipToOutline", Array(True))
            Target.SetVisibleAnimated(300, True)
        End If
    End If
End Sub

Private Sub setCornerRadius(v As View, Rx_TopLeft As Float, Ry_TopLeft As Float, Rx_TopRight As Float, Ry_TopRight As Float, Rx_BottomRight As Float, Ry_BottomRight As Float, Rx_BottomLeft As Float, Ry_BottomLeft As Float)
    Dim jo As JavaObject = v.Background
    If v.Background Is ColorDrawable Or v.Background Is GradientDrawable Then
        jo.RunMethod("setCornerRadii", Array As Object(Array As Float(Rx_TopLeft, Ry_TopLeft, Rx_TopRight, Ry_TopRight, Rx_BottomRight, Ry_BottomRight, Rx_BottomLeft, Ry_BottomLeft)))
    End If
End Sub

View attachment 157322


Dear Earl, thank you very much for your guidance.

I will definitely use b4x page in my future projects.

But right now, I've implemented a heavy project with Activity and I'm at the final stages of building this application.

The code you sent is only usable in b4xpage and gives an error in Activity.

Is there any other code that I can use in Activity?
 
Upvote 0
Top