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.
Related
I created an image to use for an android splash screen and it displays properly on my phone however when I open the app on a phone with a larger screen it pixelates. So I was wonder if I should create more than one image and if so what sizes should I set for other images because I know I can't use the same sizes as I used for the app icon?
If the images are pixelated
then you need to add larger images for each screen size under your
res folder. sizes depends on your target
or
scale the images. to be safe, make it bigger
it might help you: am I supposed to make images larger for tablets, or same size as handset?
you could probably use draw-9-patch to state which area of the picture can be extended.
Google draw-9-patch
I worked with two approaches so far:
Screen composition
One approach can be using a composition of brackground and a logo. You can have the logo as big as you need (for high resolution screens) and the background as a repeatable texture (it all depends on your design approach) or a gradient or other composition (less prone to pixelation errors).
As big as possible approach
If one image is your approach, you should do a research to know the currently most used and biggest android screen used (https://developer.android.com/about/dashboards/index.html). Knowing that one, you can design your image for that [high] resolution and set the scaleType as CENTER_CROP. With that, you will ensure that the image will be centered, inside the screen, keeping aspect ratio, and at its highest resolution [keep an eye about logos/graphics positions if you want to be sure that they remain visible even in thin screens).
For icons, the best way is Draw 9-patch
Otherwise, you need to scale the images into drawable-xx (res directory), here the explanation
I have a FrameLayout that is used to display a camera feed for scanning with ZBar.
I would like it to take up a large proportion of every screen the app runs on. A hardcoded 275dp square looks great on the latest phones but pushed stuff off when for smaller screens.
I am planning on hardcoding a 175dp square and then in code making it grow based on the dimensions of the phones screen.
I'll probably do a switch on various screen sizes and then decide what to resize the frame to.
Is this a good approach?
How would I go about doing this in XML?
A LinearLayout with layout_weight specified for height/width will allow you to simulate a percentage based layout, otherwise you can use fill_parent when you want to use the whole screen width/height.
You can make one xml layout file for ldpi, mdpi and hdpi(xhdpi and tvdpi if you want to) and literally set different xmls according to the screensize. With this you will be able to fit most screens without a problem, but it is not as accurate as percentage. But remember that not all android devices has the usual 16:9 or 16:10(8:5) and therefore percentage may make the square a bit different from screen to screen.
You can make your own layout qualifyers, but the standard ones are in most cases more then enough.
You should also consider makeing only the frame layout in java, and the rest of the layout in xml.
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.
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.
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.