Match different screen size - android

my problem is quite simple, i never did this before but now i'm forced to search for a solution.
working with layout-normal
Let's say i have a image background set to match_parent, with 3 different points on it, on that points i should place buttons, i added the buttons and set some margin dp's till i meet the points. for example: layout_marginTop="50dp"
on the preview screen it looks ok, but when i start some emulators from the same size category "layout-normal"
3.7inch; 4.0inch; 4.65inch ... it looks different. it looks ok only on the device size i got the preview
What should i do? what can i do?
i tryed to fix the image, created a linear layout, set the image as background, set the size of the screen (let's say 400x250) and added the buttons in the layout.
but now when i run it in different emulators i get empty space and the image does not fit the entire screen.
Hrrrrrrr! what can i do?

Get your ImageView Size with a onPreDrawListener, or if it fill the Screen you can get it with getDisplaySize
You know the points in your image where to place your Buttons:
orginal image 480x800 -> button1 left:XX px top:xx px
new size 720x1280 -> button1 left: YY px top: YY px
with this info you can calculate where to place the Button on real device with an other Resolution than 480x800 (using the rule of three)
then set your margins programaticly

actualy i found out that android documentation gives you other posibilities in layouts arranging.
-- layout-normal; layout-small; layout-large; layout-xlarge
-- layout-sw300dp; layout-sw360dp; layout-sw450dp; layout-sw600dp;
layout-sw800dp; where sw means smallest available width required by your layout resources
-- layout-w300dp; layout-w360dp; layout-w450dp; layout-w600dp; layout-w800dp; where w means the minimum width required for the layout
-- layout-h200dp; layout-h260dp; ... where h means the minimum height required for the layout
i used to give them the smallest available width.

Related

What is the resolution of default layout in Android?

I am just using simple default layout and not adding any of these layout versions; l-dpi-Layout,m-dpi-layout etc.. then what exactly the resolution of my default layout is?
Let say i add an image and define its width-height as 20dp X 20dp. This image is looking perfect in layout Preview screen, but would it look same in 1440X2560 screen or 1920X1080 screen.
My concerns are:
what exactly is the resolution of default layout is?
How would android know that the 20 dpi i am defining fits best for 1080X1920 resolution and 27dpi fits best 1440X2560 screen, when i am writing 20dpi in my default layout which perfectly fits in layout preview screen
The system assumes a target device with a density of 160dpi. When you define the size of yout image with dp unit, Android adapts the size according with the resolution of the device. For example, if you put an image of 100dp x 100dp in a 160dpi device it will take 100 x100 pixels, but in a device with a 640dpi screen it will take 400 x 400 pixel
By default when you create a template app, your main content layout has two parameters values as layout_width=match_parent and layout_height=match_parent. match_parent value means whatever the screen dpi size the mobile has, it stretches all the way to its size of width and height respectively which is calculated by android automatically when it runs its layout pass to position views (including padding). So in this context the default resolution of your layout is what your mobile has minus the size of statusBar and navigationBar.
Android translates the DPI value you enter for your width and height into number of pixels internally to size your views. You can also put the size of your view into number of pixels but its not recommended.

Why my 720 px image got distortion in my 720 px galaxy S3

My question is just in the title.
I try to put an image to my layout, i tried this with a FrameLayout's background with wrap_content width and height and also tried with imageView with all of the possible fitScale properties.
I just cant see why my 720 px width image is HALF on the width of my phone's screen which is a samsung galaxy s3 with 720 px width....
My real question:
What is the best way to ensure that my pics in applicaion wont get any distortion?
First of all, you need to think in screen densities and dip values, not pixels. That means that you are dealing with a "virtual screen" where 1 dip (density independent pixel) represents a different amount of real screen pixels depending on the device.
For drawables you have the following categories for getting crisp results on any screen:
ldpi (Scale factor 0.75)
mdpi (Default / baseline: scale factor 1.0)
hdpi (1.5)
xhdpi (2.0)
Create different sized versions of your bitmaps based on these scale factors to get crisp results on any screen. You should start from xhdpi as highest resolution to avoid quality loss because of upscaling.
Put these different versions into their respective drawable folders (res/drawable-ldpi, res/drawable-mdpi...). These different versions of one and the same bitmap must bear the same file name of course, otherwise that won't work.
Second of all you shouldn't make strong assumptions about the device screen height and width. You need to layout your views and graphics so they dynamically make use of the whole screen not knowing the exact screen resolution. However, you can make weak assumptions about these screen resolutions based on the configuration qualifiers
small
normal
large
xlarge
Try to avoid fixed sizes for your views based on any assumptions. Always avoid "px" values in layout XML files. Use "dip" instead.
Read the documentation Supporting Multiple Screens for more information.
What you want to achieve sounds as if you want your image to take up the full width of the screen.
If you set the image as a background of any view (FrameLayout for example) then the displayed clip of the image depends on the size of that view.
If that view has layout_width / layout_height set to wrap_content then the size of it depends on the dimensions and arrangement of its child view(s).
In case of FrameLayout it depends on the size of that single child of FrameLayout.
If you're using ImageView the image will be scaled to fit into the size of the ImageView by default. The size of the ImageView depends on its layout_width / layout_height values. If you set these values to match_parent and if the ImageView has enough room "to grow" you should be able to see your image stretch all over the screen.
The "room to grow" depends on the ImageView's context in the layout. Does it have neighbors that take up room? Is the parent view too small (because of wrap_content for example)? Look for these possible problems.

I'm using dp for my buttons ,graphics, and layouts. Buttons in the wrong place

Is the Eclipse graphical layout editor consistent with actual phone realities? I only own a droid x and have nothing to test say a "2.7 in QVGA: setting with.
I have a button I want to show up in a specific place on the phone. I use the buttons properties to set a specific layout height and layout width and specific layout margin left and top using dp units , however when I change phone sizes in the emulator the buttons are the wrong size and wrong place on a lot of them. The buttons work and are laid out correctly on the screen for the "4in WVGA (Nexus S)" and they work great on my droid X. But when I change the emulator to "2.7in QVGA" the button has moved way down the screen. Doesn't dp mean that the buttons will remain proportionate to the screen size?
Ps I have placed appropriate DPI'd images into their respective Res Drawable folders ie: drawable-hdpi and drawable-ldpi , etc.
I thought maybe i could use weight, but I have never used that before and maybe I am just missing something stupid. Any help would greatly be appreciated.
The size and position, relative to the topleft corner should be the same on each device. But, there are some devices which have a different resolution in height and width, which means that you will have more or less pixels in width/height on different devices, although they might share the same density. For example there are devices which have 800px in height, and some which have 854px, but they have both hdpi-density, so you will have the same margin to the topleft corner on both devices, but a different to the bottomright corner for example.

Android | How do I define the height and width of a 9-Patch PNG so it won't get pixelized

I have discovered the main idea of how to deal with regular PNG for Android.
Let's say I have created in my computer an icon the size of 60*120px. I know that for hdpi (800*480px) I need to divide it by 1.5 in order to get the right dp - so it will be 40*80dp.
so far so good - but - what happens when I need to define a 9-Patch so it won't get "pixelized". the problem is that all 9-patch files in my android looks all pixelized - I am sure it is because there is no definition in the file to "squeeze it" by 1.5 in order for it to display the 9.PNG well.
What am I missing? What do I need to do to achieve the right dp for a file that basically has a fluid height and width?
well you need to have 2 seperate icons for hdpi and mdpi for example. i usually have them laid out in a hdpi photoshop file and extract them from there (one png as hdpi and one as mdpi by scaling the hdpi one -preferably scale a vector graphic rather than a regular image by 1/3 from the hdpi graphic.) and also this way i almost never have to input my width and height restrictions to the image inside a layout because it looks exactly like in photoshop's layout. i just set it to wrap content. as far as making .9's you just need to do the same process as a regular png but define via the draw9patch tool an area that will be scaled in case the .9 needs to be rescaled.
just see how the button for example is made.
You have a 9 that has the normal height of the button but just defined an area which can be scaled(the middle of the button) in case the button is stretched by height or width which means the middle will get scaled but since its a color not an image it doesn't destort the look, however the edges of the button always stay the same and never get stretched no matter how big the button gets.

How do I get around clipping issues with my app in smaller phones?

I have a basic linear layout, with image view that display photos, textviews that show text etc...and when I test my whole app on my android 2, there is never any part of the screen that doesn't show. But when I test it in the QVGA emulator, half the view is off the screen. Now, some of my text is defined to a certain size.
I never use px (only dip) in any of my xml. I use fill_parent, wrap_content where it is needed and never fix a height or length. Could it be with my text, I use say, textSize = 22dip? I couldn't find documentation on why that would not work in all sizes.
Could it be that some apps need to be programmed to those screen sizes? Or am I missing something?
Thanks!
DIP actually doesn't help in fluid layout design. DIP tries to make sure things will looks the same size across different screen density. (imagine the concept of Point in typography)
Without your code and/or screenshot of what happen, it is hard to judge what happens to your program, but 22dip text size is possibly one of the reason which:
22dip text in HDPI will become: 22 * 240 / 160 = 33 pixel
22dip text in LDPI will become: 22 * 120 / 160 = 16.5 pixel
If your setting on QVGA is HDPI, then it is actually 33 pixel tall for a letter, which consumes more than 1/10 of the screen height.
By the way, your 16:9 wide screen (vertical) may fit everything in one screen without scroll, while QVGA is only 3:2 screen, even though everything is in proportion, something would be hidden away for sure.

Categories

Resources