Which is the best way to implement this graphical design? (Android) [closed] - android

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

Related

Android UI vs Opengl ES 2 UI

this question is more for looking advices
I've developed an almost full user interface in pure c++ and opengl es 2, currently I'm developing that the click/touch events be propagate as in HTML, I can't remember why I decided do a UI in opengl, but now I realize that I'm reinventing the wheel.
so currently I have many "elements", buttons, containers, scrolls, pictures, animated pictures, borders, text, drag-drop's, I can set easily where I want each element, set sounds, and I really don't know how fast and effective it is right now, but I've maked all the fast and memory effective that I can, and I planning to use multi-threading in the future. And my goal is to approach a system like html.
And now that I'm looking for how to implement my UI in native Android (java), I realized that I was in the correct way, all the properties and methods all the structure I'm implementing in c++ and opengl is almost the same as in android, even I think my implementation is easier to use the images and sounds because I've automatized all and I can put it in the assets folder, and in the code only put the name of the file and the program returns it, with and effective memory managment.
the current elements are elements that I need for a game interface, so if I need other kind of element I'd have to write it, but right now, I have all elements that I need, I think so.
maybe my code in c++ is faster than java.
but even with all this, I know I have a lot to do to have a full UI, so can you give some advices or experience, advantages, disadvantages, it worth to continue with the UI, or better learn (beacuse I just know a llitle bit of UI Android) UI Android, modify all my game for use the new arquitecture/system, What do you think?

Starting point for app creating, where to start

I am looking to start writing apps for mobile devices. I know a little about this subjec, and I am proficient in both java and python. However, before jumping into creating apps I wanted to get the community's input on a question I have not yet found the answer to:
How/Where should I begin?
I understand this question is fairly general/basic for a community that focuses on solving/debugging complex programs, but if there is a recommended tutorial (or specific platform) that will help a beginner(such as myself), it would greatly reduce the frustration and amount of monotonous questions asked on this forum and others.
Regards
Coursera is offering 3 courses all using android development which started last week. That would be an excellent starting point for anyone:
https://www.coursera.org/specialization/mobilecloudcomputing/2
How/Where should I begin?
I don't know about you, but I often learn by example more than reading. You mentioned that you're proficient in java so thats a great start. After you understand the Android SDK it's really only the UI good practices you need to learn. So here's my suggestion.
Start off with something super simple. Let's say, create your own version of a calculator. Something that can add, subtract, multiply, and divide. This should be dirty, ugly, but works correctly.
After doing this, take a look at some other android calculators on the play store. Check out Simple Loan Calculator. I use this example because it offers a lot of android UI components. ViewPager, ActionBar, etc. Download this app, take a look at it, and try to mimic it. This should provide an idea on how to work with the android UI components.
What's next? After you have done these two apps you should be relatively ready to tackle your own project.
HTML apps are easy to port across multiple mobile platforms. I have set up an Android HTML template as a starting point. You can just import this project into Eclipse and take a look at that.
https://github.com/jakewp11/HTML5_Android_Template
Here is my experience for ios,
There are three things that I consider as pillars
Objective C
Memory managment
Design patterns
The first one looks obvious but I'd stress on learning concepts like protocols, categories, extensions. As a beginner I thought that learning the syntax was enough, but time and again I had to jump back to the language concepts to understand what's going.
The memory managment , the most talked and confusing subject and now since we have automatic referenc counting to make things simpler and often new Dev skips learning memory concepts (I did it). So I suggest you to have an idea what actually happens under the hood of arc " the manual memory managment"
The design patters,
When I started off , to pass data and control , what I used to do was achieve every thing through the only design patten I knew (target action) . I lack the knowledge of design patters didn't how easily I could achive better results with less code.
Some resources:
Dev.apple.com
http://www.raywenderlich.com (one of my best tutorials are here, you can find one on design patterns)
http://rypress.com/tutorials/objective-c/
And yes , the sample projects at Dev.apple are the best tutors.

Programming a Likeable Android GUI?

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.

Create a Custom Android App UI

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).

Prettifying my Android App? [closed]

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.

Categories

Resources