Android ICS/JB Photoshop GUI Design Kit [Free Download]

Update: Android UI Design Kit PSD has been updated to 4.2!

Back in December 2011, I released the first version of Android ICS GUI Design Kit and since then, it has been downloaded for about 9000+ times. Not a huge amount, but at least I hope it already helped some app designers/developers in making quick app mockup. And since Jelly Bean is released, I have decided to update the design kit with some new Jelly Bean UI elements, and a brand new stuff in it – Application Design Templates (ADT).

Details

Similar to 1.0, the main motivation of doing this is just to provide some stock elements of Android 4.0+ (Ice Cream Sandwich/Jelly Bean) in a single .psd file so app designer can really focus on creating awesome mock up to show their developers/clients. Some of the elements (very minor though) are just single layer of image, but they should be pretty adequate for quick mock up purpose.

In 3.0, I have included two .psd file in the Design Kit – Building Blocks and ADT.

In Building Blocks, it contains most, if not all of the stock ICS/JB UI elements that can be used to build an app mockup in Photoshop. Most of them covered both Holo Light and Holo Dark themes, so you can easily drag and drop the properly grouped UI elements to your app design.

As for the ADT (not to be confused with the Android Development Tools which is a plugin for the Eclipse IDE), it serves as a starting point for the app designers/developers of the app design. You have the choice to select the design template that start with different amount of tabs and holo theme, and the design in Photoshop starts from there.

So what’s inside the new Android ICS/JB Photoshop GUI Design Kit 3.0:

Building Blocks

  • Soft button
  • App Login Screen Example
  • Homescreen (Updated with Jelly Bean Homescreen)
  • Launcher Screen
  • Option Bar (Top and Bottom)
  • Menu
  • Keyboard
  • Notification Center (ICS and Jelly Bean Notification Center)
  • Notification Bar
  • Dialogs (Toast, Popups, Alert, Jelly Bean App Uninstallation Dialog)
  • Quick Control (Lab feature in stock Browser)
  • Settings Page
  • Tab Bars (Multiple types)
  • Switches (Radio Buttons, Checkboxes, On/Off Switches)
  • Activity (Bar, Circle, Progress Bar)
  • Sliders
  • Text Fields
  • Buttons
  • Spinner
  • Grid Lists (Horizontal and Vertical Scrolling Grids)
  • Lists (Single Line, 2-line and 3-line list)

Application Design Templates

  • Scrollable Tabs (Holo Dark/Light, with 2-Line list and To-do list examples)
  • 2 Tabs (Holo Dark/Light, with 2-Line list example)
  • 3 Tabs (Holo Dark/Light, with 2-Line list example)
  • 4 Tabs (Holo Dark/Light, with 2-Line list example)
  • Collapse Tabs (Holo Dark/Light, with 2-Line list example)

This Android ICS GUI Design Kit is best used with Android Design Preview, you can read more here.

Download

Update: Android UI Design Kit PSD has been updated to 4.2!

If you don’t prefer 4.2 for some reason, you can still download version 3.0: Android ICS/JB Photoshop GUI Design Kit 3.0. If you can’t download it from Mediafire, I got it published in my Deviantart page as well.

More Android design resources can be found at Official Android Design Downloads Section. This GUI Design Kit is made using the latest Android Roboto Font, so grab the font and install them as well!

Share this to any awesome Android app designers/developers! Don’t hesitate to leave a comment here if you have anything in mind!