I've read the Android documentation:
http://developer.android.com/guide/practices/screens_support.html
but still have some questions.
I'm trying to design a music application which basically has images of the instrument (ImageButton) that play a sound when clicked. However, I'm confused about how to have the ImageButtons scale to fit all the different screen sizes and how to position them.
Which layout is best used for needing to position ImageButtons in specific locations on the screen? (i.e. cymbals on a drum set) FrameLayout, RelativeLayout?
If I only really care about medium and large screens, do I need to create different resources (images) for both as well as a different XML layout to position them?
I'm trying to find the simplest way to do this without having to create a separate layout XML file for positioning/size and separate image resources for each screen.
Any guidance is greatly appreciated. Thanks!
Which layout is best used for needing
to position ImageButtons in specific
locations on the screen? (i.e. cymbals
on a drum set) FrameLayout,
RelativeLayout?
RelativeLayout. In the real world, cymbals are positioned relative to the drums.
If I only really care about medium and
large screens, do I need to create
different resources (images) for both
as well as a different XML layout to
position them?
In terms of the layout, you only need a different layout if the rules would differ. It is very possible that the positions of the cymbals relative to the drums would not change based on screen size.
In terms of the images, I would suspect you'll want separate versions for different screen densities, not for different screen sizes. That way, a cymbal will be (roughly) the same physical size (inches/millimeters), even though that takes more pixels on a high-density screen. If you use the same images for all densities, in some cases, the images may be too small to tap readily.
Related
I read something about supporting multiple screen sizes in Android.
For that most of the answers recommended to create different layouts
(layout-normal, layout-small, and so on). But that would mean that
I have to define all my layouts multiple times. I don't think that
this is a smart solution.
Is there no way to create just one layout and to automatically scale
it for any display size?
There are several parameters in layouts in android that adapt themselves to the size of the screen (fill_parent, center...), however I have not seen in android's layout parameters for everything... for example 1/3 of width.
Finally what I am doing is the following:
One layout per architecture of the interface. For example, in tablets I change the architecture, integrating sometimes 2 layouts in one.
Include, programmatically, changes of sizes. For example, an button I want to be 1/3 of the screen I need to programmatically obtain the width of the screen and change the button size.
Always include several sizes of icons that android automatically selects depending on resolution.
But there is a significant part of the job that needs to be done "by hand".
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 a full screen png image with all descriptive text for each EditText. I want to place the six EditText input areas at the correct positions on the screen.
I understand the different layout folder names for different screen sizes, densities and orientations. So I would have different layout XML files for each.
My problem is how to place the EditTexts at the correct location, and have them scale what would be small amounts with the small variations of sizes as the full screen png image will scale.
I believe that I should not specify locations, even with density independent pixel (dp |dip), as they may not work in future versions.
I cannot find anything on searching for this problem. What I can think of is a Relative Layout with blank or transparent dummy TextViews pushing the EditTexts to the correct positions.
My reasons for doing it this way with one png image for all the non-EditText parts of the screen are (I think)
- Can get a nicer screen image
- Is more efficient to place one png ImageView on the screen
- Is how it was done in another mobile environment
Any thoughts or suggestions?
My recommendation is that you remove any text parts and other that needs to be aligned from the background image, then create a RelativeLayout where you can add these as real TextViews/EditTexts.
This will give you the best result and flexibility considering all the different screen sizes and resolutions available for Android phones and tablets.
I am creating a simple game in android so I can create something and learn how to program in Android (I'm a noob).
Right now in my layout editor (i think thats what its called, basically the place where you can create your layout xml files) there are many sizes on the top left... which one should i target? do i need to make a separate layout for each one of them?
Thanks!
R
The screen size selection is only intended to give you an impression of what the layout looks like on various screen sizes and densities. A good place to get started is Common Layout Objects and Supporting Multiple Screens.
When developing for Android, you should not target a specific screen size, but instead make layout elements fit proportionally. An exception may be x-large displays such as tablets, for which a great read is Distributing to Specific Screens. An example of getting elements to position nicely is this question.
When specifying the size of buttons and toolbars, I've been using the "device independent pixels" (dip) feature of the XML layout files. By using dips, I can specify the physical size of the GUI components, which is good for ensuring components are always readable and clickable for all screen sizes. For example, my app has a horizontal toolbar that is about 50dip high at the top with several 40dipx40dip buttons along it.
However, buttons whose physical size is just big enough to see and click on for a small screen aren't very usable on tablets. For example, my toolbar will contain huge amounts of whitespace, the buttons are hard to see (as you tend to hold the tablet further away from your face) and the buttons are hard to click on in practice (as they are small proportional to the screen)
Are there any resolution independent approaches for dealing with this?
I know I can use "layout_weight" to stretch components so I can specify what percent of the screen to use but this is going to be really cumbersome for lots of buttons (also, my buttons need to be square) if I have to do this mostly manually. I can use different layout files for each device, but this is a pain.
Are there any resolution independent approaches for dealing with this?
Use dimension and drawable resources.
You haven't indicated how your buttons are "40dipx40dip".
If they are set that way via specific heights and widths, instead of having 40dip in a layout or in a style, use #dimen/toolbar_btn. Then in res/values/dimens.xml define that to be 40dip and in res/values-large/dimens.xml (or maybe res/values-large-land/dimens.xml) define that to be, say, 60dip, or whatever works for you.
If the buttons are "40dipx40dip" because of images, then it's merely a matter of creating somewhat larger images for tablets and putting them in, say, res/drawable-large-mdpi/ resource directory.