ImageButton in Android xml (image is too small and horrible resolution)

Question

I have the following for 3 Imagebuttons. The way the code stands below, the three buttons look the same. Problems:

1. The image doesn't fill the size of the button completely
2. The resolution of the images are bad. I have the images saved in all res/drawable folders (drawable-hdpi, mdpi, etc). Images were loaded by "Android Icon Set" wizard.

Any ideas? I have been playing with padding and scaleType as I saw them as the solutions on other posts.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_marginTop="10dp"
    android:orientation="vertical">

<ImageButton
    android:id="@+id/abutton"
    android:src="@drawable/a_button_icon"
    android:layout_height="150dp" 
    android:layout_width="150dp" 
    android:padding="5dp"
    android:scaleType="fitXY"/>

<ImageButton
    android:id="@+id/button"        
    android:src="@drawable/b_button_icon"
    android:layout_height="150dp" 
    android:layout_width="150dp" 
    android:scaleType="fitXY"/>

 </LinearLayout>

 <LinearLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" 
    android:layout_marginTop="10dp"> 

<ImageButton
    android:id="@+id/cbutton"        
    android:src="@drawable/d_icon"
    android:layout_height="150dp" 
    android:layout_width="150dp" 
    android:padding="20dp"
    android:scaleType="fitXY"/>

<ImageButton
    android:id="@+id/dbutton"        
    android:src="@drawable/about_a_button"
    android:layout_height="150dp" 
    android:layout_width="150dp" 
    android:padding="20dp"
    android:scaleType="fitXY"/>

    </LinearLayout>
</LinearLayout>

Communize

That might help with the resolution? What about how the icon isn't taking up the full button size? – Communize

But what are the sizes of the images you're using? Because I always use the exact size that I want and never needed to scale: fitXY. – Barefoot

Answer 1

Instead of assigning drawable to the android:src attribute assign it to android:background attribute of the ImageButton.

OR

You can try setting android:adjustViewBounds="true", this will make the ImageButton adjust its bounds to preserve the aspect ratio of its drawable

PS: If you set an image to be the background of your ImageButton, then the image will scale to whatever size the ImageButton is. Other than that, src is a foreground image and background is a background image.

Edit:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >

    <!-- The two linear layouts will have equal widths. -->
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:padding="5dp" >

        <!-- The two image button will fill the linear layout along width and have height 150dp -->
        <ImageButton
            android:id="@+id/abutton"
            android:layout_width="fill_parent"
            android:layout_height="150dp"
            android:background="@null"
            android:scaleType="fitXY"
            android:src="@drawable/engage_down" />

        <ImageButton
            android:id="@+id/button"
            android:layout_width="fill_parent"
            android:layout_height="150dp"
            android:layout_marginTop="10dp"
            android:background="@null"
            android:scaleType="fitXY"
            android:src="@drawable/engage_down" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        android:padding="5dp" >

        <ImageButton
            android:id="@+id/cbutton"
            android:layout_width="fill_parent"
            android:layout_height="150dp"
            android:background="@null"
            android:scaleType="fitXY"
            android:src="@drawable/engage_down" />

        <ImageButton
            android:id="@+id/dbutton"
            android:layout_width="fill_parent"
            android:layout_height="150dp"
            android:layout_marginTop="10dp"
            android:background="@null"
            android:scaleType="fitXY"
            android:src="@drawable/engage_down" />
    </LinearLayout>

</LinearLayout>

Hope this helps.

Bucko

changing to android:background just removes the background of the image button (instead of it being grayed, it matches the background). The actual image is still the same side. android:adjustViewBounds="true" doesnt change anything for me. Any other thoughts? – Communize

Answer 2

Try by removing padding and set background as 'null'. In case of resolution, I think it was taking low resolution image.

<ImageButton
    android:id="@+id/dbutton"        
    android:src="@drawable/about_a_button"
    android:layout_height="150dp" 
    android:layout_width="150dp" 
    android:background="@null"
    android:scaleType="fitXY"/>

Tatyanatau

this doesnt change anything. – Communize

Answer 3

I faced the same problem. No other worked for me. At last it was a simple issue. By default, padding is existing around ImageButton. so use:

<ImageButton>
...
    android:padding="0dp"
...
</ImageButton>

It will fix the issue.

Cormorant

so weird, thank you anyway it solved my issue – False