ImageView with rounded corners

sn00zerman · Jan 29, 2012

Hello all,

I'm currently very busy with writing my first real big app on Android.
(I already wrote some test-apps and some small personal things, but this new app, is aimed for modelrailroad enthousiasts (freeware))

I'm currently strugling with images with rounded corners.
I can create a rounded corner, but then my image dissapear :-(

I do the following:
- create a colordrawable object, initialise it with a color and rounded corner radius.
- assign this object to the "background" property of an imageview.
- assign the bitmap to the imageview.
* This shows the image, but no rounded corners.

When I assign the bitmap first, and set the background property afterwards, I get rounded corners, but the bitmap is "gone" ...

I also tried to assign the bitmap as backgroundimage, but this gives the same result. I did take a look in the forum, but found no real answer to this question.

Who can help me out with this ?

Thanks in advance,
Kris

Erel · Jan 30, 2012

It can be done with a nine patch image that is transparent at the middle.

A panel with the nine patch image is located above the ImageView.

See this tutorial: Nine patch images tutorial

sn00zerman · Jan 30, 2012

You really are a genius

I'm going to give this a try ...

thanks,
Kris

Erel · Jan 30, 2012

You really are a genius

Actually it is based on a solution proposed in Stackoverflow.com

sn00zerman · Jan 30, 2012

lol nevertheless

I'm getting somewhere, I have been reading for several hours now, and I think I'm still missing a small piece of the puzzle ...

I managed to get round corners on an imageview, however, the corners are now black ... (no matter what I change)
My background color of my application is darkgray, so now I still need a way to fix this color issue.
Do I need to modify this in the 9.png file, or should I change some programming code ?

Thanks once again,
best regards,
Kris

Erel · Jan 30, 2012

You will need to modify the 9.png file. Don't forget to set it to be read-only when you are done.

sn00zerman · Jan 30, 2012

PERFECT !

I finally managed to "understand" the principle of the .9.png files

I now have a scrollview, with panels in it,
every panel contains an imageview, a few labels etc ...
My images do have rounded corners in the same color as my panels,
and whenever I click on a panel, the panel changes color, and the rounded
corners of my images, do get the same color as the new panel color

not bad, after just a few days of coding with basic4android, I wish that M$ products where also that easy to use
(I used to develop in M$ C# .NET, but now I'm "promoted" to business-line analyst/architect, so I leave the "dirty coding" to someone else during my job, I only write software (android, Microchip PIC, Atmel AVR etc ...) during my "spare time" for hobby-projects

thank you once again,
Kris

canalrun · May 30, 2013

sn00zerman said:
PERFECT !
I finally managed to "understand" the principle of the .9.png files
Kris

I found another way to produce ImageViews containing rounded corner bitmaps. It uses a new library, RSImageProcessing, from XverhelstX.

B4X:

  Dim j As Int
  Dim s As String
  Dim img As ImageView
  Dim b As Bitmap
  Dim rsie As RSImageEffects
  Dim rsip As RSImageProcessing
     
  rsip.Initialize
  ' s = some full file path to image like "/mnt/pictures/myimg.jpg"
  ' j = desired width and height
  
  b = LoadBitmap("", s)
  b = rsip.createScaledBitmap(b, j, j, False) ' createScaledBitmap seems to produce a better compressed image
  img.Bitmap = rsie.RoundCorner(b, 5) ' round bitmap corners

The resulting bitmap in the ImageView shows rounded corners.

Barry.

Mashiane · Nov 24, 2015

canalrun said:
I found another way to produce ImageViews containing rounded corner bitmaps. It uses a new library, RSImageProcessing, from XverhelstX.

B4X:

Dim j As Int Dim s As String Dim img As ImageView Dim b As Bitmap Dim rsie As RSImageEffects Dim rsip As RSImageProcessing rsip.Initialize ' s = some full file path to image like "/mnt/pictures/myimg.jpg" ' j = desired width and height b = LoadBitmap("", s) b = rsip.createScaledBitmap(b, j, j, False) ' createScaledBitmap seems to produce a better compressed image img.Bitmap = rsie.RoundCorner(b, 5) ' round bitmap corners

The resulting bitmap in the ImageView shows rounded corners.

Barry.

Perfect, thanks a lot!

Mashiane · Nov 24, 2015

canalrun said:
I found another way to produce ImageViews containing rounded corner bitmaps. It uses a new library, RSImageProcessing, from XverhelstX.

B4X:

Dim j As Int Dim s As String Dim img As ImageView Dim b As Bitmap Dim rsie As RSImageEffects Dim rsip As RSImageProcessing rsip.Initialize ' s = some full file path to image like "/mnt/pictures/myimg.jpg" ' j = desired width and height b = LoadBitmap("", s) b = rsip.createScaledBitmap(b, j, j, False) ' createScaledBitmap seems to produce a better compressed image img.Bitmap = rsie.RoundCorner(b, 5) ' round bitmap corners

The resulting bitmap in the ImageView shows rounded corners.

Barry.

Just did some few changes, tested, working nice..

B4X:

Sub Image_RoundCorners(img As ImageView, imgDir As String, imgPath As String, imgRadius As Int)
    Dim b As Bitmap
      Dim rsie As RSImageEffects
      Dim rsip As RSImageProcessing
    rsip.Initialize
    b = LoadBitmapSample(imgDir, imgPath,100%x, 100%y)
    b = rsip.createScaledBitmap(b, img.width, img.height, False) ' createScaledBitmap seems to produce a better compressed image
    img.Bitmap = rsie.RoundCorner(b, imgRadius) ' round bitmap corners
End Sub

ImageView with rounded corners

sn00zerman

Member

Erel

B4X founder

Attachments

sn00zerman

Member

Erel

B4X founder

sn00zerman

Member

Erel

B4X founder

sn00zerman

Member

canalrun

Well-Known Member

Mashiane

Expert

Mashiane

Expert

Similar Threads

ImageView with rounded corners

Member

B4X founder

Attachments

Member

B4X founder

Member

B4X founder

Member

Well-Known Member

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency