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.
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 hired a designer to help me redesign the UI for my Android app. For each Activity he gave me an image for the background, which includes any static content like fancy frames for text content; plus images for the buttons, which must fit in to the background image in exact places, to fit into the frames in the background image.
However, since Android devices have different screen sizes and aspect ratios, it's easy to fit the background image by itself with android:scaleType="centerInside", but how can I get all the other images to fit in with background exactly, to the pixel? If they didn't have to fit in with the background, I would just set the exact width and height for each ImageButton, but depending on how the background scales (based on the screen size and ratio) they might end up not aligned correctly.
Thank you very much in advance.
Update:
Is there some way I can have an entire view (e.g. a RelativeLayout) scale inside the screen, like the way the image scales inside the ImageView with scaleType="centerInside"? If so, I would be able to set the RelativeLayout's size to the same as the background image, and put all of the other buttons / images in their places relative to the background image, and then just have the whole thing (the RelativeLayout containing all the other views) center inside the phone's screen.
Your approach is wrong (or at least bad), because android devices offer screens not only with different sizes but also with different densities. What you shall read now is Designing for Multiple Screens first. Then understand that non scallable bitmaped UI will rather not work as you imagine. You need to support screen sizes which means your UI elements (like i.e. buttons, lists, headers etc) shall scale. There's lot of possibilities to deal with this, one is using 9-patch bitmaps (randomly chosen tutorial on the 9-patch).
Also, please read this article: Supporting Multiple Screens
When desining UI it suffices to assume you design for mdpi density. Once your layout is done you create drawables for i.e. mdpi and hdpi (and put under the same names into res/drawable-mdpi and res/drawable-hdpi respecitvely). Layout files remains unchaged but framework would automatically pick right asset so your UI will look sharp as long as you provided drawables for that density. Please see Providing Resources article as well.
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 developing a simple game part of application where i need to create a game using lots of images of different different shapes, imagine ice breaker game where i need to break ice using hammer.
So when i think of setting layout with different types of ice images and that too which support all different densities,i get stuck and not able to understand how i set my layout, whether with Relative / Linear Layout so that it give me same result in all size of android devices except tablets.
I hope you understood the problem, support of all density, around 500-600 images with different shapes, which layout to use and one more thing .apk size is also big matter for me as there are other lots of images other than for this game.
Please read the Screen Supports for the better understanding.
Use configuration qualifiers as explain in that Document for the Different Layout. And Also put the XML file with in that layout drawable directory.
that help me. So it will be also helpful to you.
Be free to comment if you have any dought.
Edited
You can set the layout for the different screen support as like below:
See the Image Below:
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 :-)