[Android 4.0] Ice Cream Sandwich GUI Design Kits in PSD

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!


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!


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
What’s new in 1.1:
  • Pop Up Menu
  • Dialog
  • Quick Control (Lab feature in stock Browser)
  • Settings Page
  • Tab Bar
What’s new in 2.0 (Holo Dark and Holo Light for most of them):
  • Tabs bar
  • Dialogs
  • Switches
  • Activity
  • Sliders
  • Text Fields
  • Buttons
  • Spinner
  • Grid Lists
  • Lists
What’s new in 2.1:
  • 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.


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!


39 thoughts on “[Android 4.0] Ice Cream Sandwich GUI Design Kits in PSD”

  1. 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.


    1. 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!


    1. 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.


  2. @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.

  3. 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.


    1. 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!


    1. 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. 🙂


  4. 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

  5. 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)

      1. 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!

    1. 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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s