I have an ImageButton with a background image that has some transparency. By default, the button gets a grey background where the transparency pixels are - due to the Holo.Light theme. I tried setting the background color of the button to transparent via the setBackgroundColor(Color.TRANSPARENT) method. That works just fine and does what I need except now my button no longer has the light blue color when focused/pressed and looks rather flat (no borders around it, so it looks like an image).
I googled and saw that you can assign selectors as explained here but that would mean that I have to specify an image per button state and I don't want to do that. I want to inherit the focuses/pressed colors from the theme but overwrite the normal button background (when not pressed/focused) to transparent instead of grey. How can I achieve that?? Please provide a working example as I have tried many different combinations with no success.
Edit
Thank you all for helping. I figured out how to make this work without having to recreate the same image with the focused and pressed states for each button!
Here is my solution:
My button is defined as:
<ImageButton
android:id="#+id/ImageButton05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#drawable/button" />
And my background XML file (titled button.xml) is defined as follows:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item android:drawable="#drawable/btn_default_pressed_holo_light"></item>
<item android:drawable="#drawable/network_wifi"></item>
</layer-list>
</item>
<item android:state_focused="true">
<layer-list>
<item android:drawable="#drawable/btn_default_focused_holo_light"></item>
<item android:drawable="#drawable/network_wifi"></item>
</layer-list>
</item>
<item android:state_hovered="true">
<layer-list>
<item android:drawable="#drawable/btn_default_focused_holo_light"></item>
<item android:drawable="#drawable/network_wifi"></item>
</layer-list>
</item>
<item>
<layer-list>
<item android:drawable="#drawable/btn_default_normal_holo_light"></item>
<item android:drawable="#drawable/network_wifi"></item>
</layer-list>
</item>
</selector>
You can put something into an xml file, for example, custom_button.xml and then set background="#drawable/custom_button" in the button view.
Please refer to this link as there is an xml example: Standard Android Button with a different color
I used it in my code and it worked just the way I wanted.
Reference:
Standard Android Button with a different color
Edited:
If you would rather use
Maybe you should try to set a border.
For example (Reference: Android - border for button ):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient android:startColor="#FFFFFF"
android:endColor="#00FF00"
android:angle="270" />
<corners android:radius="3dp" />
<stroke android:width="5px" android:color="#000000" />
</shape>
OR,
You could try to set the style/theme for the button. (But it would be in a separate file)
The style/theme contains the color attributes for various states of button such as focused / enabled / disabled/ etc.
For setting background color/image and having click highlight effect,
Here is an example (Reference: How to programmatically setting style attribute in a view)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="#drawable/btn_pressed" />
<item
android:state_pressed="false"
android:drawable="#drawable/btn_normal" />
</selector>
You can then apply this selector to a Button by setting the property android:background="#drawable/my_button".
I want to inherit the focuses/pressed colors from the theme but overwrite the normal button background (when not pressed/focused) to transparent instead of grey. How can I achieve that??
AFAIK you can't because the focus/pressed colors are built in to the same image resources that contain the grey background.
If you want to keep the system focus/pressed but remove the background you'll have to grab a copy of the image resources (which can be found in your SDK at /sdkroot/platforms/[version]/data/res/drawable-hdpi replace [version] with whatever api level you are after. And if needbe replace hdpi with another density) and edit out the grey button from them with a photo editor. Then make a selector that references your modified images and set that as the background for your button.
EDIT:
Here are the default holo button images for focused and pressed
You can use ImageView instead of ImageButton to solve your problem. Please set the android:background property of the ImageView to the background color of the parent.
You can write this in your xml file:
android:background="#null"
It worked for me.
if u don't need the default gray background and u need your ImageButton seems like an icon without no backgrounds just use android:background attribute and set it to
#android:color/transparent**
<ImageButton
android:id="#+id/ImageButton05"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="#android:color/transparent"
android:background="#drawable/button" />
hope that help anybody
Related
I have a set of buttons in Android which all use the same custom drawable as the background, When a button is pressed, I'd like the drawable that is used for the background to change to a different custom drawable. The code I used to do this is below:
selectedButton.setBackgroundResource(R.drawable.roundedbuttongreen)
// Change the background resource to the roundedbuttongreen drawable
the XML for the custom drawable called roundedbuttongreen.xml is:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="10dp">
<solid android:color="#4CAD71"/> <!-- this one is ths color of the Rounded Button -->
<corners
android:bottomLeftRadius="50dp"
android:bottomRightRadius="50dp"
android:topLeftRadius="50dp"
android:topRightRadius="50dp"/>
</shape>
The problem that occurs is that the colour of the button is changed but not to the correct colour the colour it changes to instead is grey, it should be green. The screenshot is below:
image of the button after the background resource has been changed, it should be green
If anyone could let me know what I'm doing wrong that would be great
I suggest you to add checked status on custom shape like this then add this shape as a background for your buttons .
<selector
xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button"
android:state_checked="false"/>
<item android:drawable="#drawable/roundedbuttongreen"
android:state_checked="true"/>
</selector>
I hope it will work with you .
I had a look through my xml code for my layout and in particular my buttons, The issue was that the buttons backgroundTint property had a value which was grey, as a result when I tried to change the background drawable, the colour of the button was always grey.
To fix the issue, I changed the value of the background tint to green and the issue was resolved
Short question:
Suppose I use this style on a button:
<Button
style="#style/Widget.AppCompat.Button.Borderless.Colored" ...
(or without the "Colored" part).
How do I set the background of it to be a selector that has a different color when being pressed? The default one is quite a bold color on pre-Lollipop...
I want to have all of the style working as the default (including padding), except for the color of the selector.
I think the easiest would be to create a typical multi-state drawable and replicate Android's default button drawable properties for padding, etc...
From the Android SDK AppCompat theme:
<!-- Colored bordered ink button -->
<style name="Base.Widget.AppCompat.Button.Colored">
<item name="android:background">#drawable/abc_btn_colored_material</item>
<item name="android:textAppearance">#style/TextAppearance.AppCompat.Widget.Button.Inverse</item>
</style>
They use the drawable abc_btn_colored_material, whose source is like this: https://github.com/dandar3/android-support-v7-appcompat/blob/master/res/drawable/abc_btn_borderless_material.xml
You can see it's just a layer list with the following multi-state drawable:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#drawable/abc_btn_default_mtrl_shape"/>
<item android:state_pressed="true" android:drawable="#drawable/abc_btn_default_mtrl_shape"/>
<item android:drawable="#android:color/transparent"/>
</selector>
https://github.com/dandar3/android-support-v7-appcompat/blob/master/res/drawable/abc_btn_default_mtrl_shape.xml
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="#dimen/abc_button_inset_horizontal_material"
android:insetTop="#dimen/abc_button_inset_vertical_material"
android:insetRight="#dimen/abc_button_inset_horizontal_material"
android:insetBottom="#dimen/abc_button_inset_vertical_material">
<shape android:shape="rectangle">
<corners android:radius="#dimen/abc_control_corner_material" />
<solid android:color="#android:color/white" />
<padding android:left="#dimen/abc_button_padding_horizontal_material"
android:top="#dimen/abc_button_padding_vertical_material"
android:right="#dimen/abc_button_padding_horizontal_material"
android:bottom="#dimen/abc_button_padding_vertical_material" />
</shape>
</inset>
So just make it yours :) Copy the drawable xml into your app and customize it.
I don't know if you will be able to access the #dimen/... from outside the SDK package, those values are defined in the SDK Values.xml, take a look at https://github.com/dandar3/android-support-v7-appcompat/blob/master/res/values/values.xml . If it's not possible, just create your own version of the dimens in your values.xml
If there's a cleaner solution any android guru can point out, I'll be glad to know!
Requested Update
Another trick is to apply a ColorFilter to the whole Button View. It's a very simple thing but not useful for all situations, as the color filter will blindly change the view as a whole (including Font color, borders, etc...). However, smartly selecting Alpha on the colors, could work for specific situations.
I'd suggest a LightningColorFilter. To apply a color filter to the Button, or to any view, you can do something like
myButton.getBackground().setColorFilter(new LightingColorFilter(Color.WHITE, Color.RED));
Check out what every color means here: http://developer.android.com/reference/android/graphics/LightingColorFilter.html
How can I override the default value of the background color for a button in a v21/v22 style.xml?
I made an application that is compatible from Honeycomb to Lollipop and I'd like to make a better style for Lollipop but I can't find how to override the default background color of buttons (for API before 21) to transparent (on API>21 I use <item name="android:colorButtonNormal">color</item> and <item name="android:colorControlHighlight">color</item>)
You can create drawable like this in v21
?xml version="1.0" encoding="utf-8"?>
<!--drawable-v21/btn_fab_default.xml-->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#color/fab_color_shadow">
<item>
<shape android:shape="oval">
<solid android:color="#color/style_color_accent" />
</shape>
</item>
</ripple>
for more information visit this link
Ok, it worked partially and I try to explain:
now I have a buttons.xml file in the main drawable folder and a buttons.xml file in the drawable-v21 folder, everything works well.
The main layout.xml contains:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
...
android:background="#drawable/buttons" />
Now my goal is set a sort of "background: none" only for v21 and more.
Why?
Because if I set a background for v21 buttons I can't use the style effect
<item name="android:colorButtonNormal">color</item> and <item name="android:colorControlHighlight">color</item>that I setted in the values-v21\style.xml
If I set up the transparent color for my v21 buttons the BackgroundTint property doesn't have effect on a Lollipop phone.
I don't want to make a layout only for lollipop devices, I'd like to find a better way to manage this problem.
(Now I have come across related questions on StackOverflow but unfortunately none of the solutions worked for me which is why I had to ask this separately)
I am a Novice to Android. The problem: I need to have an image that acts as a button. Now I understand that this can be achieved by either using an image on a standard button or by using something called as "ImageButton" (which I guess is highly recommended although I have no idea why).
Requirements: I need detailed guidance for going about this problem. Specifically, I thought the "putting-image-on-standard-button" was easier until I faced two major issues: I was unable to set the image in the center (thanks drawable-top,bottom,left6,right) and once I changed the background color to match that of the Activity screen's back-color, the button effect disappeared. Simply put, I need a moderately easy way of having an image act as a button or a button with an image which has all three effects: focussed, pressed and default. I used ImageButton but then I did not know how to make custom shapes or 9patch images to give it all the desired effects, I am pretty satisfied with the default button that android provided. All I simply need is something like a background hover over the image or something of that sort which indicates the user that the image is being pressed and the event has been generated!
Can someone please help me out with this? I need the UI to look decent and therefore, need the corresponding effects on my image/button. Thanks in Advance :)
This is my icon-image:
I wish to have some sort of hover effect around this that indicates that the image has been pressed just like any normal button.
Use ImageButton and StateList Drawable. You need selector for different button's states. You can assign different drawable for different state to imitate the onFocus or onPressed effect on normal button.
This is selector.xml in drawable folder under res:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="#color/cyan"/> <!-- pressed state -->
<item android:state_focused="true"
android:drawable="#color/cyan"/> <!-- focused state -->
<item android:drawable="#android:color/transparent"/> <!-- default state -->
</selector>
And this is color.xml in values folder under res:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="cyan">#33B5E5</color>
</resources>
Set the ImageButton's src to your image and set the background to selector.xml.
This is the final result:
There is a good tutorial here: Android ImageButton Selector Example
If someone also still has an issue with this.
I've created the selector but referred the drawable to two different image files, and used the XML in the imagebutton as a source. It worked like a charm.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_add_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/btn_add"
android:state_focused="true" />
<item android:drawable="#drawable/btn_add" />
</selector>
And the image button looks like this:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/add_button_selector"
android:background="#null"/>
create xml view
<ImageView
android:id="#+id/imageview1"
android:background="#drawable/selector_xml_name"
android:layout_width="200dp"
android:layout_height="126dp"/>
create inside draw able folder selector_xml_name.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/numpad_button_bg_selected"android:state_selected="true"></item>
<item android:drawable="#drawable/numpad_button_bg_pressed" android:state_pressed="true"></item>
<item android:drawable="#drawable/numpad_button_bg_normal"></item>
create inside draw able folder numpad_button_bg_selected.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" android:padding="90dp">
<solid android:color="#color/selected"/>
<padding />
<stroke android:color="#000" android:width="1dp"/>
<corners android:bottomRightRadius="15dp" android:bottomLeftRadius="15dp" android:topLeftRadius="15dp" android:topRightRadius="15dp"/>
I think, e.g. Curved buttons, or a circle button. If I can how?
this is very simple
Select any image as a background of your button. either of circle or curved or any image you want.
For Click Effect see state list diagram on google . its like stting a xml as a background which say what image to choose for pressed , focussed and normal state
It's a bad ideia to round buttons by using a rounded background image. I say it by (bad) experience... when in different resolutions it will appear pixilated.
You should use a drawable, with a shape rounded created by you!
Something like (selector to have effects on press, on selected..):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/greyer_bubble"
android:state_pressed="true" />
<!--When selected, use this -->
<item android:drawable="#drawable/greyer_bubble"
android:state_selected="true" />
<!--When not selected, use that -->
<item android:drawable="#drawable/green_bubble" />
</selector>
Example of one of the rounded buttons defined above.
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#color/green" />
<corners android:radius="12dp" />
</shape>
You can set image as background for button in layout design.