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" />

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

Answer 1

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

Answer 2

为了使您的布局与不同的屏幕尺寸兼容，您应该在res /目录下使用dimens来实现布局兼容性，例如，您可以为不同的屏幕尺寸定义不同的dimens，另请参见提供资源和支持多屏幕

Answer 3

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 .