Advanced Android UI

[Ivan452]

Hello guys,

I know that this is probably an a complex topic but I'm just searching for some directions where should I go to get what I need. And maybe someone more will find some use of it.

I'm building an application, and you all know that UI is very important. So i'm looking to do some custom UI. I have looked around Android Market for some programs to look up to. And really there are some programs that have nice UI.

What I'm going for is a fully customized UI.
But the thing I do not know is how Android handles different screen resolutions?
Will he automatically scale everything or do i need to do that?

So if someone has done something the same, full custom UI, starting with customizing look of buttons, some animations and stuff like that I would be grateful if he would point me in some direction

Thanx! :)

[Scythe]

Hello guys,

I know that this is probably an a complex topic but I'm just searching for some directions where should I go to get what I need. And maybe someone more will find some use of it.

I'm building an application, and you all know that UI is very important. So i'm looking to do some custom UI. I have looked around Android Market for some programs to look up to. And really there are some programs that have nice UI.

What I'm going for is a fully customized UI.
But the thing I do not know is how Android handles different screen resolutions?
Will he automatically scale everything or do i need to do that?

So if someone has done something the same, full custom UI, starting with customizing look of buttons, some animations and stuff like that I would be grateful if he would point me in some direction

Thanx! :)

For static images (like logos), you would use the different image resolution folders (drawable-ldpi, mdpi, hdpi, etc). For things that stretch (pretty much any layout element), you'd use nine patch graphics. This has built in padding and stretch regions, etc. There's a nice editor in the tools folder of the SDK which lets you build them. For more info, go here:

Nine patch:
http://developer.android.com/guide/developing/tools/draw9patch.html

Here's the different folders/qualifiers:
http://developer.android.com/guide/practices/screens_support.html#qualifiers

Building custom layouts are fairly easy. Most widgets just involve creating a new xml, and new nine patch image or similar for each state of the widget.

[Ivan452]

OK. Thx, Ill read up a bit on that nine patch graphics and see how far I go :)

[InsightGoalie]

OK. Thx, Ill read up a bit on that nine patch graphics and see how far I go :)
Those things are annoying. You have to edit them, then open them with the patch 9 program that comes with the SDK, then draw the guides, then you have to compile them in an .apk and extract them... Unless you're actually making an application I guess. Then you could leave it in the application :p.

[Scythe]

Those things are annoying. You have to edit them, then open them with the patch 9 program that comes with the SDK, then draw the guides, then you have to compile them in an .apk and extract them... Unless you're actually making an application I guess. Then you could leave it in the application :p.

I draw the images in inkscape, and then copy into gimp to draw the guidelines. You don't really need to use the bundled tool unless you want to ;)

[InsightGoalie]

I draw the images in inkscape, and then copy into gimp to draw the guidelines. You don't really need to use the bundled tool unless you want to ;)
I thought gimp cuts out the guides? Or are you just drawing black 1px lines and that works?

[Ivan452]

Very interesting video about UI development
http://www.youtube.com/watch?v=agqQ-H83TT0

[Ivan452]

OK. I have 2 more questios regarding UI.

1. Since design in general is not my strong side (but I have to do it) I need some pointers for learing the basics of design. Colors that can go together, controls, buttons, etc positiong and stuff like that.
And also if there is some book or something only about the Android UI, that whould be great.

2. How can I override the orientation change process?
Because when u move phone from vertical to horizontal i just stretches the background.
is there any way to do something like:
if(orientation==horizontal)
put 1 relative to 2, layout below 3
else if(orientation==vertical)
put 1 relative to 3 below 2

something like android market. If you have a time check its controls rearrangement when u change orientation.
Anyone has an idea how is that done?