[android] ImageButton in Android

Can anybody tell me how to resize the imageButton to fit the image exactly? This is the code that I tried, but the image is placed at the position that I am locating using android:scaleType, but I am not able to reduce the size of imageButton. Please help me out in rectifying this issue. The code that I tried is:

<ImageButton>
android:id="@+id/Button01"
android:scaleType="fitXY" // i have tried all the values for this attr
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:cropToPadding="false"
android:paddingLeft="10dp"
android:src="@drawable/eye"> // this is the image(eye)
</ImageButton>

android:background="@drawable/eye"

works automatically.

android:src="@drawable/eye"

was what I used with all the problems of resizing the image the the width and height of the button...

you are setting the image with the property "src"

android:src="@drawable/eye">

use "background" property instead "src" property:

android:background="@drawable/eye"

like:

<ImageButton
  android:id="@+id/Button01"
  android:scaleType="fitXY" 
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:cropToPadding="false"
  android:paddingLeft="10dp"
  android:background="@drawable/eye"> // this is the image(eye)
</ImageButton>

Did you try to give the layout_width and layout_height like the following? Since you are setting with wrap_content, the image button expands to the size of source image's height and width.

<blink>    
  <ImageButton>
    android:id="@+id/Button01"
    android:scaleType="fitXY" 
    android:layout_width="80dip"
    android:layout_height="80dip"
    android:cropToPadding="false"
    android:paddingLeft="10dp"
    android:src="@drawable/eye"> 
  </ImageButton>
</blink>

You can also set background is transparent. So the button looks like fit your icon.

 <ImageButton
    android:id="@+id/Button01"
    android:scaleType="fitcenter" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:cropToPadding="false"
    android:paddingLeft="10dp"
    android:background="@android:color/transparent"
    android:src="@drawable/eye" />

You don't have to use it using src attribute

Wrong way (The image won't fit the button)

android:src="@drawable/myimage"

Right way is to use background atttribute

<ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@drawable/skin" />

where skin is an xml

skin.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- <item android:drawable="@drawable/button_disabled" android:state_enabled="false"/> -->
    <item android:drawable="@drawable/button_pressed" android:state_pressed="true"/>
    <!-- <item android:drawable="@drawable/button_focused" android:state_focused="true"/> -->
    <item android:drawable="@drawable/button_normal"/>

</selector>

using button_pressed.png and button_normal.png

This will also help you in creating your skinned button with 4 states of pressed , normal , disabled and focussed. Make sure to keep same sizes of all pngs

You're probably going to have to resize the button programmatically. You'll need to explicitly load the image in your onCreate() method, and resize the button there:

public void onCreate(Bundle savedInstanceState) {  
  super.onCreate(savedInstanceState);  
  setContentView(R.layout.main);  
  ImageButton myButton = (ImageButton) findViewById(R.id.button);  
  Bitmap image = BitmapFactory.decodeResource(R.drawable.eye);  
  myButton.setBitmap(image);  
  myButton.setMinimumWidth(image.getWidth());  
  myButton.setMinimumHeight(image.getHeight());
  ...
}

It's not guaranteed to work, according to the specifications for setMinimumX (since the width and height are still dependent on the parent view), but it should work pretty well for almost every situation.

I think you already solved this problem, and as other answers suggested

android:background="@drawable/eye"

is available. But I prefer

android:src="@drawable/eye"
android:background="00000000" // transparent

and it works well too.(of course former code will set image as a background and the other will set image as a image) But according to your selected answer, I guess you meant 9-patch.

Try to use ScaleType centerInside.

ScaleTypes are not properly rendered in Eclipse Layout designer, so test in your running app.