I have a client who wants me to build an Android version for their existing iPhone app. The design of the iPhone doesn't use any native iPhone elements. It's basically some sort of grid with containing images, buttons, text, etc. Of course it was easy to make the iPhone app because of the fixed pixels widths/heights. The basic grid that defines a screen is loaded via a XIB file, and I load the custom buttons in the right containers in the grid by specifying the exact coordinates.
Then comes Android...
Our client wants to target 3 specific tablets (1024x600). They have given us designs for a ~600x980 portrait version of the app. It is not recommended to use AbsoluteLayout in Android. What is the easiest way to make sure that I can scale it on different devices but that it will look like the given design on the 3 target tablets.
One idea I had (which I'm not sure about whether I can implement it) was:
Get screen width in pixels and height
Based on width/height ratio of the design, pad with bars on top/bottom or left/right
Still do an AbsoluteLayout based on this information
I'd rather not do it this way because it sounds involved and counter to the Android way of doing things. Another issue that is created by scaling is the following. There is a bar of buttons that have a lines separating them. These lines are 4 pixels wide. Obviously, when you start scaling, this is going to mess this up completely. I can't seem to find much information about this s
You probably want to start here:
http://developer.android.com/guide/practices/screens_support.html
But quick points are probably
Do not use an absolute layout. Your life will become terrible
Handle sizes in density independent pixels so they will scale properly on different devices
Use ninepatch images so that when images stretch they will stretch in the proper regions maintaining your 2px borders ect.
Take advantage of the different resource folders for images at different densities (drawable-mdpi vs drawable-hdpi) and layouts at different sizes (layout-small vs layout-large). The latter will allow you to have separate layouts for your tablet devices.
Best of luck :-)
Related
I need to make a 2d map which lays out levels for a android game. It is low budget and I need to make it with native android components.
The map goes to a finite number of levels so I do not have to generate the map dynamically and using the technology suggested in http://forum.unity3d.com/threads/smart-2d-levels-map.267394/
will be a bit of a over kill.
I also got a heap of motivation from How to create a 2D Map to use in a Android Game? as they said that it is possible to achieve what I need without a engine.
All I am enquiring about is if I should make a scroll view with a relative layout inside and then align the real buttons relative to each other in px (as dp will make that the images will not line up in all cases as the background which is a image is in px) or should I approach this completely differently.
My biggest concern with my initial thought out approach is that the different screens will mess with the locations of the buttons and that if I make everything px that the screen will be to small for high density screens.
I have considered to make different layout files for the different screen sizes but before I start developing I thought that it will be best to get another view point from the community
Thanks in advance for the feedback.
I have played around with using a relative layout and this seems to work on all screen sized after I set the height and width to static dp values. This makes the ratio constant and makes the solution acceptable on any screen size
I have a design that I need to follow in my app. In it there are several buttons, images and textviews placed all over the screen (some are aligned to the left, some to the right, some are centered etc). What I need to do is make all those elements appear EXACTLY as they are in the design image. The problem is, if I try to do this using dp, it can be wider or narrower than the design image specifies, and it depends on the properties of the screen. (I've had an app where I did it all in dp, and on my high-res phone it works perfectly, but on my friend's older phone it cuts away the edges of the activity)
My question is, what elements do I use for this? I've heard of using weight in Linear Layouts, but how to make items different width and height and position them all across the screen how I see fit? How to make sure it looks exactly the same on all screen sizes?
Thanks in advance! :)
Edit:
The point is, I need the buttons to be just as they are on the screen (this will be a listview element, I'm trying to make an xml for it). The distance, proportion, everything, it needs to scale to the width of the screen and be this size and distribution. And, I'm not just looking for a solution to THIS particular problem, I want to learn how to do it in general...
You don't. For very large and very small screens, you use separate layouts that scale the sizes, completely drop parts of the UI, or lays it out in a different manner. It's absolutely silly to think you can fit all the stuff on a 10 inch tablet and a 3.5 inch phone. If your designer expects that, tell him he's an idiot and he needs to get back to work.
For a more general answer on the best way of laying things out- it depends on the effect you're trying to get. You should never use pixel counts, and dp should only be used for small things- a bit of padding between 2 fields. Most things should be done via layout, either by using a linear layout and getting things in rows/columns, or a RelativeLayout and describing how to layout views relative to their siblings. But even with these tools you will not be able to fit on all screens and look good.
I have an iOS app that uses unique textured backgrounds (think of a game title screen or something) on each of the screens that I am trying to port to Android. On iOS they knew the resolutions and just designed the backgrounds around those. Obviously that isn't possible on Android.
What is the best way to put a textured/non-repeatable background into Android that works on various screen sizes and aspect ratios?
The solutions I have thought of so far are:
Fit the shortest dimension and allow the image to go off the edge of the screen for the larger dimension
Make the background image large and center it, then make it stretch out beyond the edges when the resolution is smaller than the image
Stretch the image to just fit (this is ugly and I'd like to avoid it)
Create a different version of the image for each resolution. (This seems way beyond the scope of what is possible for this project.)
As far as I can tell in Android, 1. and 2. aren't possible out of the box because background images set the size of the view to match their size (you can't tell it to just extend beyond the edges, please correct me if I am wrong).
What solutions would you use in this situation?
Use an (match_parent) ImageView to simulate back ground image. (By adjusting the scale type of imageview you can get the result of point 1,2)
http://developer.android.com/reference/android/widget/ImageView.ScaleType.html
Use 9-patch image. You can specify which part of your image can be stretched. For your case I suggest adding a small "margin" to your image, and make it stretchable using 9-patch. Only the margin will be stretched, maintaining the aspect ratio of your image.
android developer 9-patch
Create a different version of the image for each resolution.
As you're probably aware, Android can run on a wide variety of devices with varying resolutions and screen densities. To be fully compatible with all of them takes a bit of graphics work; you need resources for each possible screen density (and in this case, resolution).
For full details, see Supporting Multiple Screens in the Android developer documentation.
Unless something has gone seriously wrong in your development process, you should have the original files (e.g. .psd) to work with when creating these resources.
I am trying to make a header and it is going to have 4 or 5 buttons...I am not sure yet.
The text of those buttons will vary in length and also the different devices will have different widths, and also there are the horizontal and vertical views for each device. So I am not sure what my background images should be in terms of height and width so everything fits nicely on the screen.
What is the recommended or best practice way of handling this?
Thanks!!
You need to read the android docs, specifically Designing for Multiple Screens.
Perhaps Supporting Multiple Screens as well.
It will take you through what you need to know/do to set up and support those devices you wish to.
I am creating an application which on one view has an image of an elephant. this elephant needs to animate various parts of his body such as eyes, trunk, spraying water, and also the background/horizon movements. I have briefly tried positioning each element(eye, trunk, etc) in a RelativeLayout using margins and relative positions so that the picture looks correct.
When i change the screen size via eclipse layout editor everything gets out of place. I read that using RelativeLayout with margins and relative positions will be the best alternative to AbsoluteLayout, but i can't seem to get each piece in the right spot while keeping some compatibility of devices.
What is the best way of positioning pieces of the image to complete a full image which will also allow me to animate/translate/rotate/etc each piece and support a large variety of devices?
I thought that maybe using OpenGL or Canvas might be the way this is done properly, but i don't see how these would resolve the problems i've mentioned.
I have created the iOS version of this application and it was extremely easy to set this up. I don't quite understand how applications line up sprites to make a scene which is compatible among a large variety of screen sizes/densities.
You will have to scale the elements of your big picture to fit the High , medium and low screen densities .
To do this you will have to resize each set of elements and copy them into separate drawable folders :
/res
drawable-hdpi
drawable-ldpi
drawable-mdpi
also you can create a dedicated layout for each screen category if needed but first try just to scale the images and copy them into the folders and launch your application.
A good link to see also : http://developer.android.com/guide/practices/screens_support.html
P.S: make sure to use dp not pix as measurement unit on your layouts , also the use of absolutelayout is not a good choice it's deprecated.