Android Question ImageView with bitmap & background color?

Computersmith64 · Nov 14, 2017

Based on testing I've done, I think I already know the answer to this - but just in case I've missed something...

I have an image with a transparent background that I want to put in an ImageView & then be able to set different background colors of the view. If I was doing it in Java, apparently the XML for the view would look like this:

<ImageView
layout_width="match_parent"
layout_height="match_parent"
src="@drawable/myImage"
background="@Color/myBgColor"/>

I can't seem to find a way to do this in B4A. I've tried loading the bitmap to ImageView.Bitmap & then setting the ImageView.Background with a ColorDrawable (also tried the other way around), setting a background image with ImageView.SetBackGroundImage, etc... but I can't get the ImageView to show both the image & the background color at the same time - I always end up with one or the other.

Any ideas?

- Colin.

eurojam · Nov 14, 2017

just put a panel with color behind the imageview, see attached testproject

Computersmith64 · Nov 14, 2017

eurojam said:
just put a panel with color behind the imageview

Thanks @eurojam - I did think of that too, but I was hoping that there was a solution that doesn't involve adding more views (I actually have multiple images that I want to do this with).

- Colin.

eurojam · Nov 14, 2017

let's see, may be the experts will have more ideas...

Cableguy · Nov 14, 2017

The simplest way of achieving that (I don't think that imageview has a background color property) is to use a panel INSTEAD of an image view. That way you can set the panel's background color and then set it's background image. The background color will show through the transparent portions of the image.

Computersmith64 · Nov 14, 2017

Cableguy said:
The simplest way of achieving that (I don't think that imageview has a background color property) is to use a panel INSTEAD of an image view. That way you can set the panel's background color and then set it's background image. The background color will show through the transparent portions of the image.

Yeah - I guess I'll have to stop being lazy & change out the ImageViews for Panels. I was trying to avoid it because it's an old app & has a lot of code around those ImageViews. Hopefully it'll be reasonably straightforward.

The annoying thing is that in Android Studio I can set the ImageView.src property to the image & then the ImageView.background property to a color & it works perfectly - but the B4A ImageView doesn't seem to have an equivalent to the src property (or if it does, it's implemented differently).

- Colin.

Cableguy · Nov 14, 2017

In the code, you "only" need to change the view type definition, thus keeping the naming, and add the necessary properties. This way your code will automatically highlight the "mistypes" and will be easier to correct and alter.

JordiCP · Nov 14, 2017

I've tested it for curiosity. With B4A's Imageview it works strange

The attached project works with ImageViews but need to use JavaObject to achieve the desired result (click on the ImageView)

klaus · Nov 14, 2017

To do what you want you, have two possibilities with B4A standard functions without JordiCps' solution:
As already suggested, a Panel as the background and the ImageView on top.
Or use a canvas like in the routne below:

B4X:

Private Sub ChangeColor(v As View, Color As Int, Filename As String)
    Private cvs As Canvas
    Private rct As Rect
  
    rct.Initialize(0, 0, v.Width, v.Height)
    cvs.Initialize(v)
  
    cvs.DrawColor(Color)
    cvs.DrawBitmap(LoadBitmap(File.DirAssets, Filename), Null, rct)
    v.Invalidate
End Sub

This works with any view.
I assume that all the image files are in the DirAssets folder.

The solution suggested by Cableguy doesn't work. When you set the set the background image the background color is lost and th etransparent parts of the bitmap show the color of the underlying views.

Attached a small test program.

PS. Didn't think of JordiCps' solution, it came just before I posted mine.
I would prefer his solution, eventhough you need the JavaObject library.

Computersmith64 · Nov 14, 2017

Thanks to all of you who made suggestions. In the end I went with a modified version of what @klaus suggested - because I remembered that I need rounded corners (due to the bitmap having rounded corners). Here's what I ended up with:

B4X:

Private Sub setDieValue(v As View, Color As Int, bmp As Bitmap)
    Private cvs As Canvas
    Private rct As Rect
    Private cd As ColorDrawable

    rct.Initialize(0, 0, v.Width, v.Height)
    cvs.Initialize(v)
    cd.Initialize(Color, 5dip)
    cvs.DrawDrawable(cd, rct)
    cvs.DrawBitmap(bmp, Null, rct)

    v.Invalidate
End Sub

Works perfectly!

- Colin.

Informatix · Nov 15, 2017

You can look also at BetterImageView.

Android Question ImageView with bitmap & background color?

Computersmith64

Well-Known Member

eurojam

Well-Known Member

Attachments

Computersmith64

Well-Known Member

eurojam

Well-Known Member

Cableguy

Expert

Computersmith64

Well-Known Member

Cableguy

Expert

JordiCP

Expert

Attachments

klaus

Expert

Attachments

Computersmith64

Well-Known Member

Informatix

Expert

Similar Threads

Android Question ImageView with bitmap & background color?

Well-Known Member

Well-Known Member

Attachments

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Expert

Expert

Attachments

Expert

Attachments

Well-Known Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency