I've been looking on best practices for designing Android UI's. While there is a lot of information out there around programming the actual code, there are very few tutorials on doing advanced xml design for Android. If you know of any tutorials, please link them here.
I currently find myself using TableLayout with decent results to achieve some more complex UI layouts. I like that I don't need to supply TableLayout with any fixed width or height values, however, I have had to use strange work-arounds like an empty between two buttons to create a fake 3rd column, stuff like that.
I know there must be a better way than using tables and fake RelativeLayouts for spacers, can someone please explain how RelativeLayouts work on different devices. For instance, if you have a LDPI device, will it display your UI differently as it has less width and height pixels? What if you used 480px (hdpi standard width) as a width property and your UI was displayed on a LDPI device? Would it overflow the screen?
My tables and spacers trick works pretty good, it's almost good enough to stick with it, however, I want to design my UI properly so it works with the most devices possible! Please point me in the right direction, cheers!
RelativeLayout is a great way to go. If you set Views' distances and sizes with dp, those distances in dp will be treated as pixels on an MDPI screen, and they will be scaled so your layouts fill the space equally on LDPI and HDPI screens. The Android Developers tutorial on views has a good section on RelativeLayouts.
Related
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 working on the layout of an android application. But I have a question about the layout. Once i have created a layout and then go to another screen (for instance 4 inches to 5 inches) all my buttons and text boxes are messed up..
Is there a method to make everything static, so that my layout works on every mobile phone..
What kind of layout are you using, could it be RelativeLayout? that might be your problem in this particular instance.
Anyway, in android there are many screen sizes, each of them you should handle with different layouts depending on orientation, size and density. There is no magic formula as far as I know, but 9-patch images can help a lot. Another thing you should do is make sure that you understand how match_parent and wrap_content values work for height and width.
Check this out: Suppoting different screens
You have to create folders for different types of screens take a look at android developers training
This document contains everything you need.
Instead of having everything fixed, it shows how to design a layer that adapts to the various screens you may encounter.
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?
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 have a problem in android application interface design(GUI).
For example when we insert an editText field the height is too big. Yes we can change the width and bit modify.
But does anyone have any link of a reference or idea of how to design the exact design we want. And when we add 2 -3 editText(views) the entire space finish. have to scroll to go through entire page.
And to design the GUI for all kind of screen sizes, what are the standard things that have to follow. I searched but didn't find exact answer.
Any link to a good reference or idea is highly appreciated.
Thank you
set the layout of text edit with:
layout_width="wrap_content" //wrap_content fill the dimension like the content and fill_content all the space free
layout_height="wrap_content"
In order to make your app resolution free you have to take care for the following items
Widgets in your activity (wrap_content, match_parent, fill_parent, or left, right gravity in relative layout etc)
Icons and Images in your activity (You have to keep icons of 3 different sizes in 3 different drawable folders, hdpi, mdpi and ldpi and if you are making your app for tablets also then xdpi (i think))
You have to provide similar text sizes for different screen sizes (3 sizes should be suffice I believe) You can make a general xml file for this and keep it in another drawable folder.
Let me know if you need more detail on this.