Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I've been "Googling" for a while now but I am coming up empty on any decent tutorials on how to "prettify"my android app.
Currently, my android app is fully functional but all it is is a bunch of buttons,text on several views.
What options or techniques exist to make it look beautiful, other than changing the font type, size or colour. Also changing the background colour or image isn't exactly a job done.
I appreciate any guidance on this!
Update
I am not looking for a designer. I just want know how else is someone supposed to design beautiful android apps - surely its just not the XML? Is it just about making a great background and fitting everything around that?
I know the pain you're going through - I'm still coding my app but I'm also on my third design iteration. UI design is definitely out of my comfort zone but then again, it's good to push yourself into other areas, now and again, if only to appreciate the skills which the pros have. That said, check out the new Android UI patterns here and you should definitely consider things like a colour scheme, fonts and overall look-and-feel. There's another good article here by Reto Meier about his approach. Good luck.
Although it is sacrilege of the highest degree, you could sneak a peek (sic) at the UI guidelines for iPhone.
In general, there are two approaches to making a good looking UI.
The first approach is to specialise. Pick a particular resolution, set your font sizes in stone, use precisely positioned images for rounded corners etc.
The second approach is to generalise. Make sure that your layout looks 'okay' on most of the screen sizes. Make sure it still looks good when the user changes the font sizes (etc). Try to keep the graphical elements away from the text elements (e.g. you might put a graphical border around the edges of your app - whereas the specialist would have a graphic filling the whole background with 'holes' for the text to go in)
Thirdly ( generalisations are made to be broken :D ) you can make your app skinnable. It is hard for one person to come up with a design that everyone likes. But if you allow the user control over the ui elements (especially colours and contrasts) they can personalise it and achieve something that is better for them than anything you could come up with. Everyone else on the planet might hate the colour scheme they pick, but they feel that it is perfect.
Fourthly ( sorry ) you can try customising the controls. On the iPhone (for instance) the built in buttons that come with the API are incredibly ugly on anything other than a white or light grey background (their shadow is wrong) - but you have no control over the appearance of the button! You can't even change its colour. So in order to have buttons that don't suck, you pretty much have to roll your own custom control. I highly recommend looking at the Donut Games iPhone apps - they have a 'big round bouncy button' that they re-use a lot.
Don't clutter your app.
Make sure your controls are a fair distance apart. Find someone with 'fat fingers' to user test it for you (use a frozen sausage if you don't have any friends).
Keep in mind that a touch UI is fundamentally different from a mouse and keyboard UI. For starters the tip of a mouse is 1x1, the tip of a finger (according to Apple HIG (and again, apologies for mentioning Apple)) is 40x40 on the old (non-retina) displays. Presumably it is 80x80 on the new one. That means a finger is somewhere between 1600 and 6400 times less accurate than a mouse. One implication of this is that no control should be smaller than 40x40. If you were making a boardgame for instance, that would imply that (on older iPhones) that a chessboard is about the smallest your squares/hexes should get (8 across at 40 pixels is 320 pixels, the same as the phone width).
You can see this effect (a control being too small) with the default Apple info button (the i in a white circle) - it is something like 18x17 pixels, and sometimes can be quite hard to hit (sometimes you get it first go, it creates an inconsistent feel to the app). Cunning developers stick a 40x40 invisible 'panel' behind the button and delegate the clicks that go through to that back to the button.
Don't use small controls!
I don't know if this helps you as much as it helped me but I really got a lot out of this Google IO 2010 Video on UI-Design-Patterns:
http://www.google.com/events/io/2010/sessions/android-ui-design-patterns.html
If you don't have an hour to spend, just read over the slides of the presentation:
http://dl.google.com/googleio/2010/android-android-ui-design-patterns.pdf
I would definitely recommend to watch the video session though!!!
Good luck and have fun!
From experience, a good Software Engineer is not necessarily a good UI Designer. They require two different skill sets, I recomend subcontracting the design to a good UI designer. Even if all they do is a mock up and then you go back and implement their design idea.
One cannot learn desing because it is an art. For this one has to believe in onself and let it happen. There is nothing more important for desing than a positive attitude and of course, in this case, some good Photoshop and Fireworks skills...
But essentially it is an ability to visualise that matters and this is why so many games on android market just don't look good, for rare are people who are good programmers and graphics artists at the same time... yet everything can be achieved given proper attention.
Basically, my answer is: if you want to do it yourself, then you must forget that you are a programmer and believe that you are an artist, desinger and producer. Only then, from that new perspective, you can create what is needed for your product.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Hello everyone and thanks for your time.
Introduction to the problem: Basically the main problem is that I'm designing an android tablet application and I don't know exactly which is the best way to implement the kind of design I've been thinking about. I've been reading that is possible to use another platforms apart of Android, like OpenGL or HTML, but I don't actually know how to do it and if its necessary.
What do I attempt to do? I didn't know how to explain exactly which is my idea using words so I decided to prepare a small image about it, here it is:
So, the idea is to drag&drop the buttons to the color square, and detect if they are colliding, if that happens, start an event. Then all the buttons are going to be ordered again by themselves.
Which is the question then? I'm new at android, and I have no idea which is the best way to start implementing this, if I should bet for OpenGL or program directly in android. And in both cases, which is the best way START CREATING something like this?
Last things: I want to make clear something, just in case: This IS NOT any school work that someone asked me to do, I'm doing it by my own. I'm NOT ASKING PEOPLE TO DO MY WORK I'm just asking your opinion and asking for help and guidance about how to start managing this. (so I want your professional opinion, not any single line of code) :D
Thank you very much to you all. :)
Martí.
This sounds like it'd be pretty easy to do in HTML / JavaScript using touch events, maybe using a support library for drag/drop events. I don't know if it matters to you, but the nice thing with that solution is that it'd port pretty easily from Android to other mobile devices.
Like Quintin said, if performance is a big concern you can optimize and go to OpenGL, but you can probably knock out a simple prototype in HTML in under a day...
in my opinion you don't need any framework. You can do it all with android. I would also advise you to use android. I'm not a good designer, but my suggestion would be for this:
2x Framelayout, for the color tools on the left side and one for the rightside
For the color tools, for each 2 colors you can use LinearLayout. And if you want the exact backgraund design, you can design it with an image software and can set it in the background.
for the colors, you can use an imageButton.
And i also advice you to read the tutorials how to design apps, here is a good tutorial: http://mobile.tutsplus.com/tutorials/android/android-layout/
Open GL seems to be your best bet here. I haven't had much experience with Android OpenGL, but it is going to be the most efficient way to write the app - since you are dealing with collision detection and colours.
Android OpenGL will be the best option since it will be natively compiled by the ADK whereas HTML is going to be interpreted at runtime.
As far as using normal bland Android layouts, I would not recommend that, since this is not a "standard" UI using the standard components. You are creating an entirely unique interface that is very graphical, and so I would recommend sticking to that.
EDIT: You will find that by using standard layouts that ALL of your user interface components will have to be customized, and you will spend a lot of time in your onDraw() methods with the collision detection.
One problem with this is that you need to check whether the object collides with another object, making certain types of objects aware of each other, and may run the risk of circular references. Whereas if you use OpenGL, you can have one list of "Shape" types and then have a "checkCollision(Shape draggedObject)" method which iterates through the list of shapes and checks the collision using an optimized collision detection for the simplest object.
The second problem is doing collision detection in the onDraw() method will make your app lag and seem sticky to the user while performing a drag. The more components the more problems.
EDIT 2:
Here are some resources for Android OpenGL:
http://developer.android.com/guide/topics/graphics/opengl.html
http://www.learnopengles.com/android-lesson-one-getting-started/
2D example with OpenGL
I would like to create kind of an 'electronic questionnaire' with about 40 questions.
Designing the form (mainly consisting of Spinner elements), I found out that in QVGA resolution, I can place a maximum of 3 questions in a layout with a text size that is still readable for elder persons.
Now of course one solution would be to use a Scrollbox, but I imagine that to be quite inconvenient (and unclear: "did I miss a field somewhere above?") and maybe even "ugly".
On the other hand, just staying with 3 questions per layout, it must look ugly on larger displays.
I just wanted to ask how others solved this design challenge and if there are maybe smarter solutions than the ones that came to my own mind so far… 8-/
Different layouts for different screen sizes and resolutions would probably be the best way to handle this. Please see this article on the Android Developers Guide for more information. Also, long forms (from a design and usability standpoint) can be kind of daunting, so from a human perspective I would recommend doing a few questions per page to prevent users from getting frustrated.
I see a lot of these apps like Pulse that have really nice UIs on the android: http://cdn3.digitaltrends.com/wp-content/uploads/2011/04/Pulse-android-625x515.jpg
I want to make a UI similar to this: http://wpuploads.appadvice.com/wp-content/uploads/2012/06/3030-642x481.png where the text is editable/selectable/copyable. Basically an actual textfield, which I believe Android's canvas doesn't supply. How would I create UIs like this on Android. Android's normal xml layout in my opinion usually ends up making some pretty ugly stuff, and OpenGL might be a bit too high end for this kind of job. Any suggestions.
I tried looking around the forums and couldn't find anything really similar to this question? And I am not looking for a GUI builder, but more of something to actually develop the UI. Thanks!
As Mark says, they use normal XML layout. Personally, I've never looked at it, therefore I can't be sure, but I don't see anything "special" that couldn't be done with it either.
About the second app, I think it's even simpler than Pulse, probably. However, it's heavily customized (state drawables, probably), and you'd need StateListDrawable, a couple of 9patch graphics and the custom font you want to use.
If you're not familiar with customizing the appearance of controls, I suggest you start looking at those links above, and Google, of course.
One final note: designing a good UI is hard, let alone a custom UI where you start more or less from scratch, like those above. The Android UI provides a default look and feel that you can use... ICS being much better out of the box, but that's it (and at least it provides default tools to change that). If you can't do, or don't have the experience and/or skill, I suggest sticking to the defaults or outsourcing that job.
Good luck!
I tried looking around the forums and couldn't find anything really similar to this question?
That's because you already rejected the answer. Pulse is written using "Android's normal xml layout", as are most apps on Android outside of games.
After trying to make sense of the Metrics and Grids page of the (fairly new) Android Design website, I gave up on a lot of things. So, basically, I'm trying to find the original layouts that are used in Android 4, so that I can apply the same concepts.
To make this question more objective and not fail under the "too broad" axe of stackoverflow, I ask you for the layout that is used to recreate, exactly and fully, the examples on that page. Did Google provide them in the samples? Maybe a well known didactic repository that strives to conform with standards?
Just as an example, it's not clear what to do to recreate the "48/3 metrics" (16/16/16) in order to make the text fit in it. What if I want to use 1-line of small text? Would it be 16/wrap_content/16, or 16/16/16 to make it consistent with other layouts around the set? What if...
I believe this would not only help the small devs, but also and most importantly, help standardize the look and feel of apps in Android Play. The site is a good start, but far from ideal.
Added details
I never asked a question with this much upvotes, and I didn't even expect that (I have other questions that I regard as "better", but by far not as many votes and favs). Not that I care about votes, of course, but that is to show that there is a great demand for what I'm asking (a bit of an ad populum here, but still...).
Replies to comments
#Ricardo Amaral:
I'm indeed sorry if I wasn't clear enough:
Mandating a standard and requesting unambiguity from it are different issues. One of the reasons I like Android is the degree of freedom we have, so I'm very much aware of the impossibility of mandating most of the common practices.
I believe it relates to the concept of "reinvent the wheel" within the concept of freedom.
Again, those were just examples. Some things are not clear... which are paddings of the outer container, and margins of the inner views? Many times that makes a difference in selectors, dragging etc. etc. etc., and that again translates into a familiar look and feel for the user. One thing feels like splitting hairs, but it quickly adds up to a lot of small differences. And the user notices it... it looks like it lacks that last "finishing touch".
#Michael Slade:
I know they're examples, that they may have been wireframed from templates. As said, I'm already reusing code from the SDK, and I know they're just examples and that we can deviate from them. Again, after all this time, nobody answered.
Optionality benefits from precision. That's what I'm trying to say and ask. Because it's a recommendation doesn't mean its guidelines can be whatever you want them to be. If you do that, it's not the recommendation anymore. That's the whole point of recommendations, by the way: provide an implementarion theory without forcing anyone.
Thanks everyone!
Hate to break it to you but it's likely that the images on the page you like were created with a drawing program, and there are no example to go with them.
Without someone actually going to the effort to create samples for you, your best bet is to go through the samples that come with the android SDK - they will follow the guidelines in most cases.
And remember, they are just guidelines. At the end of the day it's up to you to create a pleasant and smooth user experience, however you see fit.
I am not familiar with creating android apps by any means. However my company is looking to have an app build up. First they would like to have someone design a custom UI for it. However most apps I use at least all generally have the same core UI look/feel which is something we would like to avoid. I have seen apps though that don't even remotely look like the rest. So I am wondering if theres any place to find out what the basic canvas of an android app looks like . Is there any PSD's anywhere for this? Not one hundred percent sure what I am looking for other than concepts at the moment, but we want to know that our concepts are at the least plausible. So if anyone knows any good resources Id be interested to know.
Not PSDs, but you should take a look at the newly launched Android Design site, especially the Building Blocks section to understand what is available out of the box for you. Pretty much all of the controls you can style pretty extensively if you're willing to put the work into it, but have varying degrees of built-in configurable styling flexibility.
Note that while there's something to be said for ingenuity and being able to stand out from the crowd, there's also the flip side of comfort and usability for the user that comes with a familiar look and feel. If you're looking to come up with your own custom controls, etc. and you're not even familiar with creating Android apps, I hope your company is willing to budget a lot of time for the steep learning curve (the learning curve of Android is not so bad, but adding a lot of custom UI on top of that is not trivial for a first project).