Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>

like image 793
snotyak Avatar asked Oct 15 '12 19:10

snotyak


People also ask

How to resize a picture on your computer?

1. Upload Upload your JPG or PNG to our image resizer. 2. Resize Choose a size template based on the social platform or add your own. 3. Download Instantly download your resized image. Resize your photo now. Want to know how to make a picture smaller, vertical, or horizontal?

How can I change the size of a photo?

Use our fast, easy, and free online photo resizer to change the dimensions of any picture. How to resize an image in three simple steps. 1. Upload Upload your JPG or PNG to our image resizer. 2. Resize Choose a size template based on the social platform or add your own. 3. Download Instantly download your resized image. Resize your photo now.

Can I resize a photo to make it load faster?

You can even resize a screenshot or shrink a hi-res photo to help your blog or web page load faster. Do more with your image. Resizing your image for a bigger project?

How to auto-resize an image in CSS?

The easiest way to create an auto-resize, scale-to-fit image is to set 100% width on it – <img src="IMAGE.JPG" style="width: 100%"/> Yes, that’s all. We don’t need even crazy Javascript calculations – Read on for more examples and ways to resize an image in CSS.


1 Answers

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

like image 72
Tim Avatar answered Sep 16 '22 20:09

Tim