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

Question

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>

score 5 · Accepted Answer · answered Oct 15 '12 at 19:09

5

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).

answered Oct 15 '12 at 19:09

Tim

35,413
11
95
121

Yeah, I researched this and saw scaleType would fit my needs but it doesn't seem like there's a way to put text on ImageButtons like how I have it in the image above, right? :/ – snotyak Oct 15 '12 at 19:12
@BackpackOnHead - No, I'm afraid not. You may find this question useful: http://stackoverflow.com/questions/1532876/android-combining-text-image-on-a-button-or-imagebutton – Tim Oct 15 '12 at 19:14
@TIm - Yeah, that's where I learned to do the drawableTop. It doesn't look like I can do exactly what I need to but perhaps the LinearLayout option may be the route I need to take. I'll wait for other solutions, but for now yours seems to be the best. Thanks! – snotyak Oct 15 '12 at 19:17
@Tim - Your method works perfectly. I used the standard button xml for the LinearLayout's background drawable, so it gets all of the animations as it should. Thanks! – snotyak Oct 16 '12 at 04:06

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

Yes, you can have one larger image and have it shrink to fit in all resolutions. You can achieve this autosizing programmatically. Have a look at DroidUtils.scaleButtonDrawables from this answer.

edited May 23 '17 at 11:52

Community

1
1

answered Sep 09 '15 at 20:33

yonojoy

5,486
1
31
60

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

2 Answers2