I have read all about supporting different screens and I understand the concept of Density Pixels (DP). However one thing I am not sure about. Lets say I have an image file which is 200 by 200 pixels and I loaded it using xml with wrap_content attributes at the top left of the screen (0,0). Now let's say I want to place a textview programmatically beside it.
If I put the text view at coordinates (250,0). Does that mean that the text view will never overlap the image and will always be to the right no matter what the device density/screen size is.
I understand the distance ( gap) will be different but I am hoping my theory of not overlapping will hold.
I tried it on 2 device and no issues but I am not sure if this is coincendence
Thanks
If you are using px unit it will always remain the same. But if you are using dp unit instead of pixel you cannot definitely be sure.
By the way you should use toRightOf property instead of this approach if you only want this.
Related
I am migrating from Android to iOS (Swift). In Android UI elements are scaled up or down (height and width using "dp", layout_weight e.t.c) according to device size.
However I find this VERY difficult to achieve with Auto Layout's constraints, I want the elements in my UI to scale according to device size.
For example, in the shared image below, asides the compression of images to fit the screen width, every UI element has the same size, only looks like UI elements have been duplicated with same specs on all screens
This might help others in their migration from Android to Swift
(I only pinned the width of the 2 ugly ImageViews below)
P.S: This is what I'm trying to replicate guys, this view to fit properly on all screens. Sorry for the blur, I'm not in charge of this project
There's a zen to the AutoLayout. Let me see if I can give you some direction.
You'll want to test every UI on the smallest simulator available (iPhone 4S). This will let you know if you need to adjust your elements' minimum size.
Now for a top-to-bottom review of your UI posted:
"Profile" looks fine
To make the top-left and top-right boxes resize with screen size, you'll
want to give a constraint to the superview on left and right sides respectively. Then you'll want to make a horizontal constraint between the two (to maintain a space between them. Then you'll want to set them to equal widths. You can also set aspect ratio constraints for each one.
Your forms look fine. I can give more guidance here if the look you're after doesn't match the image you posted.
For the views below the form, you'll probably want to follow #2 above.
As for the height issue, set a constraint from your bottom view to the superview's bottom. There might be crowding, interface builder might yell. Chances are, you'll need to set the horizontal spacing constraints from = to >=.
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'm stuck and I think wisdom (aka experience) is the only solution.
I need to be able to have boxes on a screen with data inside each box. The number of boxes on the screen needs to be able to change and the boxes need to scale accordingly (as well as the text data inside of them) to allow for the additional boxes.
Example: I might start with only 8 boxes which are evenly spaced and displaying data at a reasonable font scale.
As I add more boxes I need the rest of the boxes to scale down and allow everything on one screen.
I am currently attempting to use a TableLayout, but I'm not certain how to make everything scale correctly. Also, I'm generating everything programmatically by extending the TableLayout. Can someone point me in the right direction. Is there a better layout method that I'm not seeing? I'm sure I'm not the first person to need this, so are there examples available that I'm just not finding by searching?
The eventual solution was to build my own scaling function which took screen pixel dimensions and calculated the appropriate margin offsets to use on a relative layout. It requires a complete redraw each time the scaling factor changes, which is annoyingly resource intensive.
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 a big png which has some buttons "drawn" on it as images. Can I use it in a way that it can be shared as both background and buttons?
For example, I can load it as a background which will have "buttons" in , say, position X 5 Y 5 to position X 100 Y 100, and "button" in position X 110 Y 110 to X 200 Y 200.
If this is possible, can I also have "two state" buttons? Different image for "pressed" etc.
Best Regards.
Based on what you've said, it sounds like a good solution might be separating the buttons from the rest of the png. Set the button-less image as the background of your parent layout, then add your buttons on top of it. If the buttons cannot be decoupled from the rest of the background, you'll probably need to use completely transparent buttons.
Something to keep in mind would be that, because screen sizes differ, what your intend to do probably best achieved by adding the buttons programatically and setting their size and position relative to the current screen size. Also good to remember is that, due to this fragmentation, setting an image with the android:background attribute could possibly resize and distort your image, changing the target location for your buttons.
As for multi-state buttons, here's the part of the dev guide that can help you: (What you'll need is the android:state_pressed attribute)
http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList
If you need further help, it might be easier if you give it a try yourself and see what issues arise, so that you can focus your question, post some code, and get a more detailed response. What you're asking is pretty broad. Good luck!