I Am Iron Man – Android Phone Theme for Nexus 4

In honor of Iron Man 3 opening this weekend, and because I absolutely LOVE Tony Stark (and all things geeky), I gave my Nexus 4 a bit of a makeover:

This layout was inspired by the actual UI guru, John Koltai. Be sure to visit his website for photos of the UI used in Iron Man 2. I wanted my Android phone to look as accurate as possible next to the movie’s UI. Hence, I created all the widgets and icons myself.

The main difference between my “inspired-by” design, and the IM3 movie version is Tony Stark’s phone is typically shown in landscape format. However, about 95% of my use is in portrait mode and I adapted my design to that purpose. Now… on to the apps I used, the files you’ll need, and a tutorial to re-create this layout.

+ The Apps +

  • Apex Launcher Pro by Android Does. You can substitute Nova Prime for Apex if you prefer.
  • UCCW aka Ultimate Custom Clock Widget by VasuDev.  Hint: This app basically builds graphics, images, and widgets in a very similar way to Photoshop. You can even save a layered design as an image! UCCW = Awesomesauce.
  • Gallery by Google/Android. This is the default photo gallery app that comes packed with Android 1.5 and up. If you need an alternate, QuickPic by alensw would also work.
  • Simple Calendar Widget by MyColorScreen. Free on the Play Store.

+ The Files +
Due to the popularity of this home screen UI (Thank you everyone!), I have uploaded the files I used to create this UI to Dropbox. There are two zips and a jpg: one zip for the icons and dock; the other zip for the UCCW files; the jpg is my wallpaper. All of the UCCW’s can be modded to suit your own hotspots, icons, colors, etc.  The UCCW’s also include the typefaces I used which were: Roboto Light, Roboto Thin, Roboto Condensed Light, and Roboto Condensed Thin.  The Roboto font family can be downloaded on Google’s Android Developer site.

+ The Tutorial +

  • Homescreen settings using Apex Pro: 10×10 grid, portrait only mode. Set the margins, shadows, status bar, icon labels to NO/None. 3 screens. Set to allow widgets to overlap.
  • Apex dock settings: One dock with seven icons. No margins. Set dock background as custom. Icon size/scaling set to 80%.
  • Add/drag 7 applications to dock area of home screen. then long press and choose which icon to apply. For what it’s worth, I used the Iron Man ma
  • Use UCCW to create the rest of the layout.
  • Widget sizes: Top status bar= 4×1 stretched & placed on all 3 screens. Radar UCCW= 3×3. Signal Override Terminal UCCW= 4×2 & stretched.
  • Widget sizes (2): Commandeering System= 4×1 & stretched & overlapped. The 8 “buttons” = 2 UCCW widgets. Each one is 4×1 & stretched to fit.
  • Widget sizes (3): Initializing Access UCC= 4×1 & stretched. Queue UCCW= 4×3 & set to “send to back” (see below).
  • In the Commandeering System UCCW, the “loading bar” is actually UCCW’s battery bar.
  • Use Simple Calendar widget (w/ full background transparency) to place Calendar events over the Queue UCCW.
  • Download/Add at least four Iron Man blueprints/photographs/images to your phone’s internal or sdcard storage system. I found mine via a Google search for “Stark Industry blueprints”.
  • Long-press on your homescreen, add a Photo Gallery widget. Set to “album” & load a few Iron Man photos, blueprints, etc into an album on your phone.
  • Set hotspots within UCCW as you choose!
  • For finishing touches, Zedge has some great Iron Man and Jarvis sound effects for ringtones, notifications, etc.
  • Enjoy!

+ Nifty Bits & Tips +

  • Swipe across the Photo Gallery widget on the homescreen to flip through your blueprints! Just make sure all the photos/blueprints/images you want to appear in your flippable widget are in their own folder on your sd card.
  • The bar of color in the “Commandeering System” widget is alive.  It constantly updates to show the battery level of your phone.
  • There’s handy info hiding in plain sight within the “Signal Override Terminal” widget. The Port number is actually the date; SSID shows the day of the week; Strength tells you the current temperature for your location; and the Status reports your current weather conditions.
  • Instead of using the radar UCCW I included in the zip files – use a live radar app with a widget instead. Why? Because adding movement and interactivity is just frakking cool.

Be sure you have your tickets and… enjoy the movie!
Questions, comments, constructive criticism, please leave me a comment.

Cheers with buttered popcorn,
Jami - author and editor of the Bionic Beauty blog

8 thoughts on “I Am Iron Man – Android Phone Theme for Nexus 4

  1. Reply serortegalopez May 12,2013 2:37 PM

    Wow! Thank to share this theme. It´s really cool!! Please, could do you make it compatible with ios. I would really want it in my ipod touch.

    • Reply Bionic Beauty May 17,2013 6:17 PM

      Hi Sergio, Thank you so much for your comment and compliments, and welcome to Bionic Style! Sadly, something like this screen would not be possible to create on iOS. You could add the wallpaper, but that’s about it. Even with unlocking/jailbreaking an iOS device, you can’t change much of anything except icons & dock. If you are jailbroken and want the icons, they are available here: https://www.dropbox.com/sh/89tfuqneslvxt1p/E9UtwNzl5E and choose the “stark-ui-icons-dock.zip” file which will give you the icons and the glass dock.

      Please feel free to comment back with any questions. I’ll help as much as I can, but iOS is very limited as far as customization/personalization goes.

      Cheers,
      Jami

  2. Reply serortegalopez May 19,2013 8:52 AM

    Thanks so much Jami. Yes, I will try to use the icons and the dock in my jailbreaking device. Do you recommend me some app or cydia tweak to do this?

    Thaks again!!
    Sergio

    • Reply Bionic Beauty May 19,2013 6:08 PM

      Hmmm… I’m actually not sure what would be the best app/tweak to do the replacement for the icons and dock. However, you might find some help from fellow iOS modders on MyColorScreen.com under the iOS section. All my friends & family have non-jailbroken i-devices. 🙁

  3. Reply Glassesphua Apr 10,2016 6:37 AM

    Hi! Can you post a new dropbox file for this ui, there seems to be some problems with downloading this ui. Can you post screenshots on setting up this ui?

    • Reply Bionic Beauty Oct 17,2016 3:46 PM

      I’m SO sorry for the long delay in responding to you. I had some health issues and was offline for several months. I’ll get a mirror download up this weekend. I can also *try* to grab some screenshots… I’m a little busy this time of year since we run our own Halloween yard haunt. But I promise I will get screenshots & the downloads up & running. Just a bit more patience. And thank YOU for visiting my blog.
      Kind regards,
      ~Jami

    • Reply Bionic Beauty Oct 17,2016 3:44 PM

      You are most welcome! Glad to have you stop by. Let me know how your setup went. I’d also love to see a screenshot!
      ~Jami

      P.S. I’m a lady. 🙂 Even on XDA most people assume I’m a guy since there aren’t too many girls that geek out with Android like I do.

Post a Note

Follow

Get every new post delivered to your Inbox

Join other followers: