Scaling ImageButtons for various screen sizes

Question

For my app (runs Android 2.1 and above), I was wondering how to scale buttons for various screen sizes (virtual emulators in this case) in terms of dpi, because my scaled background images seem to be "unpixelated" perfectly fine... I scaled my button ("GOT IT" as shown below) accordingly with say, an lpdi and a xxhdpi screen, and I get the following results:

For the Nexus 5 virtual emulator (xxhdpi), button supposedly at 150X34 pixels which seems to navigate to the ldpi resource director instead:

Zoomed-in for the QVGA (ldpi), button at 57X13 pixels:

All of that said, do I need to scale down the layout(s) instead considering that I implemented the scale-button images in drawable folders (xhdpi, hdpi, mdpi, and ldpi), called it in a drawable resource file, and then set the drawable resource file as the background image of the ImageButton? Here's the XML of my button btw:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:id="@+id/exitBtn"
    android:layout_marginBottom="57dp"
    android:src="@drawable/popup_btn"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:scaleType="centerCrop"
    android:background="@android:color/transparent" />

P.S. Is the scaled-drawable folder, xhdpi, the default location for xxhdpi screens as well? How about for xxxhdpi and above?

score 0 · Answer 1 · answered Mar 16 '16 at 15:59

0

First you will have to change your Button to take up the whole screen:

<Button
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/exitBtn"
android:layout_marginBottom="52dp" <-- You may keep the margin if you like
android:background="@drawable/popup_btn"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true" />

Next you will have to include different resources for the different densities that you will support: mdpi, xhpdi, xxhdpi, and so on. Please make sure the resolution is appropriate for each one and avoid using the same image, files that are too big will take up memory and processing power, files are too small in resolution will look pixelated.

Edit: More on supporting different devices and screen densities: http://developer.android.com/guide/practices/screens_support.html

answered Mar 16 '16 at 15:59

Toguard

437
3
9

Alternatively, you may use ImageButton or ImageView and handle the click event. Since the screen could cause some bad scaling, for that follow this: http://developer.android.com/reference/android/widget/ImageView.ScaleType.html and http://stackoverflow.com/questions/2521959/how-to-scale-an-image-in-imageview-to-keep-the-aspect-ratio – Toguard Mar 16 '16 at 16:05
Is what's provided in the link really an alternative way? http://stackoverflow.com/questions/36046531/is-modifying-the-dp-size-as-opposed-to-pixels-recommended-for-various-screen-siz/36050317#36050317 – DaveNOTDavid Mar 17 '16 at 02:13
What I meant is instead of Button, you will always include the different resources. – Toguard Mar 17 '16 at 23:20

score 0 · Answer 2 · answered Mar 16 '16 at 16:15

for compatible your layouts with different screen sizes you should use dimens under res/ directory for layouts compatibility for example you can define different dimens for different screen sizes see also Providing Resources and Supporting Multiple Screens

score 0 · Answer 3 · answered Mar 16 '16 at 18:28

0

create display metrics by instantiating it .now from display metrics retrieve the width and height of your whole root view

Once done implement the globallayoutchangelistener in Oncreate of your activity and place your scaling code inside the listener .

Idea is to calculate the device density first and then scale the button according to density in globallayoutchangelistener

Let me know if it works .

answered Mar 16 '16 at 18:28

VarunJoshi129

4,802
1
12
10

Instead of touching the Java code, would what's provided in the link be an alternative way? http://stackoverflow.com/questions/36046531/is-modifying-the-dp-size-as-opposed-to-pixels-recommended-for-various-screen-siz/36050317#36050317 – DaveNOTDavid Mar 17 '16 at 02:14

Scaling ImageButtons for various screen sizes

3 Answers3

Linked