Is there any way I can make images on buttons auto-resize to fit the screen?

snotyak picture snotyak · Oct 15, 2012 · Viewed 9.5k times · Source

So I have four buttons, all of them use match_parent for both height and width. I use the "drawableTop" attribute to have images within the buttons themselves and I'd like to make it so I don't need separate images for each resolution. Here's a portrait screenshot I took. The landscape one will come in a bit.

Buttons-Portrait

So this looks fine and all but I only have 4 different image resolutions and trying them out on my phone didn't yield positive results. Is there any way I can just have one larger image, say in just "drawable" and have it shrink to fit in all resolutions? If not, what would I have to do? I currently cover hdpi, ldpi, mdpi, and xhdpi but I'd like to cover all bounds. What other densities exist?

If I can achieve the auto-resizing, I also wouldn't have to disallow users from using Landscape:

Buttons-Landscape

Also, here's the xml:

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:baselineAligned="false"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        tools:ignore="NestedWeights" >

        <Button
            android:id="@+id/bMap"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:drawableTop="@drawable/ic_camera"
            android:text="Button" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

        <Button
            android:id="@+id/bCamera"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:drawableTop="@drawable/ic_camera"
            android:text="Button" />
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:baselineAligned="false"
    android:orientation="horizontal" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical"
        tools:ignore="NestedWeights" >

        <Button
            android:id="@+id/bGallery"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:drawableTop="@drawable/ic_camera"
            android:text="Button" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >

        <Button
            android:id="@+id/bPlants"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:drawableTop="@drawable/ic_camera"
            android:text="Button" />
    </LinearLayout>
</LinearLayout>

Answer

Tim picture Tim · Oct 15, 2012

AFAIK, it's not easily possible with a Button with a drawable background, as drawable's don't scale with the view.

I believe you could do it if you changed the Buttons to ImageButtons, which offer more options for scaling images.

The ImageButton class exposes the android:scaleType attribute, with which you could use centerInside, would shrink the image to fit into the bounds of the ImageButton.

Also with ImageButton you should define the image with android:src instead of android:drawable.

I'm not sure if there's a way to set text on an ImageButton though. You may need a more advanced layout consisting of an ImageView and TextView in a LinearLayout, and then treating that LinearLayout as the button (add onClick, etc).