Button Color and Background

Cableguy

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?
 
Sort by date Sort by votes
Cableguy

Cableguy

Expert
Licensed User
Longtime User
BUT That IS the one I am using!!!
 
Upvote 0
Cableguy

Cableguy

Expert
Licensed User
Longtime User
I used the gradient as a background and thay also lost the corners...
Again, Great News, about this new update!!!!
 
Upvote 0
Cableguy

Cableguy

Expert
Licensed User
Longtime User
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
klaus

klaus

Expert
Licensed User
Longtime User
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

  • TestButtons.zip
    10.4 KB · Views: 488
Upvote 0
Cableguy

Cableguy

Expert
Licensed User
Longtime User
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
klaus

klaus

Expert
Licensed User
Longtime User
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
Cableguy

Cableguy

Expert
Licensed User
Longtime User
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
klaus

klaus

Expert
Licensed User
Longtime User
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
Cableguy

Cableguy

Expert
Licensed User
Longtime User
Been pkaying around with some examples of the canvas...
still no luck...
B4X: 
   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
klaus

klaus

Expert
Licensed User
Longtime User
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:
B4X: 
[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
Cableguy

Cableguy

Expert
Licensed User
Longtime User
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
klaus

klaus

Expert
Licensed User
Longtime User
Cableguy said:
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)
Click to expand...
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
Cableguy

Cableguy

Expert
Licensed User
Longtime User
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
klaus

klaus

Expert
Licensed User
Longtime User
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

  • TestButtons1.zip
    8.7 KB · Views: 315
Upvote 0
Cableguy

Cableguy

Expert
Licensed User
Longtime User
klaus said:
It seems that it is not possible to access directly the button's bitmaps with a Canvas view.
Click to expand...

So you were having problems with it too, I assume...
I kept getting the "NullException" error
 
Upvote 0
Rusty

Rusty

Well-Known Member
Licensed User
Longtime User
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
Erel

Erel

B4X founder
Staff member
Licensed User
Longtime User
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?
Click to expand...
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
You must log in or register to reply here.
Top