Level Up - Android: How to Flash (Upgrade) Nexus 4 to Android Lollipop 5.0 (Easy)

If you have a Nexus 4, then you can have Android Lollipop now! Google recently released the factory image, and I'm now successfully running it (with root, which will be explained in a later post).

Nexus 4 running Android Lollipop 5.0

This will be a short walk-through because I assume you already have the tools needed, but just need the steps to get the flash done. If you have any questions, then please write a comment and I will update as necessary.

1. Download Android Lollipop 5.0 factory image: https://developers.google.com/android/nexus/images#occam
2. Uncompress the file, possibly twice. I used 7-zip. You should see six files there, including a zip, which you do not have to unzip.
3. Make sure `adb` is in your PATH environment variable, which can be found in %android-sdk%/platform-tools/. Also, you will need `fastboot.exe` from that same folder in your PATH. (I assume you already have the Android SDK and you know what I mean by "Advanced system settings"->Environment Variables->PATH.)
4. Connect your Nexus 4 device to computer, then run `adb reboot-bootloader` in your computer's terminal. This will bring your device to the "fastboot" mode.
5. At the very bottom-left, you should be able to see whether your bootloader is locked or unlocked. It must be unlocked to flash a new system image. If unlocked, you're good, go to the next step. If locked, then run `fastboot oem unlock`. WARNING: Unlocking will erase all data.
6. Open your computer's terminal to where you downloaded and uncompressed the files, and run `flash-all`. That command will run the "flash-all.bat" script which will setup the new system image for you!

Congrats! When the script is done, it will reboot your device and Lollipop will be running. It may take a bit for it to boot the first time.

More info: There sure is a lot more information you could read about this entire process, but that's not what this post is for. These are the minimal instructions (with appropriate warning) for most people wanting to do this. If anybody has some good resources to share, then please add them to the comments.

Now, are you ready to root your Nexus 4?

:)
~ Danial Goodwin ~

---

My Android Apps | My Windows Phone Apps | My Developer Blog

Level Up - Paint.NET & Android: How to create new color palettes for Android Holo and Material design

If you work in Android and Paint.NET, here's some quick tips and resources to make both easier to work with. When designing graphics in Paint.NET, it would be really useful to have direct access to all of the Android design guide colors. So, here's how to save and load different color palettes in Paint.NET:

Level Up - Windows 8: How to Copy/Move Files From Many Subfolders To Just One Folder

Long Title: How to Transfer Files From Many Subfolders To Just One Folder and Rename Them All Easily and Quickly.

Example: I had about 100 images that were all neatly organized into 100 different subfolders. I wanted to put them in just five different subfolder as painless as possible. Manually moving each image one-by-one was not ideal, so here's what I did, using the Windows Command Prompt and a Batch file:

1. Create a BAT file.
2. Add the following code:
FOR /L %%i IN (0,1,19) DO (
copy %cd%\ic_launcher(%%i)\res\drawable-mdpi\ic_launcher.png %cd%\_mdpi\data_cycle_%%i.png
copy %cd%\ic_launcher(%%i)\res\drawable-hdpi\ic_launcher.png %cd%\_hdpi\data_cycle_%%i.png
copy %cd%\ic_launcher(%%i)\res\drawable-xhdpi\ic_launcher.png %cd%\_xhdpi\data_cycle_%%i.png
copy %cd%\ic_launcher(%%i)\res\drawable-xxhdpi\ic_launcher.png %cd%\_xxhdpi\data_cycle_%%i.png
copy %cd%\ic_launcher(%%i)\res\drawable-xxxhdpi\ic_launcher.png %cd%\_xxxhdpi\data_cycle_%%i.png
)
3. Run the BAT by double-clicking the file (or right-click->Open) (or run via command prompt).

Note:
- The parenthesis after "DO" must go on the same line. Putting it on the next line will cause the file to not work properly.
- If you want to move files rather than copy, then change "copy" to "move".
- If you want to keep the same file names, then you don't have to specify the file name on the second parameter.

Now in a simpler English, what this batch file does:
- There are five "copy" commands with a source and destination.
- These commands are each ran 20 times because of the "FOR" command.
- The "FOR" line says do the following commands within the parentheses 20 times. The first time will have the variable "%%i" equal to 0. The second run will have "%%i" equal to 1. The variable will keep incrementing until "%%i" is equal to 19. This behavior is defined at "%%i IN (0,1,19)", where 0 is the starting number, 19 is the ending number, and 1 is the increment number (which could also be negative).


For more information about for-loops, then type "for /?" into the command prompt.


Here's some more commands that you can try: Windows Command Prompt Cheat Sheet
~ Danial Goodwin ~

---

My Android Apps | My Windows Phone Apps | My Developer Blog

Level Up - Paint.NET: How To Create Sprite Sheet From Layers In Paint.NET

Need an easy way to create sprite sheets in Paint.NET? Don't want to create a new file for every image of your animation? Want to experiment with cool new plugins to make your graphic design skills better?

All you need is one plugin combine all your layers into an evenly-spaced sprite sheet.

Difficulty: Easy
Estimated time of completion: Less than five minutes.

Step 1: Download this plugin for Paint.NET: Spritesheet Export Plugin

Step 2: Make sure that Paint.NET isn't running, then copy the "SpriteSheet.dll" file into your Paint.NET installation folder, i.e. Program Files/Paint.NET/FileTypes/ subfolder.

Step 3: Now, when you open Paint.NET, you should have the extra ability to save as SpriteSheet (*.ss.png)

And, if you would like to do the opposite - Spritesheet to images, then check out Sprite Animation Helper Plugin

~ Danial Goodwin ~

---

My Android Apps | My Windows Phone Apps | My Developer Blog

Why Would I Want To Scale Up Images And Keep Them Pixelated?

A few days ago I wrote a blog post on how to scale up images and keep them pixelated using Paint.NET. Today, I expand on that a little further, using more images to showcase differences.

First, here are some reasons to keep images pixelated as you resize them:
1. Creating a pixelated/retro game and you would like to scale up one of the images to be an icon that accurately represents the game.
2. Prototyping or creating a MVP.
3. Better compression and/or smaller file sizes. This in turn creates a slightly smaller file for users to download an app/game.
4. Not enough time (or skill) to create a full-fidelity/smooth image. So, you determine that a pixelated and crisp icon looks much better than a large blurry icon. (Screenshots for comparison below)

Initial image. 34x24 pixels.

A "regular" scale up resizing causes image to be blurry. 1000 x 1000 pixels with some margin.

This is how the stretched image looks if I didn't first add the margin for the gem to "grow" into. 1000 x 1000 px.

Using "nearest neighbor" scaling. 1000 x 1000 px.

Now, let's randomly compare image sizes of each of the above four images. Each of them were saved in the same PNG, 32-bit format.
1. 542 bytes
2. 137 KB
3. 174 KB
4. 17.6 KB

The pixelated scaled-up image has about a 10x smaller file size as a regular PNG. Using any more compression techniques, the difference would be even larger.

Though, admittedly, this example is small and simple enough that any modern computer will be able to handle these. A complication would arise more probably in a small embedded system or old phones/processors with bad data connections.

Bonus tip: Instead of choosing the different scaling options in Paint.NET or Photoshop. If you want to create a large pixelated image, the regular Microsoft Paint by default already does that.

~ Danial Goodwin ~

ps - A special thanks goes out to reader Spence for the great blog idea suggestion.

---

My Android Apps | My Windows Phone Apps | My Developer Blog

Level Up: Paint.NET: Create Large Image From Small Image Source

In trying to create a logo for my newest game, I had a few images that were 32x32 pixels. So, my first thought for the logo was just a mash up with all of them. And, that looked something horrific, like:

A mashup of small pixelated icons

And, if that were scaled up to the size I needed, it would be even more pixelated, which I did not want for this game. So, I thought for a few seconds to determine what I were to do if I weren't lazy. Using my design background and my like for being minimal, I've decided to just create an image of my own that wouldn't be pixelated. If I were to just blow up an 32x32 image to 1000x1000, here's what it would look like:

This is worse than pixelation

Solution, in order to capture the essence of the game in just a single simple icon, I determined that the bomb disguised as a coin would best represent most of the game. Hopefully, it would also provide a little bit of intrigue to get users to click on it.

Final image, using only my own circles, lines, and rounded rectangles. Oh, and the practical use of Gaussian Blur for the level up! =]

Btw, you can play the free beta version at Simply Advanced Games. Coinqueror is coming soon for Windows 8 and Windows Phone 8.

~ Danial Goodwin ~

---

My Android Apps | My Windows Phone Apps | My Developer Blog

Level Up - Paint.NET: How To Scale Up Images And Keep Them Pixelated

Typically, when you resize an image in Paint.NET, it will use anti-aliasing in order for images to look less pixelated. But, sometimes, when you have a great small image, you want to keep it pixelated. So, here's how you do it.

1. From the menu bar, click Image->Resize (or just Ctrl+r).

Step 1. Go to the Resize menu

2. Locate the "Resampling" drop-down menu at the top of Resize window. By default, the option selected is "Best Quality".

Step 2. Click the Resampling option

3. Choose the "Nearest Neighbor" option. Set your width and heights. Then click "OK".

Step 3. Select "Nearest Neighbor" resize option

You now have a large image with the pixelation still intact.

How did I find this out? Experimentation (aka guess and check). Good thing there were only four options there to choose from. ;)

UPDATE: A few days later, I have now written a follow up to this with more image comparisons and reasons why you may want to keep pixelation on an image when resizing.

~ Danial Goodwin ~

ps - The image I used in my screenshots used to be 34x32 pixels, then I scaled it up to be 1000 pixels wide. Then, I added the gem's shine (which isn't pixelated).

---

My Android Apps | My Windows Phone Apps | My Developer Blog

Level Up: Scalable Vector Graphics (SVG Files)

Before today, I was level 0 in dealing with any vector graphics. In order to avoid pixelation in some of my images for a new app I'm creating, I had to open a SVG file and expand it from within there, then save it as a PNG. Now, I am level 1 in messing around with scalable vector graphics.

There are some commercially available products that open and manipulate SVG files, like Adobe's InDesign, CorelDRAW, and others. But, my choice is the free and open source Inkscape. Also, they provide some great tutorial in-app to help learn how to use it.

~ Danial Goodwin ~

---

My Android Apps | My Windows Phone Apps | My Developer Blog

How To Programmatically Batch Resize A Folder Of Images

(This post gives a walkthrough on how to automatically resize a bunch of pictures at once. I provide four different ways to do the resizing, in order of least optimal to most optimal IMO. There may be more ways for programmatically resizing, but I'll most likely be using the fourth method below all of the time.)

1. ImageMagick
2. IrfanView
    2.1. Benefits
    2.2. Limitations
    2.3. Walkthrough
3. Photoshop's Automate Batch
    3.1. Benefits
    3.2. Limitations
    3.3. Walkthrough
4. Photoshop's Scripts Image Processor
    4.1. Benefits
    4.2. Limitations
    4.3. Walkthrough

--

1. ImageMagick: Allows you to run image processing in a Windows command windows. So, you must be comfortable creating BAT (batch) files. I did not use this method, but here's the documentation for batch resizing this way: http://www.imagemagick.org/Usage/windows/

FOR %a in (*.jpg) DO convert %a -resize 50% small_%a

ImageMagick Example

2. IrfanView: When I tried this method, I got the feeling this tool was very old, but it still seems to be regularly updated. Also, IrfanView has many image manipulation features available for it. Many of them seem useful, but this time I was only interested in the resize feature.
2.1. Benefits: Very lightweight program at 2MB.
2.2. Limitations: When I tried to batch resize, each of the images lost their alpha transparencies, and the backgrounds all turned black.
2.3. Walkthrough: Drag a selection of images into the screen, then in the menu bar, choose Image-->Resize/Resample

IrfanView: Program when opened

IrfanView: Menu bar --> Image --> Resize/Resample

3. Photoshop's Scripts Image Processor:
3.1. Benefits: Quick to being resizing without having to setup anything else.
3.2. Limitations: Only resizes to JPG, PSD, or TIFF files. There was no option to save as PNG, which is what I needed.
3.2. Walkthrough: Menu bar --> File --> Scripts --> Image Processor. Then the window that pops up allows you to choose the folder of images you want to manipulate and where to save them.

Photoshop's Scripts Image Processor

4. Photoshop's Automate Batch: Basically, with this method, you change one image whatever way you want to, then record those steps, then you are able to perform all of those steps for a folder of images.
4.1. Benefits: Very versatile! The recorded actions you create will always be available in the future, and easy to manipulate for future projects.
4.2. Limitations: Just requires a little more setup before starting the batch image process.
4.3. Walkthrough:
Step 1. Open Action Window.

Photoshop: Open Action Window

Step 2. Create New Action. Before you can record some actions, you must have an image open. It doesn't matter if it is just a new blank image, or one you would eventually edit anyways. One other useful feature is the ability to stop and record actions at any time.

Photoshop: Create New Action

Photoshop: Saved New Action. List of available actions.

Step 3. Open Batch Window.

Photoshop: Open Batch Window

Step 4. Setup and Start Batch Command. In the first section (Play), choose the action you would like to perform to all your images that you will choose in the second section (Source). In the third section (Destination), you can either replace all of the images or save the manipulated images in a new folder. After all that, choose the "OK" button located at the top right.

Photoshop: Setup Batch Command

Feel free to post any questions or comments about programmatically resizing many images.
~ Simply Advanced ~

---

My Android Apps | My Windows Phone Apps | My Developer Blog