15AUG2012: Android ICS/JB Photoshop GUI Design Kit is updated to 3.0 and released at AndroidUIUX!
29FEB2012: Android Team have officially provided the Android Design Stencils in Adobe Photoshop format! Awesome!
26FEB2012: Android ICS GUI Design Kits updated to 2.0.1!
19JAN2012: Android ICS GUI Design Kits updated to 2.0!
Update
1.1: Added more stock ICS GUI elements. Refer below for details.
2.0: Based on the official Android Design by Android Team, most of the ICS GUI stock elements have been added. Below image shows a summary of the content.
2.0.1: Added the Back Arrow for the top action bar. Thanks Andy!
Details
I have been designing mock up of Android app in Adobe Photoshop and I find that a GUI Design Kit is extremely important, and I thought there isn’t any good (and simple) one in the wild, so I have decided to make this Android ICS GUI Design Kit for two different resolutions and dpi:
- 720×1280 320dpi – Samsung Galaxy Nexus
- 480×800 240 dpi – Samsung Nexus S, Samsung Galaxy S II
The main idea of this GUI Design Kit is not making everything scalable to the unfortunate fragmentation occurs in Android, but just provide some stock elements of Android 4.0 (Ice Cream Sandwich) in one .psd file so app designer can really focus on creating awesome mock up to show developers/clients. Some of the elements are just single layer of image from ICS, but I thought they are pretty adequate for mock up purpose.
So what’s in it (1.0):
- Soft button (Only 720×1280 version)
- App Login Screen Example (Life 1.0)
- Homescreen
- Launcher Screen
- Option Bar (Top and Bottom)
- Menu (Grey and White)
- Keyboard
- Notification Center
- Notification Bar
- Pop Up Menu
- Dialog
- Quick Control (Lab feature in stock Browser)
- Settings Page
- Tab Bar
- Tabs bar
- Dialogs
- Switches
- Activity
- Sliders
- Text Fields
- Buttons
- Spinner
- Grid Lists
- Lists
- Back Arrow in Top Action Bar
As mentioned, do expect some of them are just a single layer of image, but they are fixed at correct position so it can make app designer life easier. I will update this Android GUI Design Kits for more stock elements (or non-stock in the future) over time. Don’t hesitate to comment if you have any suggestion/found any problem with the GUI Design Kit.
This Android ICS GUI Design Kit is best used with Android Design Preview, you can read more here.
Download
Head to AndroidUIUX for the new updated Android ICS/JB Photoshop GUI Design Kit 3.0!
Need more? Go grab the official Android Design Stencils from Android Team! It’s really great to know that they are serious about the design now.
Note: This GUI Design Kit is made using the latest Android Roboto Font, so grab the font and install them as well!
Techie Talkz 
Thanks so much for the PSD. This is rather helpful.
Hi drunkengrass,
You’re welcome! Feel free to comment if you think the Design Kit can be improved in any way!
Rgds,
Taylor
Hey Taylor,
Thanks for this. Any idea what Android devices to design for in the US market? Don’t want to design for 10s of devices, rather for the most relevant ones.
Cheers,
G
Hi,
You’re welcome. Looking at the statistic provided by Google, you would probably know which device to design. I would mainly go for hdpi in normal screen size, but watch out for xhdpi, they are coming since the release of Galaxy Nexus has started to build the standard.
http://developer.android.com/resources/dashboard/screens.html
Good luck! 🙂
Rgds,
Taylor
Very Nice. can you include simple UI Elements like Buttons, Option Buttons, Checkboxes, Sliders etc…
Hi,
Sure, I am currently updating the design kit to have those UI elements. Probably will take some times (2-3days) to make a 2.0. Stay tuned!
Rgds,
Taylor
This new version 2.0 is really nice.
Good job! 😉
I hope that Android developers will now take care about the new ICS design…
Hi there,
Thanks! I am really glad to hear that. 🙂
Exactly, I really hope Android developers now focus more on UI/UX design rather than coming out with crap apps. Let see how it goes.
Rgds,
Taylor
Hi! Thank you for your great work! But can you mirror this zip to a couple of another file-services — MediaFire seems to be very slow today, I think many users will appreciate this:)
Hi there,
You can try to download the same file from my deviantart page:
http://ghost301.deviantart.com/art/Android-4-0-ICS-GUI-Design-Kits-in-PSD-275985871
Let me know if you still failed to get hold of the file, I will personally email it to you. 🙂
Rgds,
Taylor
@ghost301
You did wonderful job! Looking great.
As i am new bay to Android App. development, how can i design GUI elements in Photoshop and apply this in my application user interface like for EditText, button, check box controls.
Hi,
I don’t think I completely follow your question, do you mean how to design in Photoshop or for the real development?
Rgds,
Taylor
dude that is just awesome. many thanks.
Hi there,
You’re welcome! Hope you find it useful for you. 🙂
Rgds,
Taylor
Thank you so much! This package is truly awesome.
Hi David,
You’re welcome! Hope you enjoy it!
Rgds,
Taylor
An Android developer, but a complete newb in photohop. After opening this template .psd and creating a new document of correct size how do I copy say the 3 Line list layer from your template to the new .psd document ?
Apologies for such a simple question. When I’ve got my head around using this I’m sure it will be so useful.
Thanks
Martin.
Hi Martin,
If you look into the folder structure that I have made in the file, you can easily just drag the whole 3-line list layer and drop to the new .psd file, then you can start work on it!
Rgds,
Taylor
You are the Man, thanks for saving the day 😀
Thanks so much. Great effort!
Great work! The only thing I am missing is the back arrow next to app logo…
Hi Andy,
Thanks for reminding that! I don’t really realize it until you mention it to me, so thanks! I will release 2.0.1 to add the back arrow. 🙂
Rgds,
Taylor
thank you thank you thank you x million
from a very busy UX designer 😀 😀
Hello..
i have a question if you can reply to it real soon i will really appreciate it.
I have designed android application in 72 ppi and now i want to convert it to the ppi/dpi specifications provided by google can you please help and i want to make it real quick…
also can you give me all the exact screen resolutions through which i can support maximum screen sizes.
Thanks in advance
Hi,
For maximum resolution support, please refer to ‘Supporting Multiple Screens’ guide by Android Team. To be safe, you must provide ldpi, mdpi, hdpi, and xhdpi to ensure your app run as designed in the Android devices.
http://developer.android.com/guide/practices/screens_support.html
Hope this helps.
Rgds,
Taylor
The information provided will help a lot. Thank you very much.
Thanks Taylor, it’s looking great!!
Hi there,
You’re welcome! Hope you find it useful! 🙂
Rgds,
Taylor
Thanks for your sharing, This psd file is cool.
Hi,
You’re welcome! Hope you find it useful 🙂
Rgds,
Taylor
Hi Taylor,
Awesome resource, thanks a lot, just wondering if it should work in Gimp? I’m trying to use it, but none of the layers seem editable, I can toggle the visibility and rename the layers, but I can’t edit things like the actual text. (I have a feeling i’m going to need to get photoshop)
Thanks,
Luke
Hey Luke,
Yeah, unfortunately the editable text layers only works in Adobe Photoshop.
Rgds,
Taylor
Thanks for the quick reply! just downloaded the trial of photoshop, the template works a lot nicer all round than in gimp. Now which app to redesign first!
Thank dear,
Your work is realy awesome.. its helps me alot. thx again
Hi Taylor,
I need psd file ADT.psd 480×800 px can you update again this link ? . Or send link download on email to me bkacfan@gmail.com ?.
Hi,
There is no ADT made for Nexus S resolution. Sorry about that. Try design in Galaxy Nexus or Nexus 4? The size shouldn’t have too much difference.
Taylor Ling