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
Hi,
What is the best approach to implement different designs for tablets and phones. I have an application which has a totally different design on tablet than phone. Is it advisable to keep both in the same apk? or make separate APKs?
Thanks in advance
Use a single apk. It's not a good practice on Android to publish a "HD" version of your app as it is often seen in iOS. You can easily create to different xml layout files and put the one for Tablets in the layout-large folder.
Yeah, use resource modifiers and flexible layouts using Fragments.
Google has got a great documentation on that topic.
Google for "android designing for different screens".
Check this answer I posted in another thread:
nikwen said:
Read this: http://developer.android.com/guide/practices/screens_support.html
And this: http://developer.android.com/training/multiscreen/screendensities.html
Click to expand...
Click to collapse
Thanks alot for your answers... Even if the design is totally different for each application!!
Sent from my Nexus 7 using Tapatalk 4 Beta
The best approach if you have custom images is to make different images sizes for each image and put them in the corresponding dpi folder in the res folder so that the app pulls the nearest image size from the dpi folder that it needs to do that same with the layout make a low medium high and xdpi layout file so that the app can layout its elements in the correct way for each dpi setting
karimaelo said:
Thanks alot for your answers... Even if the design is totally different for each application!!
Sent from my Nexus 7 using Tapatalk 4 Beta
Click to expand...
Click to collapse
Yes, you can. As long as you know when it is tablet or not and you will carefully defining and crafting the UI on the java code. There are some techniques to define if the current device is tablet or not (but not 100% true if let say later there are android phones has full hd with 1080p or more). One of the technique is by defining value on the res/values (for phone) with boolean value isTablet = false; define value on res/value-large and values-swXXXdp (where XXX is your target pixel for tablet) with boolean value of isTablet = true.
From the java code you can simply get the values and start from there.
Hey All,
I have been working on/updating two apps of a customer with different brandings (each app has three different resource folder) for the last two years after I took over the apps project. Until now I always had a Designer at my side doing all the stuff a programmer usually doesn't want to do :laugh:.
Every time I had to do a slightly bigger change I was always cursing on how ****ty the projects (Android as well as iOS) were setup and how outdated they are, how many dependencies there are, how it's almost impossible to move to Android Studio with the current setup and so on...
Now I had enough! I started creating these projects from scratch and will rewrite the whole application, removing a lot of dependencies (to internal projects), giving them a face lift and using new APIs and everything that couldn't be done before.
Our Designer has left and is exploring the world (atm Australia ) so I'll need to do everything (design wise) myself!
I do not have any problems writing Layouts or the code itself, that's gonna be the easy part for me. What's tricky for me is all the design stuff I'll have to do and I really have 0/Zero/Nada/Niente experience in doing that.
How do I create Icons (for all the densities)?
How do I create Backgrounds (for all the densities)?
How do I create Images (for all the densities)?
When should I use 9patch images?
Is there a good tool for creating 9patch images? (I tried to use the online website tool from roman nurik and Better 9Patch and never understood them)
Generally useful tools for designing for Android (or iOS)?
So actually a design noob needs an introduction and kickstart to learn designing for Android & iOS. Is there anyone with some experience who could point me in the right direction?
Look into adobe photoshop / illustrator and use youTube to get tutorials for each of your questions.
Use Sympli, it will do it for you
I've been both a Product Manager and a designer. Inefficiency in getting dev ready designs and organizing them can suck huh?
About a month ago I started using: https://sympli.io/
If you have design files in photoshop or Sketch, you can export them in 1 click and move all the assets to Android Studio where it will organize and scale for you.