Scaling ImageButtons for various screen sizes
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?
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
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
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 .