Hey guys, I've recently been working hard on redesigning my app and here's a compilation of resources I found useful along the way.
Please post yours so I can add them to the OP.
Online Tools
Android Asset Studio by Roman Nurik
This is an awesome tool which allows you to generate pixel-perfect drawables for your app, directly downloadable and resized for all screen resolutions (xxhdpi/xhdpi/hdpi/mdpi/ldpi) including :
Launcher icons
Action Bar & Tab icons
Notification icons
Generic icons
Tabs icons for pre-honeycomb
Menu icons for pre-honeycomb
All icons can be created either from an image, from the provided cliparts, or even from text
An Alternative Device Frame Generator containing more devices and less strict in term of the original screenshot resolution than the official one
A very useful Nine Patch Generator
This tool is open source, too : http://code.google.com/p/android-ui-utils
-----------------------------------------------------------------------------------
Android Action Bar Style Generator by Jeff Gilfelt
This great tool allows you to generate all the necessary resources (xml, drawables, nine patches, you name it) for your custom ActionBar theme. The Holo guidelines recommend to style the ActionBar with your branding color as an accent for example, well it's never been so easy with this tool.
You can choose the color for all the components of the ActionBar :
ActionBar color & style (solid/transparent)
Stacked Color
Popup Color
Accent Color
Contextual Action Bar background color and highlight color
Oh, and it's compatible with ActionBarSherlock, too!
-----------------------------------------------------------------------------------
Android Holo Colors Generator by Jérôme Van Der Linden
This nifty tool allows you to generate a custom style for all the most usual UI components such as :
EditText
AutoComplete
Button
Colored Button
CheckBox
RadioButtons
Spinner
Colored Spinner
ProgressBar
SeekBar
RatingBar (normal/small/big)
Toggle
ListSelector
Fast Scroll
Switch
Just like the other Asset Studio-based tools, it generates a zipped res folder that you can directly merge into your app
-----------------------------------------------------------------------------------
Android DPI Calculator by Martin Cohen
A very useful tool, I use it all the time. Simply input a width and/or height and it will convert it for you to all screen resolutions (even tvdpi)
-----------------------------------------------------------------------------------
UX Metaphor Equivalents for iOS & Android by Kintek
If you're an iOS developer/designer and are converting your existing apps or making the switch to Android (or the other way around), this tool will allow you to compare both platform SDKs's native UI widgets and find the right equivalents for each component.
-----------------------------------------------------------------------------------
Offline Tools
The Photoshop Android Design Kit by Taylor Ling : a great tool to design mockups and wireframes for you app, and now, since last update, it even includes some popular custom views such as Google Now cards, Croutons, undo-bar etc...
Custom Views & Libraries
I'm not going to make a list of all the awesome open source libraries the android community has created, this would be impossible.
But I'm going to give you links to external websites and even apps who try to achieve this goal, really go take a look, this is very inspirational :
AndroidViews.net by Nadav Fima : the name says it all. It's a website which only feature libraries related to the UI and design. My favourite of this list.
DevAppsDirect by Kenneth Lewelling : a great little app which presents many libraries and allows you to directly launch their demos, very useful to find inspiration.
The Ultimate Android Library by Alexandre Gherschon : a website AND an app showcasing many great libraries (The app is here)
This article from vogella.com : a compilation of useful open source libraries, again
Websites & Blogs
THE ANDROID DESIGN GUIDELINES : I can't stress it enough, read this twice!
AndroidUiPatterns.com : a very nice blog about android design and ux
AndroidNiceties : a blog that's basically a collection of screenshots taken from beautiful, holo-compliant (most of the time) apps. Great source of inspiration.
Romain Guy's blog : Romain Guy is an Android engineer at Google, and his blog is full of very useful articles, like these two about improving the UI performance of your app -> here & here
AndroidDevWeekly.com : a great weekly (obviously) newsletter containing cool news and links about android development/design, I highly recommend to subscribe
The official Android Engineers's blog : says it all I guess^^
Chet Haase's blog : Chet Haase is an Android engineer at Google working particularly on animations and the animation framework, his blog is full of cool infos and snippets
Cyril Mottier's blog : a great resource by a great dev, he writes very good articles and libraries and his blog contains some really awesome posts (i.e : ListView tips & trick, Android app launching made gorgeous & Pull to refresh, an anti pattern)
StylingAndroid.com : great android design blog by Mark Allison
AndroidUIUX.com by Taylor Ling : the blog maintained by the creator of the Photoshop Android Design Kit
Lucas Rocha's blog (Android dev at Firefox) : http://lucasr.org/
Videos
Android Design in Action : an awesome weekly show held by Android engineers Roman Nurik, Adam Kosh & Nick Butcher. They often do redesigns of existing apps, give many great advices. They usually focus on one specific type of apps in each episode, maybe your type of app has already been treated!
Dev Bytes : Held by Android engineer Chet Haase (and sometimes Nick Butcher), Dev Bytes is a great series of short episodes showing you how to implement some nice animations and transitions to jazz up your apps
The App Clinic : Held by Android engineers Reto Meier & Ian Ni-Lewis, this is a weekly show which takes a look at existing apps and talk about what's good and bad in their UI/UX approach
Guides
THE ANDROID DESIGN GUIDELINES (Yeah I know, but I told you, read it twice! :silly
The Android Designer's Cheatsheet : great all-around guide to understanding the basics of Android design (including density buckets, how ninepatches work, 48dp rule & pattern, naming conventions, etc...)
Really awesome but is this for framework-res only?
dragonhustler said:
Really awesome but is this for framework-res only?
Click to expand...
Click to collapse
This is for app development. The res folder of an app's sources holds the image drawables, as well as xml layouts, strings, style declarations etc...
But I guess it could also be used to mod the android framework, idk, I'm not really into rom theming.
This is awesome! Thanks a lot!
Added two new entries :
Lucas Rocha's blog (Android dev at Firefox) : http://lucasr.org/
The Android Designer's Cheatsheet : great all-around guide to understanding the basics of Android design (including density buckets, how ninepatches work, 48dp rule & pattern, naming conventions, etc...). Really good one, go check it out!
ActionBar Sherlock not linked?! PREPOSTEROUS!
No mention of Android Design in Action on androiddevelopers youtube channel?EVEN MORE PREPOSTEROUS!
There's also AmbilWarna, Apache licensed, colour picker compatible with 2.1+ (I think). It's super nice.
For super nice colour schemes visit http://www.colorschemer.com/ or www.colourlovers.com/.
Pro tips for guys on Linux.
Install gPick. This way you can easily pick colours off the screen and plug them into the tools from above.
There is also Agave app that will create a colour scheme off of a one or more colours.
Create a custom launcher for ever website from Asset Studio.
Create a file with with desktop extension in
Code:
~/.local/share/applications
with these contents
Code:
[Desktop Entry]
Name=Android Asset Studio Launcher Icon Generator
Exec=google-chrome --app=http://android-ui-utils.googlecode.com/hg/asset-studio/dist/icons-launcher.html#foreground.space.trim=1&foreground.space.pad=0&foreColor=33b5e5%2C0&crop=0&backgroundShape=none&backColor=ffffff%2C100
Terminal=false
Version=1.0
Type=Application
It will launch it as it was an app.
If you are more of a Photoshop guy, try Pixlr for online image editing
el_bhm said:
ActionBar Sherlock not linked?! PREPOSTEROUS!
No mention of Android Design in Action on androiddevelopers youtube channel?EVEN MORE PREPOSTEROUS!
There's also AmbilWarna, Apache licensed, colour picker compatible with 2.1+ (I think). It's super nice.
For super nice colour schemes visit http://www.colorschemer.com/ or www.colourlovers.com/.
Pro tips for guys on Linux.
Install gPick. This way you can easily pick colours off the screen and plug them into the tools from above.
There is also Agave app that will create a colour scheme off of a one or more colours.
Create a custom launcher for ever website from Asset Studio.
Create a file with with desktop extension in
Code:
~/.local/share/applications
with these contents
Code:
[Desktop Entry]
Name=Android Asset Studio Launcher Icon Generator
Exec=google-chrome --app=http://android-ui-utils.googlecode.com/hg/asset-studio/dist/icons-launcher.html#foreground.space.trim=1&foreground.space.pad=0&foreColor=33b5e5%2C0&crop=0&backgroundShape=none&backColor=ffffff%2C100
Terminal=false
Version=1.0
Type=Application
It will launch it as it was an app.
If you are more of a Photoshop guy, try Pixlr for online image editing
Click to expand...
Click to collapse
I believe you should re-read the OP, Android design in action is mentioned, and as I said I'm not making a list of libraries, but ActionBarSherlock is featured on maybe 50% of the sites I linked.
The assets studio icons generator is featured too.
The size 7 was pretty unnecessary too
Androguide.fr said:
I believe you should re-read the OP, Android design in action is mentioned, and as I said I'm not making a list of libraries, but ActionBarSherlock is featured on maybe 50% of the sites I linked.
The assets studio icons generator is featured too.
The size 7 was pretty unnecessary too
Click to expand...
Click to collapse
I never said ASIG wasn't in there. Speaking of reading the OP?
Android Design in Action - fair.
Sherlock Actionbar should be here. Why? Because for once, it should be a one stop shop. Second, people still don't use it and use old look. Third, there are applications that are branded as Holo and are not compatible backwards as they don't use SAB, but latest API. As in there are still people not using it for no good reason.
The first useful post for real app development on this board.
These two videos from the Google I/O 2013 are related to Android UI design:
https://www.youtube.com/watch?v=s0HIP8EdlnE
https://www.youtube.com/watch?v=Jl3-lzlzOJI
nikwen said:
These two videos from the Google I/O 2013 are related to Android UI design:
https://www.youtube.com/watch?v=s0HIP8EdlnE
https://www.youtube.com/watch?v=Jl3-lzlzOJI
Click to expand...
Click to collapse
Thanks for those buddy
Thanks for the great thread!
Sent from my Galaxy Nexus using Tapatalk 2
We just released PortKit: UX Metaphor Equivalents for iOS & Android http://kintek.com.au/blog/portkit-ux-metaphor-equivalents-for-ios-and-android/ keen for comments/suggestions
madhavakintek said:
We just released PortKit: UX Metaphor Equivalents for iOS & Android http://kintek.com.au/blog/portkit-ux-metaphor-equivalents-for-ios-and-android/ keen for comments/suggestions
Click to expand...
Click to collapse
That's pretty nifty :good:
Having absolutely no experience with iOS development it's nice to see the equivalent UI widgets on this platform, and how much iOS7 got "Androidifyed", especially in terms of typography. (and also how thankful we can be for having Holo, IMO^^).
Adding this to the OP.
Forgive my n00bness but what does "Adding this to the OP" mean?
Yes, there are elements which are similar but if you watch the WWDC 2013 videos on whats new, youll see that iOS 7 is far more than Holo and the Android UI.
iOS has been hardware accelerated using OpenGL ES from the beginning which is why a the iPhone 3GS with barely any cpu or memory was able to provide a smooth experience better than most Android phones until Project Butter and dual core cpus on the Android Platform.
The truth is Android throws processing power at the problem rather than tackling it from an intelligent approach.
In iOS 7 the UI APIs have been rewritten and then the interface has been written with those APIs meaning that anyone can do exactly what apple does in their interfaces.
Every single view is backed by a CALayer which is an open gl surface. They have added some damn good Physics and advanced animation apis in iOS 7 so I expect to see some crazy interfaces a year from now.
Probably their greatest addition is keyframing and auto tweening between any two given collections creating a seemless transition between views.
The parallax stuff is pretty cool too. I dont expect Apple to release 3D screens any time soon but if they did iOS would have the best OS level support for depth within UI's.
I imagine its only a matter of time before passive 3D displays become the norm.
There are rumours that the Android Card style interface is what we will see in Key Lime Pie. If thats the case iOS 7 and Android 5 are going to look very similar.
Anyway, why not have the best of both worlds?
Despite Androids popularity, it would be nothing if it wasnt for iOS originally, and now vica versa, Google stepping up their game with ICS/JB has forced innovation around the market. I think they are both great.
madhavakintek said:
Forgive my n00bness but what does "Adding this to the OP" mean?
Yes, there are elements which are similar but if you watch the WWDC 2013 videos on whats new, youll see that iOS 7 is far more than Holo and the Android UI.
iOS has been hardware accelerated using OpenGL ES from the beginning which is why a the iPhone 3GS with barely any cpu or memory was able to provide a smooth experience better than most Android phones until Project Butter and dual core cpus on the Android Platform.
The truth is Android throws processing power at the problem rather than tackling it from an intelligent approach.
In iOS 7 the UI APIs have been rewritten and then the interface has been written with those APIs meaning that anyone can do exactly what apple does in their interfaces.
Every single view is backed by a CALayer which is an open gl surface. They have added some damn good Physics and advanced animation apis in iOS 7 so I expect to see some crazy interfaces a year from now.
Probably their greatest addition is keyframing and auto tweening between any two given collections creating a seemless transition between views.
The parallax stuff is pretty cool too. I dont expect Apple to release 3D screens any time soon but if they did iOS would have the best OS level support for depth within UI's.
I imagine its only a matter of time before passive 3D displays become the norm.
There are rumours that the Android Card style interface is what we will see in Key Lime Pie. If thats the case iOS 7 and Android 5 are going to look very similar.
Anyway, why not have the best of both worlds?
Despite Androids popularity, it would be nothing if it wasnt for iOS originally, and now vica versa, Google stepping up their game with ICS/JB has forced innovation around the market. I think they are both great.
Click to expand...
Click to collapse
The OP is the "original post" or the "original poster". In this case he means his list in the first post.
Please do not start another argument about which one is better.
Cool thanks.
Wasnt an argument just wanted to point out some facts about the underlying mechanisms in the new UI.
As I said at the end of my post im big fans of both.
madhavakintek said:
Forgive my n00bness but what does "Adding this to the OP" mean?
Yes, there are elements which are similar but if you watch the WWDC 2013 videos on whats new, youll see that iOS 7 is far more than Holo and the Android UI.
iOS has been hardware accelerated using OpenGL ES from the beginning which is why a the iPhone 3GS with barely any cpu or memory was able to provide a smooth experience better than most Android phones until Project Butter and dual core cpus on the Android Platform.
The truth is Android throws processing power at the problem rather than tackling it from an intelligent approach.
In iOS 7 the UI APIs have been rewritten and then the interface has been written with those APIs meaning that anyone can do exactly what apple does in their interfaces.
Every single view is backed by a CALayer which is an open gl surface. They have added some damn good Physics and advanced animation apis in iOS 7 so I expect to see some crazy interfaces a year from now.
Probably their greatest addition is keyframing and auto tweening between any two given collections creating a seemless transition between views.
The parallax stuff is pretty cool too. I dont expect Apple to release 3D screens any time soon but if they did iOS would have the best OS level support for depth within UI's.
I imagine its only a matter of time before passive 3D displays become the norm.
There are rumours that the Android Card style interface is what we will see in Key Lime Pie. If thats the case iOS 7 and Android 5 are going to look very similar.
Anyway, why not have the best of both worlds?
Despite Androids popularity, it would be nothing if it wasnt for iOS originally, and now vica versa, Google stepping up their game with ICS/JB has forced innovation around the market. I think they are both great.
Click to expand...
Click to collapse
I wasn't even fetching that far, just saying that strictly in terms of design, the Holo visual language seems much more appealing to me. But that's my personal opinion.
And yeah, as nikwen said, it meant "Adding an entry for this tool in the original post"
Hi Androguide.fr, thanks yeah I understand what you meant. I guess the thing is, I see a UI as more than the default interface thats provided but more as the capabilities of the UI for future apps. I watched all the WWDC videos and id say the physics and dynamic animation stuff is a vital element to the overall interface, one that screenshots do not convey.
If you consider what the original iOS looked like and compare that to some of the awesome interfaces that third party app developers created, and in the same token what users are able to do with the new Holo theme and its widgets compared with say 2.x.
I think its too early to tell if this visual style is a bad thing or if it will simply get out of the way of the user and provide 3rd party app developers with some great tools to create some really amazing interfaces.
The Windows 8 flat interface was laughed at quite a bit when it was first shown off, but it seems most interfaces are gravitating towards flat. All design goes through phases of vogue. I think were beginning to see the same thing that fashion has had for 50 years which is recycling of ideas and styles to provide brief periods of "re-freshness".
Anyway, thanks very much for putting our toolkit in your Pinned post.
I look forwards to creating some other great content or tutorials in the future which can be of value to the XDA community.
Hi Androidguide.fr, I just noticed your OP links to Taylor Ling's Android PSD file:
http://androiduiux.com/2013/03/12/android-ui-design-kit-psd-4-2-free-download/
It might not be obvious but we have our own linked from PortKit too:
http://kintek.com.au/blog/android-ui-design-psd-free-download/
They are not identical so there should be value in ours too. Especially because we have the icon set in there as well.
Cheers
Related
So, who have had time to look at the UI Design and Interaction Guide? I see everyone's busy discussing and defining multitasking, but isn't this newly released document the most interesting thing to have come out of Mix so far? I think.
I've just skimmed through it but first of all I love that Microsoft FINALLY provied a sleek GUI framework out of the box for app development! Of course, it was expected with Silverlight support and all, but it's nice to get it confirmed. I'm talking about stuff such as
-Gesture support
-Finger friendly controls
-Smooth scrolling panels
I know all these things have been possible before, but not with ease. Coming from the .NET CF world, I've had to spend a lot of time enabling such featurse in my apps. And they're not as slick as I expect them to be in WP7.
The UI is what most needed improvement for the apps on Windows Phones to be competitive with iPhone apps. This will lower the threshold for developers to create smooth, impressive apps. This will increase competitiveness for Windows Phones, which in turn will benefit us, the developers - enlarging our market.
Agree? ..or are most guys at this not that concerned with monetizing on their apps?
I've downloaded it but not had chance to look through yet as I'm at work.
Whilst I'm pretty unsure still about the whole marketplace-only, no FS support stuff, I am quite excited about the new development stuff. Like you say, nice interface controls will be there ready to use instead of having to rely on hacks and third party stuff to achieve something approaching half-decent.
I'm glad this is available already, the more time the better, and it makes sense really as MS will want their appstore pretty well populated at launch to compete with iPhone and Android.
Nilzor said:
So, who have had time to look at the UI Design and Interaction Guide?
Click to expand...
Click to collapse
I did. Found out that there are no file open/save controls. Immediately realized that until a jailbreak comes out there's no way I'm buying a WP7S phone, despite the many things I love about this new OS.
Only 4 "accent colors" plus 1 manufacturer color.
The accent colors are ORANGE, RED, BLUE and GREEN.
Why 4? Why cant the user change it from color palette selection?
I would love to use BLACK or DARK BLUE or blue grey ala iPhone !
I just cannot understand this accent color limitation
if found something interesting in the guide. a windows mobile 7 handy have same number of buttons as a hd2 .
1. Power/Sleep
2. Volume
3. Screen
4. Camera
5. Back
6. Start
7. Search
So, the only difference is the layout.
It's a very valuable document, thanks.
We'd like Microsoft deliver more samples to provide a sort of a framework with frequently used patterns.
In any case Silverlight applications look fantastic.
vangrieg said:
I did. Found out that there are no file open/save controls. Immediately realized that until a jailbreak comes out there's no way I'm buying a WP7S phone, despite the many things I love about this new OS.
Click to expand...
Click to collapse
What is your goal here? Do you want to store data for the App or are you trying to write a FileExplorer app?
tyrannus said:
What is your goal here? Do you want to store data for the App or are you trying to write a FileExplorer app?
Click to expand...
Click to collapse
I need file storage as a user, not as a developer. Anyone who tried to transfer files to the iPhone for third party programs knows it's a PITA.
Microsoft is simply trying to protect you from yourself and the dangers of unauthorized text files and colors.
MooGoo said:
Microsoft is simply trying to protect you from yourself and the dangers of unauthorized text files and colors.
Click to expand...
Click to collapse
+1
I know first hand just how nasty those text files can be .. omg HAX~
and colors?!?... watch yoursnelves. any more then 5 and we've got a global disaster on our hands.
surely ms wouldnt release an updated version of an os with less features?.. would they?
copenhagen said:
+1
I know first hand just how nasty those text files can be .. omg HAX~
and colors?!?... watch yoursnelves. any more then 5 and we've got a global disaster on our hands.
surely ms wouldnt release an updated version of an os with less features?.. would they?
Click to expand...
Click to collapse
While lack of colours seems weird, I'm sure it could be easily implemented.
Less features? Laughable, considering what WM6 is.
Lumic said:
While lack of colours seems weird, I'm sure it could be easily implemented.
Less features? Laughable, considering what WM6 is.
Click to expand...
Click to collapse
Yea just like other other weird things that could be easily implemented, like multitasking, cut & paste, file system access, and having a user accessible SD card slot.
I don't know if you saw the leaked specsheets for the Dell Lightning, but that thing comes with an 8GB miniSD card, user-upgradable.
Yes, it is upgradeable if you don't mind voiding your warranty and tearing apart your entire phone. On the plus side however, removing the battery cover on my Rhodium to get access to the SD slot doesn't seem quite as annoying anymore.
First paragraph:
http://www.techautos.com/2010/03/17/windows-phone-7-series-hardware-requirements/
About teamROU and ROU Launcher
teamROU is an app team (currently in the process of being formed as a company) that is currently developing ROU Launcher, an innovative new launcher that will change how users use their homescreens and apps.
teamROU is a worldwide team; we have members around the world working for us. We have no single office. Therefore, you would not have to relocate for this position.
The Brief
ROU Launcher is actively being developed by our team. However, we currently lost our lead developer, who was an experienced Android coder. Once he left, most of our other developers left. We are now very stretched for developers, hence why we need more.
ROU Launcher is a new launcher for Android, that looks beautiful, but is also massively functional. Apps are grouped into categories in the app drawer, allowing easy finding of the apps.
The widgets in ROU Launcher are highly unique, and like the rest of the launcher, look great. These widgets can add appointments to your calendar, check your unread email and read your Facebook and Twitter social network accounts. Watch our promotional video here!
Responsibilities
• Working with our other developers to build ROU Launcher
• Adding new innovative features
• Coming up with ways to solve complicated coding-related problems
• Communicate regularly with other developers through our project tracker and email
Candidate profile
You must be able to:
• Code in both Java and Android, and have experience in both of these platforms
• Know your way around Eclipse IDE (or your preferred IDE, providing you can prove you can use it effectively) and the Android SDK
• Speak and write fluent (or near-fluent) English - to communicate with our other developers and designers
• Have unwavering commitment to the task at hand and the project as a whole
• Be able to get on with your fellow developers and teammates
• Be able to lead the develop team if needed, and be ready for this at all times
• Know how to use the version control system, git
What we’d like to see
Any apps you’ve created before on the Android platform
A sense of teamwork and commitment
References from previous employers or clients, or reviews of your app, either on blogs or in the Android Market
A CV or resumé with your work, educational and personal history
If you think you’d like to apply for this job, email philip.e.oakley(at)gmail.com
Hi Guys This is a guide on app design guidelines.This can be applied everywhere and not only app design. I have seen many apps that perform awesome but their UI scares people away! This won't be a very detailed guide, only basic pointers on UI Design.
First off i would like to say that User experience and functionality of the app is equally or more important than it's UI. There's no point in a app that has a awesome looking UI but is very laggy or lacks functionality.
Lets begin with a few tips :
Try to make the UI simple and clean with no extra clutter.Hide extra functionality in menus. Keep the main function of the program in the front.
Make the UI flat.Use subtle gradients and shadows. Don't make it too flat like the metro ui,in which you can't distinguish an icon from a button
Use a specific color scheme. Select two to three lead colours. and select 1 or 2 background colours.
Either make it dark themed, or light themed, don't mix the two!
Use transitions. But not too fancy.
Split your app into different parts and provide a easy way to navigate
Fix Whatever you can behind the scenes
Use short Phrases, No one wants to read too much to do a simple task!
Use pastel colours or darker colours. ie. one shade lighter or darker than the original color.
Have contrast between the text color and the background color, making it easier to read.
Tricks :
Don't waste much time making animations. Use LayoutTransitions (android 3.0+)
Test your apps on different screen sizes.
Download the color swatches provided by google -click here
Google is your friend. Go to developer.android.com for more guidelines, application fundamentals etc.
Use good typography. Roboto and helvetica are some of the good fonts. Download roboto - click here
Guide on iconography - click here
Warnings! :
Do not use harsh gradients! for eg.. black to white , It makes the app feel cheap.
Try and stay away from putting ads
Do not let the app make decisions for itself, let it ask the user!
Do not make the app too colourful.
Make sure it runs smooth without jitter.
Don't put too much info. at once!
Don't use too flashy colors that hurt the eye.
Again, this isn't meant to be a very long guide, just a few basic things you should keep in mind while designing. For more detailed guidelines use developer.android.com
If i missed something important let me know! :good:
That's really helpful..
Thank you
wad!e said:
That's really helpful..
Thank you
Click to expand...
Click to collapse
Glad you liked it
Amazing guide! Thanks so much! I'm glad more people love great design.
Sent from my Galaxy Nexus using Tapatalk 4 Beta
Hello there, thanks for this guide.
I am no developer so I don't have to mess with the graphics, but I still often wonder : in android programming, where there will always be the probrem of multiple display size / resolution, why isn't the most primary & most basic guideline to use as much as possible vector graphics instead of bitmap based graphics ? wouldn't it save a huge amount of hassle of having to make gfx resources for different screen sizes ?
thx in advance
phentex said:
Hello there, thanks for this guide.
I am no developer so I don't have to mess with the graphics, but I still often wonder : in android programming, where there will always be the probrem of multiple display size / resolution, why isn't the most primary & most basic guideline to use as much as possible vector graphics instead of bitmap based graphics ? wouldn't it save a huge amount of hassle of having to make gfx resources for different screen sizes ?
thx in advance
Click to expand...
Click to collapse
Maybe it would be easier.
However, you would need a proper library to do that. Android does not support adding *.svg vector graphics by default. So all the conversion of the vector graphics need to be done manually. (There are some libs out there, but they do not support all features of *.svg graphics.)
For basic things there is support to do that using the standard Android development APIs provided by Google (declaring drawables in xml files) but it will not be enough for shapes which are more complicated than lines, rectangles or circles or a combination of those.
Addititionally the conversion of vector graphics to bitmaps (graphics consisting of single pixels) would need much processing power and would slow everything down.
Hence *.png and *.9.png files are still the standard way to do that.
@TechMasta: By the way, great guide.
TechMasta said:
Try and stay away from putting ads
Click to expand...
Click to collapse
No ads? How does one go about monetization then? Don't get me wrong. I'm a Windows and Windows Phone developer. I was thinking of porting my apps to Android. I'm just getting started. But I'm using Windows Azure for which I do have to pay for. How should I go about those expenses?
TechMasta said:
Do not let the app make decisions for itself, let it ask the user!
Click to expand...
Click to collapse
Sometimes it should. However, the user should be able to change the default behaviour. Or as the android design guidelines express it:
Decide for me but let me have the final say
Take your best guess and act rather than asking first. Too many choices and decisions make people unhappy. Just in case you get it wrong, allow for 'undo'.
Click to expand...
Click to collapse
(http://developer.android.com/design/get-started/principles.html)
Great guide, though.
akshay2000 said:
No ads? How does one go about monetization then? Don't get me wrong. I'm a Windows and Windows Phone developer. I was thinking of porting my apps to Android. I'm just getting started. But I'm using Windows Azure for which I do have to pay for. How should I go about those expenses?
Click to expand...
Click to collapse
You can put ads if you want. Just don't bombard the user with them, place them in a way it does not interrupt or come in the way of the user when he is using your app
phentex said:
Hello there, thanks for this guide.
I am no developer so I don't have to mess with the graphics, but I still often wonder : in android programming, where there will always be the probrem of multiple display size / resolution, why isn't the most primary & most basic guideline to use as much as possible vector graphics instead of bitmap based graphics ? wouldn't it save a huge amount of hassle of having to make gfx resources for different screen sizes ?
thx in advance
Click to expand...
Click to collapse
With google's plugin for eclipse you can add your graphics in multiple resolutions by Copying your layout from "layout" folder of resources and paste it in the "layout-land", "layout-xlarge" etc.
SahilC said:
Amazing guide! Thanks so much! I'm glad more people love great design.
Sent from my Galaxy Nexus using Tapatalk 4 Beta
Click to expand...
Click to collapse
Glad you liked it
Thank you very much, very useful information.
Thx for it mate I will develop good think
Sent from my GT-I9100 using xda app-developers app
Looks good
graphics design
Thank you for this information about web design. Really nice.
Good set of tips for the first version of an app!
The next level of designing should ideally be with testing different design variations via split testing.
Making Decisions
TechMasta said:
Do not let the app make decisions for itself, let it ask the user!
Click to expand...
Click to collapse
Hai,
Thanks for your guide. But I am having a different opinion from one of your warnings.
Let the app make decisions by itself, for example when user deletes an item DELETE it. But do provide an option to UNDO it. Showing another dialog to confirm it, in your words "ask the user", is redundant.
Because providing too many options makes the user overwhelmed in an unexpected way. Choose the best/defaults for your app and provide some ways to configure them [Ex : Colors, Themes, Font size etc]
Ahamed.M said:
Hai,
Thanks for your guide. But I am having a different opinion from one of your warnings.
Let the app make decisions by itself, for example when user deletes an item DELETE it. But do provide an option to UNDO it. Showing another dialog to confirm it, in your words "ask the user", is redundant.
Because providing too many options makes the user overwhelmed in an unexpected way. Choose the best/defaults for your app and provide some ways to configure them [Ex : Colors, Themes, Font size etc]
Click to expand...
Click to collapse
True. This can also be found in the Android design guidelines:
Decide for me but let me have the final say
Take your best guess and act rather than asking first. Too many choices and decisions make people unhappy. Just in case you get it wrong, allow for 'undo'.
Click to expand...
Click to collapse
(Source: http://developer.android.com/design/get-started/principles.html#simplify-my-life)
a
nice
Nice Tips
These tips are very useful. One should keep in mind while dealing with apps whether in Android or iPhone.
This collection is meant to be a central gathering point for anyone who is looking for some sources of material to use in their widget design. I'll start it with some of my personal favorites in the different categories and hopefully other can help this grow through their contributions :fingers-crossed:
If you have questions concerning the collection or if you want to name some sources of your own, so they can be added to this collection, please feel free to post in this thread.
If you are looking for tutorials, guides and references for Zooper itself, please have a look at my other thread [REF] Zooper Guides, References and Advanced Parameter Snippets or if you have a general question about Zooper though, please check the General Zooper Forum or the Q&A thread. Thank you for helping to keep this thread on topic :good:
Categorized List of Ressources - Post 2
Device Frames - Post 3
Changelog
Code:
1.00 - Initial Release (without Icons category)
Ressources
Apps
First I want to start off with some app that I use nearly every time when designing/working with Zooper. These are just my personal favorites and if you have an alternative app for the same job, please post about it so I can add it to the list.
Gallery/Imagepicker: QuickPic - For the currently best available gallery app on Android. Simple design, not too overloaded with functions and it just works great
Wallpaper: Wallbase HD Wallpapers - The app version of one of the wallpaper sites. Works really well, great selection and a good search function
File manager: ES File Explorer - My go-to file manager on Android. Root capabilities, tabbed file browsing, advanced functionality like zip/unzip, all that and more rolled into one awesome, free package.
Archive manager: ZArchiver - Can unpack nearly any know compression format. Essential if you download stuff directly to your device and your file manager doesn’t support compressed archives.
Fonts
For fonts, my personal favorite is Font Squirrel. They have a huge collection of great looking, free fonts and the best part: all their fonts are guaranteed to have a commercial compatible license. So if your are looking for a nice font to replace Roboto in your designs go check it out: http://www.fontsquirrel.com
While Font Squirrel is my main source for fonts, there are other noteworthy sites I like to check for fonts:
Google Fonts - Also has a good collection of free fonts and a pretty niffty search (Google, d’uh ), that helps you narrow down those choices https://www.google.com/fonts/
Dafont - My main site before I discovered Font Squirrel, as it has a very broad collection of different types of fonts. http://www.dafont.com
To use your new discoveries, download them to your phone. Most times they will be in a ZIP, so you’ll need a filemanager with the abilitie to extract these or use an app like ZArchiver (see Apps category). The extracted or downloaded fonts should be in either TTF or OTF format (check the file extension). Copy those files to either /sdcard/fonts/ or /sdcard/ZooperWidget/Fonts/ and they will show up the next time you are going to select the font familly on a Text or Rich Text module.
Wallpaper/Backgrounds
Here are some sites I check if I’m looking for a new background or pictures
http://www.simpledesktops.com/
http://www.thepaperwall.com
http://wallbase.net
http://www.deviantart.com
Icons
Not yet finished...
Device Frames
To show of your newly created widgets you probably want to share a screenshot. While you could just upload and be done with it, it certainly looks so much nice if you have the frame of your device around it. So here are some possible ways how to do this.
Device Frame Generator
DFG is an app to generate your device shoots directly on your devic, no other tools necessary. It currently supports the Nexus range, HTC One, HTC One X, Samsung Galaxy Note, Samsung Galaxy S III, Samsung Galaxy Tab 2 and Motorola Xoom
Website: http://f2prateek.com/android-device-frame-generator/
Play Store: https://play.google.com/store/apps/details?id=com.f2prateek.dfg
Device Art Generator
If you are on a PC and own a Nexus device, you can also use this website to generate your device screen shot. Just drag and drop the picture onto the device you want and you can download the now framed screenshot instantly. This works with Firefox and Chrome and needs no installation.
https://developer.android.com/distribute/promote/device-art.html
Photoshop/GIMP
Probably the most versatile, even if not the fastest, to make your screenshots stand out is to go with an image editing software like Photoshop or GIMP. For those there is a nearly endless amount of really nice, high quality templates out there. Here is a list of some great sources:
http://www.dribble.com - Dribbble is probably one of your best sources for this. Just do a search like “<device> psd”, for example “nexus 4 psd” and you’ll find lots and lots of gorgeous templates for you to work with.
http://www.deviantart.com - If you can’t find what you are looking for on dribble, you can also try the same search on deviantart. This will probably yield more screenshots then PSDs but there ought to be some gems to discover here too.
[Devices][PSDs] Flat Designs.. Another great source is this nice collection of flat designed device PSDs for a lot of different devices from Samsung, Motorola, Sony, etc.right here on XDA by Recognized Themer DD-Ripper
Reserved
For future use...
Reserved
... and one more. You never know
Looking forward to your icons section... I've found your posts and examples immensely helpful with the tinkering I've done. Great work with the guides! :thumbup:
Sent from my HTC One using Tapatalk
Shoow Great
Finally, you have decided what your product is going to look like and how you want your user to experience it. If you ever wanted to know what is UI UX design all about? Then this is the simplest way to understand them. The UI also called the user interface is responsible for giving the important pointers to the user suggesting the next move. The UX also is known as the user experience gives the user a good experience after following the pointers. Well, this is for the layman to understand the difference between the UI vs UX. ( {Mod edit} )
Why Should You Choose Minimalistic UI Design for Your Mobile App?
As soon as you install an app and open it for the first time, what is the first thing that instantly catches your attention? Well, for many out there, it has to be its design. If an app design is intuitive, it is certain to enamor the user and next they would focus on the features. However, if an app is highly-features, but has a boring or complex design, then the users are certain to uninstall it soon enough.
UI/UX Design
The “UI” in UI design stands for “user interface.” The user interface is the graphical layout of the application. “UX” stands for “user experience.” A user’s experience of the app is determined by how they interact with it.
Noob
I need to learn UX or UI designing, where I should go, or how many times it takes? please reply
UX design introduces to the term “user experience design”, while UI stands for “user interface design”.
On the most basic level, UI is built up of all the elements that allow someone to communicate with a product or service. UX, on the other hand, is what the individual communicating with that product or service gets away from the entire experience.
Difference Between UI and UX design
If you want to understand the difference between UI and UX, I advise you to read the blog articles. The article The difference between UI and UX design describes each of the terms in detail.
the ui Is "Simply" part of UX, that is a general and more complex topic.
Sent from my Redmi Note 8T