ImageButton with different states images size

Question

How can I prevent an ImageButton from having a fixed size? The drawables used in the selector have different size, and I want the ImageButton to resize itself to match the image size.

I've tried adjustViewBounds without success.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="8dp" >

    <ImageButton
        android:id="@+id/picture_imagebutton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@drawable/tab_background_selector" />

</RelativeLayout>

There is nothing special, just an ImageButton with a drawable selector as source. — gdelente, Feb 18 '13 at 03:53
Besides using `ImageButton` try out with the `ImageView`. As far as its a question of setting image you can use the `ImageView` . — GrIsHu, Feb 18 '13 at 04:58
I want to be able to change the image depending on the state (pressed, selected etc...), that's why I'm using an `ImageButton`. — gdelente, Feb 18 '13 at 07:11
Can you post the java part where you are changing the image? — JiTHiN, Feb 21 '13 at 03:11
As you can see in the XML file, the `ImageButton` source is a selector, there is no java code implied in changing the image. — gdelente, Feb 21 '13 at 03:45
Take `adjustViewBounds` off. This is shrinking your `ImageButton`'s bounds to only be as big as the current image. — Jason Robinson, Feb 23 '13 at 00:47
try to use resource as an xml please check here http://stackoverflow.com/questions/2604599/android-imagebutton-with-a-selected-state — Lodwig, Feb 26 '13 at 11:21
Check whether the workaround provided here is okay for you. http://stackoverflow.com/a/15089048 — appsroxcom, Feb 26 '13 at 14:26

score 6 · Accepted Answer · answered Feb 27 '13 at 06:30

Instead of using ImageButton, use ImageView because ImageButton cannot be resized itself based on ImageSize. ImageView is the best alternative way that i can suggest for your problem. Acheive that by the following way:

layout.xml:

   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:orientation="vertical"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent">

<ImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/image_selection"/>

 </RelativeLayout>

image_selection.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">    
   <item android:state_focused="true" 
       android:state_pressed="true" 
       android:drawable="@drawable/default_image"/> //default_image.png is displayed when the Activity loads.   
   <item android:state_focused="false" 
       android:state_pressed="true" 
       android:drawable="@drawable/default_image_hover" />  //default_image_hover.png is an image displaed during Onclick of ImageView  
   <item android:state_focused="true"
       android:drawable="@drawable/default_image_hover" />   
   <item android:state_focused="false" 
       android:drawable="@drawable/default_image"/>
 </selector>

SampleActivity.java:

  ImageView myImage= (ImageView)findViewById(R.id.image);
    myImage.setOnClickListener(this);

score 0 · Answer 2 · answered Feb 21 '13 at 09:45

As you may have already know there is not an easy way to set drawables in a selector, and I don't think there is an XML based solution to your problem. Try this.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <ImageButton 
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/default_image"
        android:contentDescription="@null"/>

</RelativeLayout>

Then you need to add this code to onCreate or onResume

    final ImageButton button = (ImageButton) findViewById(R.id.button);

    button.setOnTouchListener(new OnTouchListener() {

        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if(event.getAction() == MotionEvent.ACTION_DOWN)
                button.setImageDrawable(getResources().getDrawable(getResources().getIdentifier("pressed_image", "drawable", getPackageName())));
            else if(event.getAction() == MotionEvent.ACTION_UP)
                button.setImageDrawable(getResources().getDrawable(getResources().getIdentifier("default_image", "drawable", getPackageName())));

            return false;
        }
    });

You're basically doing programmatically what is done by the selector, which is not elegant. I would really like an XML based solution. — gdelente, Feb 21 '13 at 19:52
@gdelente I know it is not elegant, but this is not the same with selector. Selector doesn't resize your ImageButton. Also if you look for an XML solution only, you have to state it in your question. — akaya, Feb 26 '13 at 12:35

score 0 · Answer 3 · answered Feb 21 '13 at 21:44

0

Don't use an ImageButton, just use an Image an supply it with an onClick method

answered Feb 21 '13 at 21:44

Nickolaus

4,785
4
38
60

This obviously will do the trick but I'm looking for a better solution. – gdelente Feb 22 '13 at 00:50

score 0 · Answer 4 · edited Feb 27 '13 at 06:20

As others have mentioned, you'll be best of using an ImageView as it will adjust its height. Set the property setClickable to use it like a button. Also swap your RelativeLayout for a LinearLayout, this will wrap its height to your ImageButton:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="8dp" >

<ImageView
    android:id="@+id/picture_imagebutton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:setClickable="true"
    android:src="@drawable/tab_background_selector" />

</LinearLayout>

Alternatively you can make the LinearLayout clickable and add a background resource (transparent when not clicked, colored when clicked) to act as a selector.

Does that works for you? The `ImageView`is not adjusting its height neither. — gdelente, Feb 22 '13 at 00:49

score 0 · Answer 5 · answered Feb 27 '13 at 06:16

0

Try

android:background="@drawable/tab_background_selector"

insted of

android:src="@drawable/tab_background_selector"

hope that helps.

answered Feb 27 '13 at 06:16

Shridutt Kothari

7,326
3
41
61

score 0 · Answer 6 · answered Feb 27 '13 at 20:26

0

You can use styles and set different styles based on the state of the ImageBUtton. Because styles support background, size and many other properties that helps you to get full control of styling depending on problem at hand.

answered Feb 27 '13 at 20:26

bohlool.mohammadi

77
1
5

ImageButton with different states images size

6 Answers6