Android Question How to limit size of a round image?

[Luiz Fernando Orlandini]

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.

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.

 

[Erel]

The mutable bitmap size should be the same as the ImageView size not the Image size.

 

[Luiz Fernando Orlandini]

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.

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.

 

[Erel]

Can you post a screenshot of this?

 

[Luiz Fernando Orlandini]

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.


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

 

[Erel]

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: https://www.b4x.com/android/forum/threads/50311/#content

 

[Luiz Fernando Orlandini]

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: https://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?

 

[Erel]

Thinking in crop image first, can you help me?

You need to understand how Canvas work. I recommend you to go over the beginner's guide or users guide. They cover these topics.
https://www.b4x.com/android/documentation.html