Android Question How to limit size of a round image?

Luiz Fernando Orlandini

Active Member
Licensed User
Hi All!

I'm picked up some pieces of codes here in forum and trying to develop a Sub that can apply a round filter in ImageView.

I'm using this code.

B4X:
Public Sub loadPhoto(photo As String) As Bitmap
    Try
        Dim su As StringUtils
        Dim i As InputStream
        i.InitializeFromBytesArray(su.DecodeBase64(photo), 0, su.DecodeBase64(photo).Length)
        Dim p As Bitmap
        p.Initialize2(i)
       
        Dim cvs As Canvas = CreateBitmap(p.Width, p.Height)
          DrawRoundBitmap(cvs, p)       
        Return cvs.Bitmap
    Catch
        Dim p As Bitmap
        p.Initialize(File.DirAssets, "avatar-scholastic.png")
        Dim cvs As Canvas = CreateBitmap(p.Width, p.Height)
          DrawRoundBitmap(cvs, p)       
        Return cvs.Bitmap
    End Try
End Sub

Public Sub roundImage(Img As Bitmap) As Bitmap
    Dim cvs As Canvas = CreateBitmap(Img.Width, Img.Height)
    DrawRoundBitmap(cvs, Img)      
    Return cvs.Bitmap
End Sub

Private Sub CreateBitmap(w As Long, h As Long) As Canvas
   Dim bmp As Bitmap
   bmp.InitializeMutable(w, h)
   Dim cvs As Canvas
   cvs.Initialize2(bmp)
   Dim r As Rect
   r.Initialize(0, 0, bmp.Width, bmp.Height)
   cvs.DrawRect(r, Colors.Transparent, True, 0)
   Dim p As Path
   p.Initialize(0, 0)
   Dim jo As JavaObject = p
   Dim x = 100dip, y = 100dip, radius = 100dip As Float
   jo.RunMethod("addCircle", Array As Object(x, y, radius, "CW"))
   cvs.ClipPath(p)
   Return cvs
End Sub

Private Sub DrawRoundBitmap (cvs As Canvas, bmp As Bitmap)
   Dim r As Rect
   r.Initialize(0, 0, cvs.Bitmap.Width, cvs.Bitmap.Height)
   cvs.DrawBitmap(bmp, Null, r)
End Sub
My problem is... In most cases, my picture are in Base64 format. And after convert to input stream, I can use this code. But, in some cases I have different behaviours. The final picture gets smaller than the ImageView size, and also, in some cases, I got the final image bigger than the image view.

So, how can I solve that issue, once I need to maintain the final picture limited of ImageView size?

Thanks.
 

Luiz Fernando Orlandini

Active Member
Licensed User
The mutable bitmap size should be the same as the ImageView size not the Image size.
I tried to implement your suggestions, but the results doesn't look good.

After update my code I got printed in Image View my pictures in a bigger size, but 1/4 of a circle image.

B4X:
Public Sub loadPhoto(photo As String, width As Long, heigth As Long) As Bitmap
    Try
        Dim su As StringUtils
        Dim i As InputStream
        i.InitializeFromBytesArray(su.DecodeBase64(photo), 0, su.DecodeBase64(photo).Length)
        Dim p As Bitmap
        p.Initialize2(i)
       
        Dim cvs As Canvas = CreateBitmap(width, heigth)
           DrawRoundBitmap(cvs, p)       
        Return cvs.Bitmap
    Catch
        Dim p As Bitmap
        p.Initialize(File.DirAssets, "avatar-scholastic.png")
        Dim cvs As Canvas = CreateBitmap(width, heigth)
           DrawRoundBitmap(cvs, p)       
        Return cvs.Bitmap
    End Try
End Sub

Public Sub roundImage(Img As Bitmap, Width As Long, Heigth As Long) As Bitmap
    Dim cvs As Canvas = CreateBitmap(Width, Heigth)
    DrawRoundBitmap(cvs, Img)       
    Return cvs.Bitmap
End Sub

Private Sub CreateBitmap(w As Long, h As Long) As Canvas
   Dim bmp As Bitmap
   bmp.InitializeMutable(w, h)
   Dim cvs As Canvas
   cvs.Initialize2(bmp)
   Dim r As Rect
   r.Initialize(0, 0, bmp.Width, bmp.Height)
   cvs.DrawRect(r, Colors.Transparent, True, 0)
   Dim p As Path
   p.Initialize(0, 0)
   Dim jo As JavaObject = p
   Dim x = 100dip, y = 100dip, radius = 100dip As Float
   jo.RunMethod("addCircle", Array As Object(x, y, radius, "CW"))
   cvs.ClipPath(p)
   Return cvs
End Sub

Private Sub DrawRoundBitmap (cvs As Canvas, bmp As Bitmap)
   Dim r As Rect
   r.Initialize(0, 0, cvs.Bitmap.Width, cvs.Bitmap.Height)
   cvs.DrawBitmap(bmp, Null, r)
End Sub
in loadPhoto, width and height I'm sending the ImageView width and heigth.
 

Luiz Fernando Orlandini

Active Member
Licensed User
Sure. For bigger devices, the results are even worst as you can see attached.

Need some help to have a awesome APP with B4A.:)

This one is the result in Galaxy S3 Mini device. The first image, you can see that haven't filled the ImageView.
Screenshot_2015-03-06-22-39-59.png

This one, is the result in Galaxy S5. All images has a strange behaviour.
IMG_1096.JPG
 

Erel

Administrator
Staff member
Licensed User
B4X:
Dim x = 100dip, y = 100dip, radius = 100dip As Float
 jo.RunMethod("addCircle", ArrayAs Object(x, y, radius, "CW"))
Why are you using 100dip here? Based on the screenshot this is not the size of the circle.

I recommend you to first crop correctly the image and see that it exactly matches the ImageView. Only then you should apply the circle filter.
There is also a new library that can help you with the filter: http://www.b4x.com/android/forum/threads/50311/#content
 

Luiz Fernando Orlandini

Active Member
Licensed User
B4X:
Dim x = 100dip, y = 100dip, radius = 100dip As Float
jo.RunMethod("addCircle", ArrayAs Object(x, y, radius, "CW"))
Why are you using 100dip here? Based on the screenshot this is not the size of the circle.

I recommend you to first crop correctly the image and see that it exactly matches the ImageView. Only then you should apply the circle filter.
There is also a new library that can help you with the filter: http://www.b4x.com/android/forum/threads/50311/#content
I tried this lib Erel, but It start to throw some exceptions, when use in different activities. I can't understand why, maybe cause I serialize the Base64 string in a Bitmap, to after call the library.

Thinking in crop image first, can you help me?
 
Top