Is there a way to make the images on the auto-resize buttons to fit the screen?

Question

So, I have four buttons, all of them use match_parent for height and width. I use the "drawableTop" attribute to have images inside the buttons themselves, and I would like to do this, so I don't need separate images for each resolution. Here is a portrait screen shot that I took. Landscape alone will be a bit.

So, it looks great, and everyone except me has only 4 different image resolutions and testing them on my phone did not bring positive results. Is there a way that I can just have one larger image, say, just “stretch” and compress it to fit all the resolutions? If not, what should I do? I am currently using hdpi, ldpi, mdpi and xhdpi, but I would like to cover all the borders. What other densities exist?

If I can achieve automatic resizing, I also do not have to prevent users from using Landscape:

Also here is 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 1

AFAIK, this isn’t easy with Button with a highlighted background, because popped ones do not scale with the view.

I believe that you could do this if you changed Button to ImageButton s, which offer more options for scaling images.

The ImageButton class provides the android:scaleType attribute with which you could use centerInside to compress an image so that it matches the borders of the ImageButton.

Also with ImageButton you must define an image with android:src instead of android:drawable .

I'm not sure if there is a way to set text in ImageButton. You might need a more advanced layout consisting of ImageView and TextView in LinearLayout, and then handle this LinearLayout as a button (add onClick, etc.).

Answer 2

Yes, you can have one enlarged image and it will be compressed to fit all resolutions. You can perform this automation automatically. See DroidUtils.scaleButtonDrawables from this answer .