Search code examples
javaandroidxmlscalingscreen-resolution

Scale drawable in Android to support multiple screens

Currently I seek a solution to simple situation, which appeares to become tricky. I need 7 togglebuttons in android app, which are a simple black circles, but I need them to be in the row and fill parent (screen) horizontally. As a resource I use big .jpeg image of a circle. To make them fill all screens in the same mode, I put them into LinearLayout with 

@android:layout_width = "fill_parent";
@android:layout_height = "wrap_content";
@android:weight="70";

Weight is 70, so each button received 10. The problem is that source image is too big, which unfortunately results in...this:

(because I dont have enough reputation for posting images, here is the link http://postimg.org/image/f8wvs5si1/ )

Sorry for small amount of code and this picture taken via phone, I do not have an internet access on the computer with eclipse and this project for some time. I tried of course to change layout_height on other possibilites, but it didnt work. I could put a weight sum also on the vertical position, but on different screens it wouldn't look same. I also tried to change the height programmatically in onCreate method,

 buttonX.setHeight(buttonX.getWidth());

or do the same with a layout, but nothing helped

Perhaps the question is dumm, but I would be glad to hear some ideas.

Solution

  • This is due to screen density variations. There are several things you can do to fix this:

    1. Use different images for each density (but I'm assuming you're looking for another solution)

    2. Use DisplayMetrics to get the actual width of the screen and then set width/height accordingly.

    3. This code:

      buttonX.setHeight(buttonX.getWidth());

    probably doesn't work because you are calling it before the layout is drawn, and therefore the width is not the drawn width. You can fix this using ViewTreeObserver like here:

    How can you tell when a layout has been drawn?

    1. Use an XML attribute like scaleType="centerFit" Personally, I find these confusing because scaleType attributes don't always seem to behave the same way to me. You might have to try different ones, but sometimes they come in handy if you need an XML only solution.