“Does your Android app have a lot of icons used in it? Thought about adding some icons to your app to up the visual appeal factor? Here is a new way in which you can do just that without having to load your app up with a lot of icon files. Displaying the icons you wish is now as simple as displaying a custom font within your app. We painstakingly spend an entire day converting the many dev icons into a set of high res fonts that are scalable to any size you need. Now you don’t have to worry about the hassle of drawables. The best part is that the font files are extremely small, only 11kb each for a total of 22kb! Want to have different colored icons? Now its as simple as changing the color of the font to any color you want. Its that easy!

Of course this concept isn’t ideal for every dev or every app out there, but it is a new and novel way of adding icons to your apps. These font sets are free to use in any way you choose, so have fun! For your convenience, below and included in the download are the font maps for each font file. If you use the fonts in your app, please let us know and share your app with us….so we can in turn share. 

Included in this set are three bonus icons courtesy of Opoloo. They have come up with a great concept for a new save, import and export icon to replace the very outdated standards.”

The game is simple, there are 2 teams fighting over control of portals.  These portals are real world locations and “agents” must visit these locations to hack and attack the portals.  Linking several portals together creates a “field” which contains “Mind Units.”  The number of Mind Units per team is what calculates the score.

Ingress is currently a closed beta game, however you can request an invite on the official website www.ingress.com

Our future is at stake. And you must choose a side.

A mysterious energy has been unearthed by a team of scientists in Europe. The origin and purpose of this force is unknown, but some researchers believe it is influencing the way we think. We must control it or it will control us.

“The Enlightened” seek to embrace the power that this energy may bestow upon us.

“The Resistance” struggle to defend, and protect what’s left of our humanity.

Install Ingress and transform your world.

The World is the Game
Move through the real world using your Android device and the Ingress app to discover and tap sources of this mysterious energy. Acquire objects to aid in your quest, deploy tech to capture territory, and ally with other players to advance the cause of the Enlightened or the Resistance.

Strategy
The struggle is being played out globally. Track the progress of players around the world, plan your next steps, and communicate with others using an Intelligence map.

What is the Niantic Project?
Is this just a game? An Investigation Board (http://www.nianticproject.com) filled with cryptic clues and secret codes awaits. The story evolves everyday. Powerful secrets and game tech are there to be unlocked.

Form Alliances
The struggle to save the planet spans the entire world. Groups of people acting together can be more effective than individuals acting alone. Cooperation across neighbourhoods, cities, and countries will be needed to achieve the ultimate victory.

Watch this video on YouTube.

Ingress NianticLabs@Google Gratis

Flat UI Free contains many basic and complex components which are great for designers to have at hand: buttons, inputs, button groups, selects, checkboxes and radio-buttons, tags, menus, progress bars and sliders, navigation elements and more.

Colored, stylish icons can easily be modified and used in a wide variety of projects, as they contain original layers. Glyphs are also available in psd, html/css and svg formats”

Using Fluid, I have made some apps and applied custom styles to them to remove various elements.  My favourite is Google Music, unfortunately I haven’t managed to get the keyboard media buttons to control it yet (I’m sure there is a way though)
All apps have Launchpad icons and dock icons.

How to make desktop apps from websites

This is actually quite simple.  What you’re going to need to a program called Fluid which you can download from here: http://fluidapp.com/  I’ll show you how to add in Google Music first, and then i’ll post my customisations afterwards.

It’s a free program, however if you want to do some of the customisations I will show you in a bit, then you will need to fork out the bank breaking $4.99

Creating the desktop app

Once you have downloaded the application, simply run it and you should see the following:

In the URL field, you want to put the URL to Google Music which is: https://play.google.com/music/listen

In the Name field, put whatever you want.  However I would suggest putting Google Music as the name.  For the icon, I wouldn’t recommend using the Website Favicon.  They are quite pixellated and don’t represent the actual application.   Instead, I used the largest icon from this pack:

http://carlosjj.deviantart.com/art/Google-JFK-Icons-ICO-and-PNG-270715545

Once you’ve entered the details, hit Create and you’re done.  If you didn’t pay for Fluid then thats the end of the line.  If you paid for the program, read on!

Customising the layout

If you’ve ever used Userstyles before in a browser or have CSS knowledge then this should be a piece of cake.

Open up your newly create Google Music app and then in the toolbar go to ‘Window > Userstyles’

Click the + button in the bottom left corner and name it what you like the the left column.  In the top box on the right hand side titled Patterns, rename this to match the URL.  In this case, it would be *play.google.com/music*

In the box below this, you want to enter your CSS.  We will use the following:

#gb,
#coloredBar
{
display: none !important;
}

Once you’re done, it should look something like:

This basically overrides the CSS that is usually loaded.  In this case it will hide the Google navigation bar and the bar which has the Shop and Upload music on it. Close this window and refresh your application.  (Use CMD + R)

It should now look like the following:

Other Google App Userstyles

These are just some of the Userstyles I use.

GMail

Pattern – *mail.google.com/*

/*==========================================
MOVE SEARCH BAR AND PROFILE BLOCK INTO BLACK BAR
==========================================*/
/* hide google links */
#gbzw,
#gbu,
.T0 pp aj3 {
  display: none !important;
}
 
/* hide logo */
#gbq1 {
  display: none !important;
}
 
/* move profile search blocks to top */
#gbq, #gbu, #gb #gbq, #gb #gbu {
  top: 4px !important;
  z-index: 991 !important;
}
 
/* remove padding above search and profile blocks */
#gbu, #gbq2, #gbq3, #gb #gbu, #gb #gbq2, #gb #gbq3 {
  padding-top: 0 !important;
}
 
/* style links in profile block and mail drop down */
#gbu .gbgt, #gbu .gbgt:active,
#gbg6 #gbi4t, #gbg4 #gbgs4d,
.akh {
  color: #ddd !important;
}
#gbi3 {
  color: #aaa !important;
}
 
/* bg for where search and profile blocks used to be */
#gbx1, #gbx2, #gbqlw {
  height: 0 !important;
}
 
/* header height */
#gb, #gb, #gbx3 {
  height: 35px !important;
}
 
/* tweak z-index of notifications */
.aiw .b8 .vh, .aiw .cc .vh, .aiw .cd .vh, .aiw .w-atd, .aiw .Y4, .aiw .aey {
  z-index: 1001 !important;
}
 
/* tweak positioning of notifications */
.w-asV .b8 .vh, .w-asV .cc .vh, .w-asV .cd .vh {
  top: 10px !important;
}
 
/*==========================================
POSITION THE MAIL DROP DOWN AND LABEL AREA TWEAKS
==========================================*/
.aeN {
  margin-top: -32px !important;
  z-index: 5 !important;
}
 
.asT-asx {
  display: none !important;
}
 
.aki {
  padding-bottom: 9px !important;
  padding-top: 2px !important;
}
 
/* label area */
.aeN .ajl {
  margin-top: 3px !important;
}
 
/* spacing below compose button */
.z0 {
  padding-bottom: 6px !important;
}
 
/*==========================================
BUTTON BAR TWEAKS
==========================================*/
/* reset margin below black bar */
.w-asV {
  margin-bottom: 0 !important;
}
 
/* padding for button bar */
.G-atb, .G-as7-atb, .G-MI {
  margin-top: 0 !important;
  padding-bottom: 8px !important;
  padding-top: 8px !important;
}
 
/* shadow on button bar */
.G-atb {
  -webkit-transition: all .1s ease-in-out !important;
  -moz-transition: all .1s ease-in-out !important;
  -ms-transition: all .1s ease-in-out !important;
  -o-transition: all .1s ease-in-out !important;
  transition: all .1s ease-in-out !important;
}
.aeI .G-atb {
  -moz-box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
  -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.15) !important;
}
 
/*==========================================
GOOGLE BLACK BAR TWEAKS
==========================================*/
/* height of search field and profile btns */
.gbqfqw {
  height: 25px !important;
  line-height: 25px !important;
}
.gbt {
  line-height: 25px !important;
}
#gbi1a {
  height: 25px !important;
}
.gbqfb, .gbqfba, .gbqfbb {
  height: 27px !important;
}
.gbqfi {
  margin: 6px 19px !important;
}
#gbg4 #gbgs4, #gbg4 #gbi4i, #gbg4 #gbi4id, #gbg4 #gbi4ip {
  height: 25px !important;
  width: 25px !important;
}
 
/* search field tweaks */
.gbqfqw {
  background: #eee !important;
}
.gbqfqw-hvr {
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2) !important;
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2) !important;
}
.gbqfqw:active, .gbqfqwf {
  background: #fff !important;
}

Google Calendar

Pattern = *google.com/calendar/*

#gb,
.menu-bar-container,
#footer,
#footer-tab-edge
 {
  display: none !important;
}

Google Play Store

Pattern = *play.google.com/store/*

#gb,
.menu-bar-container,
#footer,
#footer-tab-edge
 {
  display: none !important;
}

Gridrop is a try to provide all the system assets easily. Actually our app can add UI and Share it as JPG’s all UI elements are from the guidelines. Next Goal, more UI items and… PSD’s

So my XO Skin and my Gelaskin came for my Nexus 4.  Not bad timing considering my Nexus 4 arrived a few days ago

The XO Skin

I had an XO Skin Screen Protector for my Galaxy Nexus and it was brilliant.   They might be more expensive that conventional screen protectors, however  I only needed the one.  It was self healing and never made the screen look scratched, and to this day after dropping the phone onto metal, tiles, pebbles it has held up without a mark on it.  My only gripe was it gave a slightly orange peel effect, however I put this down to my first time applying one.

Roll on to the Nexus 4 and I bought one without hesitation and applied it.  This time it is perfect.  There are no bubbles, no dust under it, no marks on it and no orange peel.  I’ve had people ask me why I haven’t got a screen protector on it, its THAT good.  Would highly recommend this.
http://xoskins.com/cell-phone-skin-protectors/google-skin-protectors/google-nexus-4-screen-protector

My Gelaskin

This was a custom made skin using a wallpaper shared on Google+.  If you want to make it yourself then you can find all the files needed here: https://plus.google.com/u/0/104495455427631084370/posts/4PtUbict6ew

I had a Gelaskin back when I had my iPod Touch 2g.  I kept that iPod for 3 years and had a Gelaskin on the whole time.  After 3 years it was a bit scratched as you would expect and I was going to sell it, so I removed the Gelaskin.  All I can say is Wow.  If you remember, the iPod Touch had a polished mirror back.  3 years on after using a Gelaskin, it still had that polished back.  It looked like it was new.

Bought one without hesitation for my Nexus 4, I’m not a fan of the glittery back either so this was a win win situation.  My only concern is, if I drop this device, I doubt the Gelaskin will do much for protection.  Maybe it will keep the glass held together if it smashes, however I won’t know if it has smashed until I remove it…perhaps thats a good thing.
If you want one yourself, you can get the files I posted above and make one on www.gelaskins.com

I am in no way affiliated with either company, this is my own personal opinion

Nexus 4 device photos (PSD)
Well, short of 3D renders, Roman Nurik convinced Google’s [awesome] Android marketing team to let me share some Nexus 4 device photos. He also added Photoshop Smart Objects to make it easy to swap in screenshots as needed, without having to re-transform flat screenshots for each angle. A quick preview of these PSDs is attached to this post.

Download the PSDs here: http://j.mp/nexus4renders

And of course, if you don’t want to muck around with Photoshop and just need a facing-forward framed screenshot, you can always use the official Device Art Generator here: http://j.mp/deviceartgenerator.

Enjoy!