In researching android image sizes for different sized screens/densities etc., I've found an absolute tonne of things, a lot of which may be deprecated, and a lot of which may not be relevant to my situation, so I thought I'd ask for general advice.
My basic question is how big should I make my background image in pixels, or inches or centimetres? Probably pixels would be best.
My app is in locked in landscape mode, I don't need to worry about orientation.
I'm using a vector image, so I don't need to worry about scaling and quality issues
So, I want my background image to fit onto a ten inch tablet, so that it fills the whole screen with no scrolling.
On phones, I want the height(which would be the width in portrait mode) to match the height of the screen, and my image will be in a horizontal scroll view, so scrolls left and right in landscape mode.
So, do I need to do the whole creating different image resources for different dpi's thing, or will one do? What size should I make it?
I will also be lining up textviews with specific parts of the image, so presumably I'll need different layouts, as the lining up of textviews relative to the image will probably vary from screen size to screen size, resolution to resolution,bigger textviews for bigger screens etc. How do I implement this?
Thanks
Vector images should be used for icons only. In your case i'd just use a drawable & make sure you have different images for the different densities. Then create different layouts for phone and tablet. You should use a scrollview on the layout for the phone
The google pixel is a good representation of an android phone: It has a 1080 x 1920 resolution at 441 dpi. Then from the the android developer docs:
xxhdpi ~ 480dpi
you can scale the 1080 x 1920 down by the (3:4:6:8:12) ratios. if you image
has a different aspect ratio make sure that that the width or the height matches with 1080 x 1920 depending on the orientation of the device
Related
I have read Android guidelines regarding different screen sizes, but still I have some considerations.
Client has given me an image from PSD file which has certain resolution that fits
1080 X 1920. I just use wrap_content, and it perfectly fits the part
of screen.
I am not using DP to define its width-height, If i was using DP it would have
adjusted image according to screen sizes.
My questions are,
Does wrap_content works the same way as Density Pixels?
Is it also responsive, and changes the image width-height according
to different screens?
If not, then Is it necessary to use DP to support different screen
sizes ?
Thanks
The setting wrap_content tells your view to size itself to the dimensions required by its content. In the case of your test, your image is 1080x1920 and your device's screen resolution is likely 1080x1920 as well, hence the perfect fit. Since you set the width and height to wrap_content, Android is simply trying to use as much screen space as it needs to correctly display the amount of content it was supplied. In this case, since the available screen space matches the size of the content, it just fits perfectly.
But what if the device screen isn't 1080x1920? In that case, Android will only use as much space as it can, but still attempt to fit the image inside the bounds of the available screen space. In other words, the system will appropriately scale the image down to get it in the container you have provided for it. But this can lead to awkward fits if the aspect ratio isn't the same as the image. For instance, see this screenshot below:
This image is 1920x1080, but notice that it doesn't quite fit. That's because this nexus 7 screen is 1824x1200 when viewed in landscape. Additionally, the toolbar at the top of the screen is eating up available screenspace, making my viewable area even smaller and more awkwardly shaped. So while the system would love this image to extend all the way to the left and right borders, it can't, because then that would mean the height would be bigger than the viewable space. Since I used wrap_content to display this image, the system is using as much vertical space as it can, and the result is that the image doesn't quite fit the horizontal space.
So to more directly address your questions, yes wrap_content is a relative size setting that will make it easier to get a consistent look across multiple screen sizes, similar to using dp. But realize that there are hundreds, if not thousands of available Android devices on the market, and they all have varying screen sizes and densities. So your drawables may not always appear the way you want them on every device.
The way to overcome this is to supply multiple versions of your assets and provide alternate layout files for different screen sizes and densities. Once you do that, all you can do is test, test, and test some more. Use emulators for weird screen densities or devices you don't own, just to make sure you're getting the look you want. In the case of your 1920x1080 image, it looks great on that one device, but how will it fit a large tablet or a tiny handset that is smaller than the resolution of the image? These are situations you must account for in your design.
I suggest you read these resources, as they are hugely helpful in learning how to deal with issues resulting from varying screen sizes and densities:
http://developer.android.com/guide/practices/screens_support.html
http://developer.android.com/training/multiscreen/screensizes.html
I want to show a fixed 640x640px image on the screen and below that image 2 images that are fixed sized for 128x128px.
In graphical layout, the default(?) width is 320px and height is around 460px so I can't do what I want. I know I should support different screen sizes but for now I want to work with my minimum requirements and then change things according to the screen sizes. How can I "force" the graphical layout to be 640x640 or other standard size which is around that size?
Thanks
640*640 is no standard size (no device, as far as I know has a square aspect ratio).
You can emulate a device with a bigger screen size, such as 1280dp by 800dp (WXGA).
By the way, you can't "force" a layout to be bigger than the screen size.
What is the applications screen size without the status bar and softkeys(in some phones)?
Like for Example i know:
320X480 trimmed down to 320X455 which is the basesize.
but what about others , i have done many calculations and a lot of searches online to figure out a defined size for other screen but i seems can't, Also While applying the formula *.75 ldpi, *1.5 hdpi, *2.25 xhdpi to get other screen, it doesn't add up.
Like 320X480 is mdpi to get the hdpi do *1.5 and you will get 480X720 which is not the situation for devices out their ! and using this method my application images where stretched, this method is according to the Google documentation, i'm confused as hell.
I have tried to et sizes using the emulator also it was very different! for height.
So if the problem is with height only, i'm thinking creating background as patterns and then work only on the width of the screen size and re-size every other elements to screen width only like 240px, 320px, 480px, 720px and also consider the size of them to fit minimum height.
I believe it's not possible to define a height for android which will go like generic because of the variety of android devices.
So what do you think about this approach to use background as pattern and forget about every device on earth height ?
you can use tile pattern, create a small texture and then make it tileable drawable in xml, so it will be tiled across screen, or the second might be using 9-patch images, in that way you can select which area of the image scale and which area to not scale, so they will be scaled according to that way.
I've an android project with layouts and resources for screen size large and mdpi (resources are in folders "layout", "drawable", and "drawable-mdpi").
The layout is mostly relative but some margins are given as absolute dp values.
The screens look perfectly on a device with above specifications (large/mdpi: aka device 1) and a pixel resolution of 480x800. Now, I have another device which has the same pixel resolution of 480x800 but since the screen is smaller, it has screen size normal and hdpi (aka device 2). The screens on device 2 look really messy (elements overlap etc.)
Since the pixel resolution is identical on both devices, it should be possible to create perfectly fitting screens for device 2 as well with little effort.
If I don't care about elements physically appearing smaller on device 2, what would be the approach to just physically "scale" my layouts (to fit on device 2)?
Just copying the drawable-mdpi to drawable-hdpi helps a little bit, but there are still problems. Are the absolute dp margins in the layout the problem? Should they be replaced by pixel dependent ones and everything is OK?
In general, what are best practices when I want to use a design that was originally created for a specific pixel resolution on devices with different pixel resolutions and I don't care much about elements appearing smaller or bigger?
In my case I basically just want to "scale" the original design and I don't care much about the vertical size (because the main view is scrollable anyway).
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.