7

(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: enter image description here

I wish to have some sort of hover effect around this that indicates that the image has been pressed just like any normal button.

Darth Coder
  • 1,738
  • 7
  • 33
  • 56
  • 1
    You can use gradients to achieve this. Refer http://stackoverflow.com/questions/16514221/android-image-button-or-button-highlighted-with-effect-when-pressed – Brijesh Thakur Jun 17 '13 at 10:47
  • 1
    why not use a layout, posibily a RelativeLayout with an image, add an OnClickListener to the RelativeLayout. And you can write a selector with focussed, pressed and default. Take a look into this selector, it's simple http://stackoverflow.com/questions/14023886/android-button-selector – Milan Jun 17 '13 at 10:49
  • Thanks for the references. Is it not possible for me to work with the default state animations that android provides us with? – Darth Coder Jun 17 '13 at 10:55

3 Answers3

19

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:

Before After

There is a good tutorial here: Android ImageButton Selector Example

Sam R.
  • 16,027
  • 12
  • 69
  • 122
  • So apart from having three different images for the three states, it isnt possible for me to use the default animation that android provides? – Darth Coder Jun 17 '13 at 10:55
  • @DarthCoder, What kind of animation? Drawable animation is available. If you show some image of your desired result I think we can help further. – Sam R. Jun 17 '13 at 10:57
  • What I meant to say is I like the default blue (JellyBean) color effect of android when the button is pressed. And by default the button looks dark gray but that can be changes using the xml. When I added the image to the button using drawable-top and then changed the background color of my button to black to match the activity background, I lost the button-pressed effect. Also, I am unable to get the image in the center of the button (although I could get the image in the center of an ImageButton using android:gravity="center") – Darth Coder Jun 17 '13 at 11:00
  • yea something similar!! I mean just that blue box around the image is slightly bigger. Can this be done? Thanks :) – Darth Coder Jun 17 '13 at 11:23
  • One question though: I do not have a drawable folder, I have drawable-* (where *:hdpi etc.) So where should I create and place the selector.xml file? – Darth Coder Jun 18 '13 at 05:51
2

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"/>
nmirkov
  • 59
  • 7
1

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"/>

Kumar
  • 51
  • 2