Android UI Design Kit for Photoshop and GIMP 4.3 [Free Download]

Android UI Design Kit 4.3

Today I am happy to announce that Android UI Design Kit has been updated to 4.3, and this is my most complete design kit for Android Designers/Developers to date. And awesome thing always comes in pairs:

  • Supports Adobe Photoshop and GIMP
  • Nexus 4 and Nexus 7 (Basic) Design Kits
  • Both Nexus 4 and Nexus 7 have Portrait and Landscape Templates

Other than that, there are also two new files in the Design Kit: An Android Holo Color Collection swatch (complete with all different levels), and a document containing link to some libraries for development. One of the reason to include such document is to introduce the Android UI Design Kit users about some nifty libraries that the developers can use to achieve the design in the mock up — which hopefully can easily synchronize the design idea between the designer and the developer.

What’s new in 4.3?

  • Building Blocks (Nexus 4 version only)
    • Settings Page
    • Font Size Reference to Developer
    • Empty State Examples
    • Showcase View (Works only on Photoshop version)
    • Random Text List Styling
    • New Date, Time, Color Pickers
    • About Page
    • Cards Library
    • New Stacked Tabs (Similar to Google Play)
    • Glass Action Bar (Photoshop only)
    • Contextual Action Bar
    • Search Action Bar
    • Wizard Pager
  • Files
    • Photoshop PSD (or XCF for GIMP) of Nexus 4 Quick Start (Landscape and Portrait)
    • Photoshop PSD (or XCF for GIMP) of Nexus 4 Building Blocks
    • Photoshop PSD (or XCF for GIMP) of Nexus 7 Quick Start (Landscape and Portrait)
    • Photoshop PSD (or XCF for GIMP) of Gestures
    • PDF of Link to Libraries
    • Holo Color Swatch (Photoshop only)


  • You must first install both Roboto and Roboto Slab fonts before using the Design Kit.
  • The recommended way to start designing is to use the Quick Start file, then Shift+Drag the required UI elements from the Building Block file
  • Since both Nexus 4 and Nexus 7 template are now in xhdpi, some of the UI elements can be easily reuse with minor adjustment
  • You can only create awesome mock up from this Android UI Design Kit


Initially I was very tempted to charge for this new update since it does taken up part of my free time, however, I changed my mind eventually — I wanted this to be used by everyone that is designing Android app using Adobe Photoshop (and now GIMP), either professionally or as a hobby – so charging a price might be able to grab me a cup of coffee or two, but I am more obsessed with the download number (can you believe that?) and the social connections I made from providing this download. So it will be remain as a Free Download.

However, if you think I deserve to have a cup of coffee from the work that I have done, you can always support me via Paypal, so that I can maintain the energy to produce awesome stuffs for the community.

Support via Paypal


As usual, I have made this new Design Kit available at my MediaFire account. File size is larger this time around, but I can’t seems to compress all the awesomeness to a smaller archive size.

Android UI Design Kit for Photoshop 4.3 (~30MB)

Android UI Design Kit for GIMP 4.3 (~20MB)

There is also an updated Android UI Design Kit for Photoshop 4.4 at Nexus 5 resolution (1080×1920), so if you prefer to design in a larger size with latest UI elements, grab that as well!

Android UI Design Kit for Photoshop 4.4

How I would further improve Yahoo! Weather App

Yahoo! Weather app just got updated and I must say it is a very nice and well done app, visually. However, if you really care about your Android users, you would have iron out some fundamental design issue (menu button of shame, anyone?) before publishing it – I would not go into more details about all the design issues, Juhani’s article has already highlighted all the design issues we saw as an Android Designer, and even offers fixes for them.

So in this rather short post, I would like to share how I would further improve Yahoo! Weather app with better Android UX:

  • Use Fading Action Bar
  • Use Official Navigation Drawer
  • Place Refresh button on the Action Bar (Refresh is far more important action than Add Location. Pull-to-Refresh? Very bad discoverability)
  • Visual cue for pages (You can see that below the fading action bar – it indicates that there are 2 locations/pages)
  • Removed the Menu Button of Shame
  • Notification Bar always shown
  • Settings, Rating etc – All placed in Overflow Menu
  • Locations come first in Navigation Drawer (It’s a weather app, who want to sign in to use it?)
  • Highlight the current selected location
  • Removed all advertisement about other Yahoo! app (Is it really needed? I don’t believe I have ever see the advertisement about Google Keep app in Gmail app.)

Yahoo! Weather Main

Yahoo! Weather Nav Drawer


What do you think? Better UX or simply nitpicking?

Result for Android UI/UX (Re)Design Challenge

Early this month I have organized a design challenge which welcomed anyone that are interested in design/redesign an Android app to participate, and I am really thrilled by the huge responses from the community! There are in total 25 qualified entries which is really challenging for the judges to pick the best 5 entries that deserve the 10$ Google Play Store Gift Card. Speaking about judges, these awesome people formed the judgment team: Asher SimondsGuenther BeyerLucas Rocha, Juhani Lehtimäki, and Walmyr Carvalho. Huge thanks to these guys for helping me out voluntarily! And yes, I am not part of the judgment team for maximum fairness in the result.


And the final result are as below. Congratulations to these people! In the upcoming weeks, I will publish posts for these 5 entries to discuss about the comments from the judges, and my point of view about them.



As promised, the best 5 entries above will win away a 10$ Google Play Store Gift Card. For all other entries that are not in the chosen 5, you guys rock too! This is why I have decided to give away 10 pieces of Android UI Design Kit Logo sticker (measured at approximately 4.5cm x 5.5cm) to all other participants to show my appreciation for your entries. Isn’t that awesome?

Android UI/UX Brand

So everyone that participated in this (Re)design Challenge, please do the following to claim your prize:

  1. Send an email to androiduiux [at] with the title Android UI/UX (Re)design Challenge Prize Claim
  2. In the email content, please include your full name, your entry title, full international mailing address and full phone number (with international codes)

That’s all! I will send out the prizes as soon as I can. Again, thank you very much for your entries and I hope to see more awesome design/redesign from you in the community! Till next time!

Android UI/UX (Re)Design Challenge

Android Design Challenge

Taking cue from Android Design in Action Challenge happened last year, I just feel like making another similar Design Challenge for everyone, hence this Android UI/UX (Re)Design Challenge. The aim is to create more awareness towards the importance of Android Design, and a (hopefully) rewarding experience for those who try their hand at Android Design.

Really simple rules

  1. Anyone can participate!
  2. Design a brand new app or redesign an existing app (any app) before 16th June 2013 (I like to see high quality works thus the longer design period)
  3. The (re)design should use Android Design Guideline as a reference. The use of new UI elements like Navigation Drawer and Fading Action Bar are encouraged only if they fit into the app design.
  4. At least five screens are required (in order to tell an app flow/structure). It will be awesome if explanation/justification is provided for each screen. One good example on how you can document your (re)design is the m-Indicator redesign by Swapnil360.
  5. Optional: Feel free to post your design to any G+ Android Design Community (including Android Designers) to get feedback and further improve your app (re)design before your final entry. It’s always encouraging to see such design iterations which involved communities.
  6. Post your design entry in G+ publicly, and remember to use these hashtags:

#androiduiux #androiddesign #ADiA

Design Tools

  1. Feel free to use any design tools that you are comfortable with, as long as the final result are high-fidelity mock up screens.
  2. If you are looking for some design resources to start, check out the Free Design Resources page.

Winner announcement

  1. Five best entries will be announced via my G+ account and within a week after the deadline (before 23rd of June).
  2. All entries will be judged by professional android designers in order to pick the winners.
  3. I will make some posts in my blog for all best entries (and probably some interesting entries) after the design challenge.


  1. Five 10$ Play Store Gift Cards for five best entries only (from my own pocket!)
  2. I reserved the right in prize management based on the quality of the entries.

That’s all! If you are interested, start (re)designing and submit your design entry before 16th June 2013! Waiting for your awesome entry!

Android UI Design Kit for Photoshop 4.2.1 [Free Download]

Nexus 4 Tilted Left

Since there are some new UI elements in Android after Google I/O, I have decided to spend some time to update (and optimize) the Android UI Design Kit. There are some new UI elements added into it (and I removed some most-likely-unused UI elements). Besides that, I have also added some Quick Start PSD file that contains some main UI elements like Action Bar, Tabs, and Navigation Drawer, so the user able to choose not to start the design with the PSD file with all Building Blocks. And yeah, it finally come with Landscape orientation as well!

What’s inside for 4.2.1

  • UI Elements
    • Added new Navigation Drawer
    • Added Fading Action Bar
    • Added Numpad-style Time Picker
    • Removed Grid Lists
    • Removed Disabled/Focused/Disabled Focused Radio Button and Checkbox
    • Removed Quick Control
    • Removed some unnecessary Tabs elements
    • Removed Gestures
  • PSD Files
    • Gestures
    • Quick Start – Portrait
    • Quick Start – Landscape (Yes, finally!)
    • Portrait with all building blocks
  • Misc
    • Loading speed should be improved slightly after removed some unused UI elements
    • New Login Page with Romain Guy’s awesome photo
    • New Android UI Design Kit Logo
    • Changed time😉


Android UI Design Kit 4.3 for Photoshop and GIMP is here!

Android UI Design Kit for Google Slides 1.0 [Free Template]

Google Slides UI Design Kit 1.0

After I published Android UI Design Kit for Microsoft Powerpoint last month, I have gotten some really nice feedback about the usefulness of the design kit in a tool that they are easily familiar with, and some of them show interest in a Google Slides version. I had a look into Google Slides back then, and I was decided not to do a Slides version due to the lack of Roboto font available in Google Slides (perhaps I missed it back then, but I didn’t see any other extra fonts).

After the Google I/O, I discovered that it is possible to use Roboto font (only Regular and Condensed, but they are already sufficient for mock up purpose) in Google Slides, therefore I went ahead and try to convert my PPTX Design Kit to Google Slides, thinking that it will be just a 10 minutes work – turn out it wasn’t that trivial.

Apart from missing UI elements and text misalignment which can be easily fixed, the main issue is about the output. When I export a mock up screen from Google Slides to PNG format, it always seems to be slightly off from the ideal resolution (768×1280), and in Google Slides, there is no option for the user to change the slide size. So I ended up spending the whole morning doing micro-adjustment on the slide size in Microsoft Office, then upload to Google Drive and convert it to Slides, in order to find the best fit size that can export the screen at perfect resolution.

What’s inside?

Similar to the Powerpoint version, most of the building blocks (Action Bar, Buttons, Radio Buttons, Progress Bar etc.) are inside this Design Kit, including the new Navigation Drawer indicator. This Design Kit is highly optimized for Google Slides in order to have a proper output of image resolution. It has been tested with offline mode, so you can work on some app design mock ups whenever you want!


I have uploaded it to Google Docs Template so you can immediately use the template in Google Slides (Please access the template on desktop browser, or if you are on mobile, request a desktop site. Apparently Google Docs Template page doesn’t work with Mobile Browser Agent): Android UI Design Kit for Google Slides. Don’t forget to rate and share it if you find it useful!

Alternative link without Sign In: Android UI Design Kit for Google Slides Preview

Android UI Design Kit PPTX 1.0 [Free Download]

Last month I published Android UI Design Kit PSD 4.2 that can be used as a base for Android Designers/Developers to design Android app in Photoshop, and since then it has been accumulated a total of 8,100+ downloads within a month. It shows that there are more and more people interested in Android Design, which is something that I am really excited to see.

Nexus 4

Nevertheless, for quite some time, I have been thinking to have an alternative to allow even more people to experience Android Design, and today, I am happy to announce an Android UI Design Kit in Powerpoint format has been released, which is created using Microsoft Powerpoint 2013 (Windows).

Why Microsoft Powerpoint?

Microsoft Powerpoint, of course, doesn’t meant to be an UI design tool, but surprisingly there are many people using it to create nice UI mock up (and they can be interactive too), due to the fact that it supports layering and grouping, plus it has vector shapes, which are sufficient to create some nice mock up. Obviously, it is still pretty limited comparing to Adobe Photoshop (or any other advanced design applications), but heck, I am pretty sure there are more people owning Microsoft Powerpoint compared to Adobe Photoshop, so designing Android app is probably just a click away.

I understand that the Apple Keynote seems to be a better tool for such UI design task, but due to the fact that I am using Windows primarily, so I created the design kit in Microsoft Powerpoint.


What’s inside?

Most of the building blocks (Action Bar, Buttons, Radio Buttons, Progress Bar etc.) should have been included in this PPTX Design Kit. Do let me know if you notice otherwise.

I have also included a slide of Google Now made (almost) entirely with Microsoft Powerpoint to show some awesome things that can be done without needing any advanced tools.

How to use it?

Really simple. Just extract the downloaded archive, then open the .pptx file, and you can start designing right away. It might take some time to see how’s the layering and grouping works, but they should be pretty simple to learn.  Don’t hesitate to leave a comment if you need some help in achieving some elements that you saw in the design template.

Remember to install the Roboto Font before using this design template. Almost all of the texts in the design template used fonts in Roboto Family.

This PPTX Design Kit is made with the specific dimension at 96dpi, when you export the screens to a .png file, it will be exported at the resolution of 768×1280 – the resolution of Nexus 4 screen. You can then frame the exported png file at the Device Art Generator and you are ready to impress people with your design!

Note: It is meant to be used with Windows version of Microsoft Powerpoint. Nevertheless, it is usable on Powerpoint for Mac, although the font type used have to be replaced with the proper one (due to the different font naming system). It can also be used in Apple Keynote, however, you need to change the slide size to 768×1280 manually before the design and export the screen.


As always, it can be downloaded from my MediaFire account: Android UI Design Kit PPTX 1.0. If you need some Action Bar icons during the design, download Action Bar Icon Pack #1, the xhdpi icon fits perfectly with this Design Kit.

Now (almost) anyone can experience Android Design. Happy Android Designing!