Button Color and Background

Cableguy

Expert
Licensed User
Longtime User
Hi, If I change a buton's color or backgroud from its default view, it gets squared, loosing the round corners....any solution on that?
 
BUT That IS the one I am using!!!
 
Upvote 0
I used the gradient as a background and thay also lost the corners...
Again, Great News, about this new update!!!!
 
Upvote 0
Bak to this...
I'm using a bunch of buttons, and some will have background images...
My images are larger than my buttons, but that is not a problem...
However, the Buttons Gets Squared, and the small default offset in it's margins is lost too, so it appears to be a litle bigger that all others with no image...Any work around??

PS.I'm using png's
 
Upvote 0
The buttons are smaller only with DefaultDrawable,
with StateListDrawable the buttons have the whole size.
You can set the radius.

Attached a small program playing with button colors and bitmaps.

Best regards.
 

Attachments

Upvote 0
Thanks Klaus...Can I ask of you a simpler example?
Just ho to add an image to a button, png with alpha, and still keep the corners, examining your code I got lost in all the diming...
 
Upvote 0
You can add the image in the Designer.
You must add the image files with Add Images.
For Enabled Drawable set Bitmap Drawable and then in Image file choose the image file.
If you want rounded corners, the image must have the corners with 'transparent' color (like the images in the test program in my previous post).
For the buttons you can set different bitmaps for the different states (Enabled Drawable, Disabled Drawable, Pressed Drawable).

Best regards.
 
Upvote 0
Thanks Klaus, once more....

I'm still trying to understand the B4Android designer...
I have chosen to add all controls(views) by code...
I will have a better look into this...
 
Upvote 0
It's MUCH easier to set the views in the designer !
You can directly set all parameters or leave their default values, I wouldn't add the views by code.
The code in the TestButtons program sets different bitmaps or colors to buttons by code and changes them acording to a pressed or not pressed state.

Best regards.
 
Upvote 0
Been pkaying around with some examples of the canvas...
still no luck...
Code:
   Dim Canvas1 As Canvas
   Dim Bitmap1 As Bitmap
   Bitmap1.Initialize(File.DirAssets, "Conts.png")
   Dim DestRect As Rect
   DestRect.Initialize(2, 2, 20,20)
   Canvas1.Initialize(BtnB)
   Canvas1.DrawBitmap(Bitmap1, Null, DestRect)
This compiles ok, but gives me a null exception on my device
 
Upvote 0
Do you want to add the bitmap to a button with your code ?
It will not work that way.

You should do it that way:
Code:
[FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] Bitmap1 [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Bitmap  ' bitmap for enabled state[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] [COLOR=black]Bitmap2[/COLOR] [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Bitmap  ' bitmap for pressed state[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] bd1 [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]BitmapDrawable[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] bd2 [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]BitmapDrawable[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT]
[FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] [COLOR=black]sd1 [/COLOR][/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]StateListDrawable[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]Bitmap1.Initialize([/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]File[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2].DirAssets, [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000]"Conts.pgn"[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2])[/SIZE][/FONT][/SIZE][/FONT]
[FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]Bitmap2.Initialize([FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]File[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2].DirAssets, [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000][FONT=Courier New][SIZE=2][COLOR=#800000]"Conts.pgn"[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2])[/SIZE][/FONT][/SIZE][/FONT] [COLOR=#008b8b]' you can set another bitmap for the pressed state [/COLOR]
[/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]bd1.Initialize(Bitmap1)[/SIZE][/FONT]
[SIZE=2][FONT=Courier New]bd2.Initialize(Bitmap2)[/FONT][/SIZE]
[SIZE=2][FONT=Courier New]sd1.Initialize[/FONT][/SIZE]
[/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] states([/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]2[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]) [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Int[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]states([/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]0[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]) = sd1.state_enabled[/SIZE][/FONT]
[SIZE=2][FONT=Courier New]states([/FONT][/SIZE][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]1[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]) = -sd1.state_pressed[/SIZE][/FONT]
[SIZE=2][FONT=Courier New]sd1.addState2(states, bd1)[/FONT][/SIZE]
[/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]Dim[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2] states([/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]1[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]) [/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff][FONT=Courier New][SIZE=2][COLOR=#0000ff]As [/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b][FONT=Courier New][SIZE=2][COLOR=#008b8b]Int[/COLOR][/SIZE][/FONT]
[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]states([/SIZE][/FONT][/SIZE][/FONT][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080][FONT=Courier New][SIZE=2][COLOR=#800080]0[/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][/COLOR][/SIZE][/FONT][FONT=Courier New][SIZE=2][FONT=Courier New][SIZE=2]) = sd1.state_pressed[/SIZE][/FONT]
[SIZE=2][FONT=Courier New]sd1.addState2(states, bd2)[/FONT][/SIZE]
[SIZE=2][FONT=Courier New]btnB.Background = sd1 [/FONT][/SIZE]
[/SIZE][/FONT]

But all the above can be set in the designer with a few mouse clicks

Best regards.
 
Upvote 0
Thanks Klaus, but that does not what I want..
The effect acomplished by your code I can get using 3 code lines:

Dim Bitmap1 As Bitmap
Bitmap1.Initialize(File.DirAssets, "conts.png")
BtnB.SetBackgroundImage(Bitmap1)

The png is transparent, and the button does not show...only the image

PS: From what I can see, I need to resize the image, using canvas...and then aply the resulting bitmap to the button view...but I can get ir to work...
 
Last edited:
Upvote 0
The effect acomplished by your code I can get using 3 code lines:

Dim Bitmap1 As Bitmap
Bitmap1.Initialize(File.DirAssets, "conts.png")
BtnB.SetBackgroundImage(Bitmap1)
Yes, but if you set in my code Birmap2 a different bitmap you will see a change when the button is pressed !
With your code you don't see any reaction when the button is pressed.

What exactly do you want to do ?
If your png image is totaly transparent and setting it to the button you won't see anything.

Best regards.
 
Upvote 0
My png is nor completly transparent..
it has a figure in it but it's background color is transparent...
I want to Overlay it in a button view...in a way that it should just blend with it...
 
Upvote 0
Attached you find a test program, I think it shows what you want to do.
More complicated than doing it in the Designer.
It seems that it is not possible to access directly the button's bitmaps with a Canvas view.

Best regards.
 

Attachments

Upvote 0
It seems that it is not possible to access directly the button's bitmaps with a Canvas view.

So you were having problems with it too, I assume...
I kept getting the "NullException" error
 
Upvote 0
I am using b4a v1.1 that came out last week and still have this problem. What do I need to do to maintain the rounded corners and "3D" look while changing the button color?
 
Upvote 0
I am using b4a v1.1 that came out last week and still have this problem. What do I need to do to maintain the rounded corners and "3D" look while changing the button color?
The 3d effect is achieved using images. You will not be able to change the color and keep this effect. You will need to create your own images.

If you want round corners you will need to initialize a ColorDrawable and assign it to the Button. The round corners are only kept with views that have "simple" drawable and not StateListDrawable like the button.
 
Upvote 0
Back
Top