How would I add a click effect similar to the below image for a button click event?
The button in my activity already has it's background set to an image so I'm not sure how I would add a background of a state also as in this tutorial:
Android Button color changing on onClick?
You need two image, one for normal state and another for pressed state. At first create a selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/pressed_image" android:state_pressed="true"/>
<item android:drawable="#drawable/normal_image"/>
</selector>
Add this selector in your button as a background.
Here's something similar. I am not sure though, if this fits your solution.
EDIT: It uses selector, just like #Raghunandan suggested above.
Related
While I was creating Calculator app same as installed in my S6 edge, I stuck when
design buttons. I want to make buttons look exactly same as calc app which comes in all samsung phones.I tried state button pressed but they have design like fading colors in and out for seconds which I ain't sure how to create.
by simple way create new xml file called clickable_button.xml
inside it write this code
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/button_clicked" android:state_pressed="true"/>
<item android:drawable="#drawable/button"/>
</selector>
don't for get to make two drawable files one seem clicked and another not clicked
finally set your button background with clickable_button ;)
I am new to Android, I have an image, want to change background color programmatically while clicking that icon. How to do. Please, anyone help me.
I have icon like this, before click:
I want to change like this while click, after click:
You have to see:
how to apply click event listener to image in android
and inside of the click event listener:
backgroundImg.setBackgroundColor(Color.parseColor("#FFFFFF"));
or
backgroundImg.setBackgroundColor(Color.rgb(100, 100, 50));
What you need here is a selector.
<?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>
</selector>
And then you need to create the two images, because from what I see in the examples you also set the text color.
If you later want to change the overall color of the icon you can do that using AppCompatImageView and tinting.
Two Solution Available
Use Two Images and update on android:state_selected, android:state_pressed. Similar to dzsonni answer.
Use SVG Image.Update Programmatically.See Below link
Dynamically changing SVG Image colours on Android
I am writing an Android app and now I am styling it. I am using a custom theme which is a child of Theme.Holo.Light. I really like Theme.Holo.Light because its buttons have a special effect when you click and hold it. Like the lower button in the picture below:
Not click:
click:
The upper button has been changed color. Now when I click on that button, it doesn't have that effect. I really don't understand why. Can anyone tell me why this happens and how can I get the same effect with a colored button?
And also, the colored button seems fatter.
This is because the button uses a selector to display different colors/effects/drawables based on the state of the click. You can check out the link on Color State List Resource.
To create your own you have to create a slecetor cml file and put it in your drawables folder.
For example.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/shape_btn_default_normal_gray" android:state_enabled="true" android:state_pressed="false"/>
<item android:drawable="#drawable/shape_btn_default_pressed_gray" android:state_pressed="true"/>
<item android:drawable="#drawable/shape_btn_default_disabled_gray"/>
</selector>
or with colors
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#color/dark_green" android:state_enabled="true" android:state_pressed="false"/>
<item android:drawable="#color/light_green" android:state_pressed="true"/>
<item android:drawable="#color/gray"/>
</selector>
To apply this you have to set the background drawable in your layout xml like this.
<Button
android:id="#+id/my_btn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Some text"
android:background="#drawable/selector_btn_default_gray"/>
That is the "ripple effect" of material design.You have define you own style for that effect.Link below may help you or you may search for many other answers on StackOverflow. Material effect on button with background color
It does not loses its behavior you can see after click (in your second image) the button show same scale as the above have...so by default the background is set as to show that it is button (like with padding or so) and can changes to show oncklick effect...
So when you set your desire background to button...It takes complete change on what is on presently on it and then you have to manually set onclick effect..
I am trying to change the appearance of an Android Button, but I can't get it to work. I use this code in "custom_button.xml" to handle the drawing of the button:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:drawable="#drawable/btn_normal"
/>
<item android:drawable="#drawable/btn_over"
android:state_pressed="true"/>
In my layout file I set the button's background to the custom_button drawable. The normal state works (the one that first appears), but when the button is pressed the image doesn't change. I double checked to make sure I am using different images and I am. Does anyone know why this isn't working?
Thanks!
Switch the order of the items (so pressed first, then neutral). Pressed or not, the top item is always true.
I want to create a 2-state-switch button (on/off) like in doubletwist alarm clock
-> http://www.design-by-izo.com/wp-content/uploads/2012/03/Screenshot_2012-03-30-20-11-30.png
When pressing the button it switches its caption with a fancy slide-in effect.
I already know about android animations, but anyhow I dont get this work within a single view.
EDIT: is there any way to do this, prior to ICS? (without taking ICS' code...)
Any Idea?
You're looking for an android switch - It's already been done for you. You just need to supply your own custom images for the switch's style
There is no slide effect on Android like on iPhone. However doing a two-state btn is easy. Just create an xml file like this and put the drawables in the folder:
<?xml version="1.0" encoding="utf-8"?>
<item android:drawable="#drawable/my_btn_pressed_bkgnd" android:state_pressed="true"/>
<item android:drawable="#drawable/my_btn_disabled_bkgnd" android:state_enabled="false"/>
<item android:drawable="#drawable/my_btn_unpressed_bkgnd" android:state_enabled="true"/>