I have a client that gave me a .psd file that contains the entire screen of an Activity with all the graphics. The resolution is 480x800. The client wants the application to look identical to the one in the .psd file. The problem is that different devices have different resolutions and sizes. I know that the density is what really matters but how can I scale the graphics to look the same on all the devices? For example, I exported all the layers and recreated the screen in Android but, for some reason, the screen looks more crowded on a Nexus One (480x800).
One idea would be to create 9 patch images from the graphics and use for ImageViews android:background instead of android:src right?
Isn't it better to have a 320x480 resolution for the graphics? Or do I need for both resolutions? Also, I have to consider the height of the status bar which I understood it is 25dip but I am not certain about this.
So, to summarize, I am interested to find out what is the best way for a client to give you the mockups and graphics so that it is easy for the developer to implement according to the specifications.
That's something that's not easy to solve. Think of a webdesigner, one can't know all the possible resolutions and settings of every browser so he has to scale things accordingly.
In my opinion there are only three approaches here.
First: Let him state what devices he wants to support and only support those devices. Extract the layers with the size of the device with the highest resolution and scale them down on other devices.
E.g. If you have to support two devices with 480x800(2) and 240x300(1), export all images to be 480x800 and scale them down accordingly. Don't write a single application for every device.
Second: Export the graphics with the highest resolution possible and scale them down on all devices relative to the device being used. Imagine, again, a webdesigner. All he does is define margins, paddings, etc. and it will look nice in almost any browser. You should do the same and resize your elements on demand.
Third: Make the application fixed, e.g. define a size of 200x200 for your whole application and just fill everything larger than the screen with a certain color, e.g. black. This happens a lot with java ME applications, they look great on the hardware they were made for and are still playable on hardware that is beyond their time though they look pretty ugly.
Hope this helps,
Robin.
Related
After some years of Android development, i took months wondering why should i use xml layouts to make the UI of my Android App.
I understand that part of MVC and real-time graphical interface design.
If im wrong please take me out of ignorance and forgive me but , I´m Unable to set a view´s position, exactly, 8% of screen width for margin and 70% of screen width for width, for example.
Creating the UI in that way and taking care of screen aspect ratio ensures the app will look proportionally exactly the same in all devices.
As this post sums it up, we are told to use dip units and a nice bunch of xml files for every layout of our app if we want to support different screens. (Why they call it density-independent if we have to make it different for each screen density?)
But, even doing that, as (again) the Google Doc says
The ratio of dp-to-pixel will change with the screen density, but not necessarily in direct proportion.
And in place of not necessarily they should say mostly never looking at the incredible number of different devices. Depending of your project, this may be a problem. (Or do you want your client looking at your "slightly-decomposed" UI on a who knows chinese device)
I could ask the same for the image resources, but that whould be another question, i use to put the highest resolution on -nodpi then downscale by code to screen-width-dependent desired size, instead of putting 10.000 images at all resolutions.
Creating the UI in that way and taking care of screen aspect ratio
ensures the app will look proportionally exactly the same in all
devices.
This is the way Apple does it, and this why when you open a folder on a 9.7 inch iPad with beautiful retina display, it only displays 9 icons.
A tablet is not just a bigger phone. It's really not. Also, iOS devices have mostly the same aspect ratio, so that's how they took care of the aspect ratio.
On Android however, you can't just say that you "took care of the aspect ratio" problem and that this problem magically goes away. Your best bet is to use Android best practices to handle aspect ratios correctly.
That being said, don't over do it either. You don't need to use all 8 density buckets for instance. Look at the official dashboard to see what devices people are actually using, before you try to optimize for every scenario possible.
Also, you don't have to listen to Google all the time. For instance, I am sure that Google would love that you translate your application so that it's available in more then 68+ different languages worldwide, but what's good for Google is not necessarily good for you. Android actually lets you choose the tools you want to use to make your application. They don't force you to use any particular one.
At the moment for my simple game, I have my graphics created with a "default" size in mind (currently 2048x1024, so my backgrounds are 2048x1024 and the other graphics are made to the size needed to look good on that size background). I then, in code, workout what I scale I need for the current device. For example if the current device is 1024x512 (an arbitrary res), I know to scale all graphics by 50%.
This has generally worked well, however (as I am sure some of you have guessed by now), the problem arises with the smaller graphics on small screens. Specifically I have a font that when scaled down to work with a new xperia mini (medium res but small physical dimensions), doesn't look nice.
So what I want is to use the various drawable folders to provide a graphics for "exception" cases only. That is, I don't want to create ldpi, mdpi, hdpi etc versions of every single graphic but rather I want to use the default graphics for most and then the specific graphics for things like this font.
The problem I have is because the other graphics still need to be scaled down based on this default size, these specific graphics are also being scaled down when they don't need to be.
Does anyone have any advice on how I can go about resolving this? Or perhaps there is a way for me to tell that the android system has selected this graphics from the mdpi folder (so that I can then manually decide what I want to do with it)?
Any help very much appreciated.
As far as I know there is no way to find out what folder android use for getting resources (here on SO can be found some questions, but there is no answers). I suppose you can use one resource (e.g. background) for detecting what size is it, and according to this understand if you want to resize it.
i am NOT an android developer and im trying to understand what they need in terms of graphical resources to make an app that functions across many android devices.
i have (tried to) read this page http://developer.android.com/guide/practices/screens_support.html , but find it somewhat bewildering. they talk as if screen density is the important thing "Supply alternative bitmap drawables for different screen densities" but then, if you dont know the size of the screen, you cant really think in terms of layout. is the idea to make buttons and logos that are the same size on all screens with the same density, such that on a large screen there is just a bunch of space, and on the small screen its all packed in tight? i dont understand how just thinking in pixel density gets me any closer to knowing what to provide.
are you supposed to create resources for every screen size AND pixel density? say it aint so.
anyway can somebody tell me... if you were developing an app what do you need for graphics? is it possible to provide graphics that are large and just let them scale down? is it inevitable that the devloper will have to mess with the graphics himself anyway? or can he be provided with sets of png files of certain sizes that will be ready to use?
thanks!
Here's what we do at my work place. Suppose we get a desing for the app. We make our designer create 3 psds versions for the same desing. the 3 psd's are for the 3 ranges of desnity. The size used for the psd are
240*320 (Low Density)
320*480 (Medium Density)
480*800 (High Density)
Most of the time when I write layouts, I use wrap_content which means a view must take the size of the content it wraps. Which works most of the time as I have a density specific version of the design so the image i use as background should be suitable. The thing to note is that, in android you can can put the 3 sizes of the same image in different folders such as drawable/ldpi, drawable/hdpi.
Eg: you have a bg.png and have a version for large phones and a version for small phones. You put the big bg.png into hdpi folder and the small png in the ldpi folder. Android will automatically select the appropriate image based on the phone density. But you need to make sure the file name is the same.
There are cases where you need to resize you background images without makeing the image looking too scaled. For this android uses the draw9patch tool. With this tool you can specify areas which can scale and areas that shouldn't scale.
9 Patch png's are your friend. Read up on them here:
http://developer.android.com/guide/topics/resources/drawable-resource.html#NinePatch
and here:
http://developer.android.com/guide/developing/tools/draw9patch.html
Those are your best bet for any kind of graphic that will stretch nicely (i.e. not gradients, they will come out slightly pixelated on some screens probably) The power of these types of images is that you can tell the system which pixels to repeat if it needs to stretch the graphic. This means that stretching can be done without loss of image quality (again depending on your image and how you choose to make the nine patch. The "show bad patches" button in the draw9patch program will show you potential problems. Hint: keep your repeatable pixels down to 1 on left and 1 on top and you'll have no problems with bad patches) Any graphics that can be made in to 9 patches will only need 1 size since the system can effectively make it whatever size it needs.
are you supposed to create resources for every screen size AND pixel density?
You may if you like. This would ensure that the application will look great across all devices. I understand that this is not feasible for all projects though. In general if you make separate resources for the different densities you'll get something that looks acceptable on most of the devices out there. All of the devices are classified as ldpi, mdpi, or hdpi (there may be an "extra high" level now too, I am not certain off the top of my head) So if you supply graphics for those 3 densities then the system will know where the device falls under and will pull the correct graphics.
is it possible to provide graphics that are large and just let them scale down?
Yes the system will scale down your graphics if needbe. But be aware there are consequences with this approach. First every time the system hast to scale a graphic up or down it is going to taking up CPU and memory to do so. This may not be an issue if you have relatively few things to scale, but if you have many it could cause noticeable lag time during on the lower power phones. Second, To my knowledge all of the graphics in android are raster, which means if you are letting the system scale something up or down image quality is going to decrease some. Again depending on the specific images this may be more or less noticeable on the actually device at runtime.
My best advice is supply them with resources of a few different sizes and run the app on as many different devices as you can. Once you see how your different resources look on the devices of different sizes you'll have a much better feel for which ones you need to supply to get the UI looking as consistent as possible across the largest swath of screen sizes and densities.
I'm quite new to Android game development (and Android development in general).
My first question came when I was creating the background for my first game: which size should I choose?
If I choose 800x480 for example, will it show good on any other resolutions?
And what about my main character? If I make it move 5px/frame (I already know how to make it fps independent, it's just an example), it's not the same to move 5 pixels on a 320px-width screen than on a 800px-width one.
Any advices on this?
Thanks
You should have separate resource files for each of the screen densities you wish to support.
Pick the background size that's supported natively on the device you plan on developing on, and worry about supporting non-native resolutions or adding resources for other resolutions when you're near the end of the project. Don't get bogged down in the weeds.
As #PaulSonier said, don't worry about supporting multiple resolutions until the end.
For now just develop on one device and use 'dp' or 'dip' units whenever possible. This will make it easier at the end to support multiple screen sizes and densities.
As for the background, consider using 9-patches.
You should have a separate set of graphics for each of the resolutions you want to support. If you really want to cover all the current devices and have the crisp and sharp graphics on every one of those and you want to make sure that the aspect ratio doesn't make your game look weird on some devices, you need to prepare your assets in the following resolutions and scales:
854x600 scale 100%
1024x800 scale 120%
1280x1024 scale 160%
1536x1152 scale 192%
1920x1200 scale 240%
2560x1600 scale 320%
Source: http://bigosaur.com/blog/31-android-resolutions-definite-answer
The best solution is to draw all full-screen images at least 2733x2134 pixels and then scale it down. Well, you can scale down images, if you have text, better to use smaller font size and put it over the image. You can do this at run-time or pre-render the text in advance. You can use ImageMagick to automate all that for 6 different sizes so you don't do it manually.
I've determined an estimate of the size of my Android emulator's screen in pixels, although I think its resolution can be changed to other numbers. Quite frankly though that doesn't eliminate the general problem of not knowing how many pixels on each axis I have to work with on my Android applications in general.
The main problem I'm trying to solve is this: How do I make sure I don't use a faulty resolution on Android applications if I want to keep things' sizes constant (so that if the application screen shrinks, for instances, objects will still show up just as big - there just won't be as many of them being shown) if I wish to do this with a single universal resolution for each program? Failing that, how do I make sure everything's alright if I try to do everything the same way with maybe a few different pre-set resolutions?
Mainly it seems like a relevant question that must be answered before I can come across a complete answer for the general problem is how big can I always make my application in pixels, NOT regarding if and when a user resizes the application's screen to something smaller than the maximum size permitted by the phone and its operating system.
I really want to try to keep this simple. If I were doing this for a modern desktop, for instance, I know that if I design the application with a 800x600 canvas, the user can still shrink the application to the point they're not doing themselves any favors, but at least I can basically count on it working right and not being too big for the monitor or something. Is there such a magic resolution for Android, assuming that I'm designing for API levels 3+ (Android 1.5+)?
Thanks
Hmm, I suggest you read this: Supporting Multiple Screens. That gives a wealth of information on how to handle different screen sizes. In particular, read about its concept of density independent pixels versus absolute pixels. Density independent pixels are essentially pixel sizes that the system automatically scales for you depending on the screen size you're working on. It considers the 'standard' screen as that of the G1, Hero or similar devices, i.e. 480x320 pixels with a density of 160dpi. If the screen you're working with is bigger than that, i.e. the Droid or Nexus One, it adjusts all density independent pixel sizes by 50%.
Alternatively, if you're really talking about canvases, as in, Canvas for animations etc, you can just call canvas.getWidth() and canvas.getHeight().