I have an ImageButton with a transparent image in it. I changed the background color of the ImageButton.
When an ImageButton that has the default color is pressed the button shows that it has been pressed by "glowing" for a very short time. But when the background color is changed the "glow" effect doesn't show. The different behavior doesn't have to do with the image, because the "glow" effect is shown when the button has the standard "grayish" color.
How could I have the "glow" effect in a colored Imagebutton?
P.S. I am aware of how to change the color of the ImageButton on a click event. But I want to have the same effect with the default grey-colored ImageButton.
The same thing (glowing not shows) happen also with the Button object.
You can use this library
RippleView
You can use ColorStateList to define your button's pressed color.
You should review the documentation I linked above for details. Here's a quick example from the doc, which covers the basics:
XML file saved at res/color/button_text.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#ffff0000"/> <!-- pressed -->
<item android:state_focused="true"
android:color="#ff0000ff"/> <!-- focused -->
<item android:color="#ff000000"/> <!-- default -->
</selector>
This layout XML will apply the color list to a View:
<Button
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="#string/button_text"
android:textColor="#color/button_text" />
In your case, you'll want to set android:background to point to your new XML resource, instead of android:textColor.
Hope that helps.
The android have the glow effect as a transparent background resource, so I solved the problem by putting a colored view behind the button and setting the button background to the transparent glow effect.
For example in my xml like:
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#color/custom_color"
android:orientation="vertical">
<Button
android:id="#+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
and in my onCreate:
TypedValue outValue = new TypedValue();
getContext().getTheme().resolveAttribute(R.attr.selectableItemBackground, outValue, true);
Button mButton = (Button) findViewById(R.id.button);
mButton.setBackgroundResource(outValue.resourceId);
Its working only, if you have just one buttons in your LinearLayout, if you want to put there something else you can use a view inside a RelativeLayout with the same parameters as your button.
Tell me if you have any other questions!
Related
While setting up an ImageButton, I noticed that it had some gray background color that didn't go with the rest of the UI.
This was the code for the ImageButton
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_material"/>
But when I tried to overwrite the background to transparent like so:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:src="#drawable/ic_material"
android:background="#android:color/transparent"/>
The button completely lost its shape and padding
Does anyone know why this is happening?
The reason imageButton have a background is because it's a button basically with an image instead of text. So according to android documentation:
ImageButton public class ImageButton extends ImageView
Displays a button with an image (instead of text) that can be pressed
or clicked by the user. By default, an ImageButton looks like a
regular Button, with the standard button background that changes color
during different button states. The image on the surface of the button
is defined either by the android:src attribute in the
XML element or by the setImageResource(int) method. To remove the
standard button background image, define your own background image or
set the background color to be transparent. To indicate the different
button states (focused, selected, etc.), you can define a different
image for each state. E.g., a blue image by default, an orange one for
when focused, and a yellow one for when pressed. An easy way to do
this is with an XML drawable "selector." For example:
version="1.0" encoding="utf-8"?> <selector
> xmlns:android="http://schemas.android.com/apk/res/android">
> <item android:state_pressed="true"
> android:drawable="#drawable/button_pressed" /> <!-- pressed -->
> <item android:state_focused="true"
> android:drawable="#drawable/button_focused" /> <!-- focused -->
> <item android:drawable="#drawable/button_normal" /> <!-- default --> </selector>
Save the XML file in your project res/drawable/ folder and then reference it as a drawable for the source of your
ImageButton (in the android:src attribute). Android will automatically
change the image based on the state of the button and the
corresponding images defined in the XML. The order of the
elements is important because they are evaluated in order. This is why
the "normal" button image comes last, because it will only be applied
after android:state_pressed and android:state_focused have both
evaluated false. See the Buttons guide.
for more info take a look at the documentation: Image Button
It's happening because you set the color as a background, and color doesn't have size/dimension.
You can check it with any of image as background and the view will adopt the size of that image.
We can say that background image doesn't support scale type.
Only src support scale type in ImageView or other class that extends ImageView
Use android:background="#000000" or
imageButton.setBackgroundDrawable(null);
I have some problems to add the blue color over the button when the user press it. It works if there is no drawable in background for this button but in my case, i have to add a custom background and i want the blue color when the user clicks on the button.
Here is my code
<Button
android:id="#+id/create_profile"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/info_account"
android:layout_centerHorizontal="true"
android:background="#drawable/btn_create_profile" />
Blue color is not something that platform draws for you. Standard buttons have a selector drawable as their background, which involves a set of images for a view. So for button for example it is a standard button image, pressed button image (with blue overlay drawn above), disabled (half transparent), etc.
Button knows it's current state and displays appropriate image.
So what you want to do is to draw a pressed button yourself and create a selector drawable like this:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="#drawable/your_pressed_button/>
<item android:drawable="#drawable/your_normal_button/>
</selector>
I believe it's worth reading about Drawable Resources. You can also find examples of button states generated here.
You should make custom drawable :
For this you have to simply create a xml file in your drawable folder and write :
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="false"
android:drawable="#drawable/ic_back" />
<item android:state_pressed="true"
android:drawable="#drawable/ic_back_pressed" />
<item android:state_focused="true"
android:drawable="#drawable/ic_back_pressed" />
</selector>
and now set this drawable in background of your button.
Here, in normal state background id ic_back
and pressed and focus state background is ic_back_pressed
For creating solid drawable shapes (for example, if you want solid color backround as drawable you can go here.. )
Is this possible? I have for example simple linearLayout with selector to create "click effect":
<LinearLayout
android:id="#+id/clickToChangeColor"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#color/click_effect" />
This is selector click_effect:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/pressed" android:state_enabled="true" android:state_pressed="true"/>
<item android:drawable="#drawable/unpressed" android:state_enabled="false"/>
</selector>
Everything works just fine, but when I press on this layout, I would like to launch activity (like color picker - but it doesn't matter) and then change color of linearlayout for example to blue. BUT: keep selector "click effect". Trying to do this almost for 2 hours, but nothing works...
PS: I know it can be done for example with another layout inside this layout, apply some padding and apply selector to outer layout and then I can change background of inner layout etc - but it's only ugly workaround
<ImageView
android:id="#+id/imageViewSelectedColor"
android:layout_width="50dp"
android:layout_height="50dp"
android:background="#color/click_effect"
android:src="#color/picked color" />
Use an image view instead now you can change src according to picked color.
I want to create "button" in XML layout (if possible) which has background image based on state (this image is NOT 9-patched) and with text. Which component to use?
My button_states.xml looks like:
<?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/my_pressed" />
<item android:drawable="#drawable/my_normal" />
</selector>
my_pressed and my_normal are NON 9-patched images.
Now if I use regular button
<Button
android:id="#+id/my_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/button_states"
android:text="#string/my_text" />
button it is rendered without background image.
How to do "button" with text and stateful "static" backgrounds?
Thx
Regards
The easiest way to accomplish this is doing it in code. Use setBackgroundDrawable() on the (regular) Button to set the desired background. If you use your selector as the provided drawable you should be fine.
[Edit] To do this using resources, place your button_state.xml in the res\drawable folder in use the following code:
Button button = (Button) findViewById(R.id.my_button);
button.setBackgroundResource(R.drawable.button_state);
Why is this button changing color to orange when clicked:
<Button android:background="#android:drawable/btn_plus" ...>
but this one is not?
<Button android:background="#drawable/ic_btn_round_plus" ...>
Edit:
Found another type of button (text and image) that changes color to orange when clicked
without having to create a selector:
<Button android:text="List" android:drawableTop="#drawable/list" ...>
because the first one is from android framework and has a selector associated to it, and the other one is a custom from your code, and you obviously didn't put a selector on it.
This is nicely explained here.
In short you need to put a selector drawable in the background of your button, instead of just one drawable :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="#drawable/ic_btn_round_plusorange" />
<item android:state_pressed="true" android:drawable="#drawable/ic_btn_round_plusorange" />
<item android:drawable="#drawable/ic_btn_round_plus" />
</selector>
and you create you copy of your drawable but with an orange color added to it for instance.
Android system will switch the drawable when the button is clicked or selected.