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.
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:
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>
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 Button
s to ImageButton
s, 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).