In August 2012, Android ICS/JB Photoshop GUI Design Kit 3.0 was published with some new Jelly Bean UI elements, and until today, the Design Kit has been downloaded over 21,000 times since the very first version back in December 2011 – not a huge number, but it is putting a smile on my face. It’s really nice to see there are many designers interested in Android Design and used the Design Kit to kick-start their design work in Android app. A big thank you to everyone that is using the design kit and I really hope it helps in your Android app design workflow in some way.
And today, I have finally updated the Android UI Design Kit PSD to version 4.2, with the size of Nexus 4 screen resolution (768×1280), as requested by many supporters. Besides the resolution update, I have also added a few new UI elements into the Design Kit:
- Cards (Google Now)
- Drawer Menu
- Quick Return
- Undo Bar
Other than that, all the UI elements in the Design Kit are now made pixel-perfect (I hope I didn’t miss any of them), along with some corrections on the font size and UI element. I have removed the Application Design Templates (ADT) PSD file that is included in 3.0 because I think it might not as useful as I think, but do let me know if you are using it and you wish to see an update for that as well.
39 thoughts on “Android UI Design Kit PSD 4.2 [Free Download]”
Many thanks for your great work. Thanks. Andre Cruz
Cheers! Lovely work!
Great work 🙂
It would be great if you could export the resources also in SVG format. Some of us don’t own a copy of Photoshop..
Second the SVG request!
I dont own photoshop and inkscape is better at this sort of things anyway
Awesome man! As always, you deliver!
Hey bro! lot of love to you 😉 great things you do for community! appreciated!
Thanks for the mention!
Thanks a lot for your UI DESIGN KIT!!!
Where I can download your ICS/JB UI Design Kit for 480×800 240 dpi – Samsung Nexus S, Samsung Galaxy S II ?
Never know there is still demand for the 480×800 version.
Here you go!
Thank you very much!!!
hdpi – 50% for today (http://developer.android.com/about/dashboards/index.html)
The license says to give you credit if we use the toolkit. How should we do that? Is a tweet enough? We don’t really have an “about” screen or something similar in our app.
Thanks for using the UI Toolkit! Basically anything will do, so a tweet is definitely fine 🙂
Thank you for making this resource Taylor!!
Nice job! This is the best kit, thanks for sharing.
isn’t there anyone to tell me about how to layout design for new devices like a ‘galaxy s4′(1080*1920) and ‘lg optimus g pro'(1080*1920). i have just design as a same size and same layout in 768*1280. is it right?
Ideally you should design in the native resolution of 1080×1920, but if you are using my design kit, the closest aspect ratio should be the one of Galaxy Nexus (720×1280), both of them have a aspect ratio of 16:9. Nexus 4 resolution is at 5:3.
Many thanks for this with so much love made design.
Sorry for my stupid questions but I want to learn how we use this kit in eclipse or how we convert this kit to xml layout?
It’s almost impossible to convert this kit to xml. This is just meant for mock up purpose, so no code development involved.
Ok. Thanks for your reply.
Hello Dude – I have a question about your Kit. If I must do an interface directly for resolution S4 Samsung. If i resize in Photoshop your file in 1080 of larger, is it good?
It isn’t that direct. N4 screen aspect ratio is different from S4, so directly resize the Design Kit in locked aspect ratio won’t allow you to achieve the 1080p resolution. The closest is to use the Galaxy Nexus version and up the size to 1080p, but then again those UI elements might not be in the proper scale.
Best if you can make one yourself with native resolution and those UI elements.
hello taylor. im really a new at this. how can i use this on my mac ? thank you. joana
To open this file, you have to install Adobe Photoshop for Mac, and there you can start designing Android app 🙂
thank for sharing 😀
Cheers! Lovely work!
Nice work. I downloaded the psd and opened it in Gimp it opened. But I am unable to move ahead. Can it be used in Gimp? If yes, how to go about designing the wireframe?
What do you mean by ‘unable to move ahead’? While this file is not optimized for GIMP, the layers should work correctly somehow.
Thank you so much for the freebie. Really helps.
Good to know 🙂
I cant seem to find the download link
You can download the latest version below:
I really appreciate your work, i donated just 5 bucks, didn’t have more money, consider them like a hundred (contextualizing)
Thanks a lot.
Your work is awesome, I also support you with a small donation, but I think it would be nice to at least fallback on a thank you page after the donation, just a thought!
Thanks! That’s a good idea, thanks! 🙂