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.
Related
I am unable to make scalable views, based on the reading till I got these ways to scale views :
To Change Layouts for different screen size (xhdpi etc.)
To use dp in sizes and sps in fonts
To dynamically change sizes of Views using Java code
To use Relative Layout properties
I found most suitable using dp and sps but that's not working accurately, i.e. on devices with scale 3.0 it does not actually works as the screen sizes are probably different that from the standard screen sizes (for which scale is calculated).
Hence I am confused how to make a scalable UI.
I am currently designing a calculator app, hence a grid of 4 buttons (row) and 5 columns has to be created but the arrangement is taking load on me, i.e.
Using LinearLayout with width 0dp and weight 1 for each child can solve your problem. It assures that whatever be the screen size, area for each child will be distributed according to the given weight. See if it helps.
I'm using API 10.
I want to make my layout looking the same across all devices. I can achieve that by using LinearLayout with weights. It works perfectly. As seen on the image below, this is exactly what I want to achieve and it works perfectly:
But the problems that occur are two:
1)I get a warning of low performance because of nested weights.
2)I can't make animations out of bounds of the parent LinearLayout,
as shown in the image below:
So, I decided to make my layout with RelativeLayout. But the major problem is that I can't get the same layout across all devices, like LinearLayout and usage of weights. I spent two days searching for a solution and reading the ADT documentation. According to the documentation I have to make my ImageViews scaled to a factor of 3:4:6:8:12, to match the ldpi/mdpi/hdpi/xdpi/xxdpi. So I did: I created the corresponding #drawble folders, re-sized my buttons as the document says, and placed them inside the matching folders. The result is this:
This is a mess, it is totally unacceptable, for two reasons:
1) Screens may be of a certain density, for example hdpi, but they
differ from device to device of a certain screen size.
2) When I use the dp units relative to an element, for example: from
top of parent, the value I provide differs from screen size to screen
size. It is not by percentage like in LinearLayout.
So, where do I go from here? I concluded from my reasearch, that the only(or not?) solution is to make different layouts for different densities AND screen sizes. Like res/layout-mdpi-large/my_layout.xml and so on. But how do I calculate the dp for sizes and distances from relative components, based on the screen sizes? Do I have to resort to this list? Are these all the devices?:
Any tips, best practices, guides for the workflow, anything?
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.
Is it a bad habit to get the width and hight of the device and set images/button sizes programmatically accordingly.
I find it inaccurate to use different folders for layouts and densities as it gives me wierd results on some devices (on top of the inacurancies)
Your experience is appreciated.
Thank you
Yes it is very wired thing to make the layout for the all supported screen of android. And there are lots of screen resolution available in market.
Once i have made a Demo and it Works for me. I have made one Button which height and Width is same. Now i have set its required height and width as per the one Screen in which it is looking perfect.
After that i have calculated the pixel that it required to make it Possible in that screen and based on that i have applied it to all screen.
Now it works great in all device with any density and resolution.
So if there is any view that generate at run time and you want to set its height and width then the best way is to calculate its height-width ratio and use it.
hope it will helps you.
Enjoy Coding. . . .
:)
Well, most of cases you will have layouts which are, or will become, complex, and it will be difficult to calculate the positions programmatically.
And it will be also a disadvantage mantaining it, because you will not be able to use the interface stuff (grafic layout and so on), and other people, or yourself, will not understand the calculations the same way they would if they see the views in XML. Reorganizing, changing somewhere a position could be painful.
You also will be working frequently with bitmaps, which have a fixed size, if you calculate the dimensions programmatically and stretch they will not look good. At least you would need different set of bitmaps and load accordingly.
It helps if you for example use relative layouts with rules (like above of / align at the bottom of the parent, etc), linear layouts with weights, and dip (density independent pixels). You should do programmatic layout only when it's not possible in other way. Or in some certain cases where it really-really makes things easier.
I've been trying to get a universal layout working on Android with no success. My understanding is that if you specify all widgets in dp, and make it look right in one screen size, it should scale properly to other resolutions, but my results look kinda wrong to me.
I layed out everything in HVGA using a relative layout. The relative layout has a background that our UI designer used to define element boundaries. In this layout, everything looks perfect.
Then I switch to a larger screen with a slightly different aspect ratios, the background scales properly but everything else looks off by some dp. My question is, what is the golden way to make all the elements scale correctly with screen. I want to preserve the ratios of all the elements with respect to the background.
Thanks!
Edit: figured out how to do this. The reason for inconsistency between buttons and background is that background is scaled differently from dp, and devices apparently have different dps. The solution is to manually compute the scale factor from absolute pixels then scale everything manually by that factor. Here is a good reference how to do this:
Scale Android for different screens
dp scales itself in such a manner so that the size of any widget remains constant on different screens having different resolution.
In your case, the size of list-view remains constant but the background stretched to the screen width. To avoid this, use first colour as background of first list-view and same as for second list-view.