Using an image in an Android effects button

Question

(Now I ran into related issues with StackOverflow, but unfortunately none of the solutions worked for me, so I had to ask about it separately)

I am new to Android. Problem: I need to have an image that acts like a button. Now I understand that this can be achieved by using the image on a standard button or using something called "ImageButton" (which I believe is highly recommended, although I don’t know why).

Requirements: I need a detailed guide to solve this problem. In particular, I thought that "put-image-on-standard-button" was easier until I ran into two serious problems: I was unable to set the image in the center (thanks drawable-top, bottom, left6, right) and once changed the background color in accordance with the color of the back screen "Activity", the button effect disappeared. Simply put, I need a moderately simple way to make the image act like a button or a button with an image that has all three effects: focused, pressed, and by default. I used ImageButton, but then I did not know how to make custom shapes or 9patch images to give them all the desired effects, I'm pretty happy with the default button provided by android. All I just need is something like a background hover over the image or something like that that tells the user that the image is clicked and an event has been generated!

Can someone please help me with this? I need the user interface to look decent and therefore need the appropriate effects for my image / button. Thanks in Advance :)

This is my image icon:

I want to have some kind of hover effect around this, which indicates that the image has been pressed just like any normal button.

Answer 1

Use ImageButton and StateList Drawable . You need a selector for different button states. You can assign different values ​​for different states to simulate the onFocus or onPressed effect on a regular button.

This is selector.xml in the drawable folder in the res section:

 <?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 the values folder under res :

 <?xml version="1.0" encoding="utf-8"?> <resources> <color name="cyan">#33B5E5</color> </resources> 

Install ImageButton src on your image and set the background parameter to selector.xml .

This is the end result:

There is a good tutorial here: Example of selecting Android ImageButton

Answer 2

create xml view

 <ImageView android:id="@+id/imageview1" android:background="@drawable/selector_xml_name" android:layout_width="200dp" android:layout_height="126dp"/> 

create an accessible selector_xml_name.xml folder inside

 <?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 an internal folder capable of inserting 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"/> 

Answer 3

If anyone else has a problem with this. I created a selector, but referenced two different image files and used the XML in the sample 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"/>