High Resolution App Icon for Google Play Publishing

When it comes to publishing your newly created Android App you will need to provide some graphics for use on the information page for the App in the Google Play (formerly Android Market) store. Information on the types of graphics required can be found on the Google Play Graphics Assets for your Application web page, or in our summary article. One of the required graphics is the High Resolution Application Icon, this is a 512×512 32-bit Portable Network Graphics (PNG) file. The alpha channel is allowed therefore the actual visible image can be smaller, e.g. occupying 470×470 of the 512×512, if a drop shadow or border space was required. The article Android Launcher Icons Using Inkscape showed how the High Resolution Application Icon can be generated from the same Inkscape image file as the App’s launcher icon. This tutorial is going to take the same image and add a rounded rectangle background to give the image a border and button appearance.

A Cup of CoffeeTo follow this example Inkscape needs to be installed and the Scalar Vector Graphics (SVG) file of the Cup of Coffee image available. If Inkscape is not installed get it from http://inkscape.org. The tutorial for the Cup of Coffee image is at http://vector.tutsplus.com/tutorials/illustration/creating-a-coffee-cup-with-inkscape/, alternatively download it from OpenClipArt.org. Open the image in Inkscape. To manipulate the entire image as a single entity group any component parts together. This involves selecting all the component parts (if not already grouped) with the Select All option of the Edit menu (or Ctrl-A) and selecting the Group command from the Object menu (or Ctrl-G).

Inkscape Create Rectangle ToolSelect the Create rectangles and squares tool. Click and drag from the top left of the image down to the bottom right, while holding down the Ctrl key to draw a square over the image. This is the basis for the background and it will be moved below the image when the border and colors have been set.

Drag Circles to Make Rounded CornersDrag one of the circles at the top right to create rounded corners on the square. Hold down the Ctrl key while dragging to make the corner radii equal on the vertical and horizontal. With the basic rounded corner square box drawn the next steps are to determine whether it requires a border (and if so how wide), choose any required colors and set other effects like filters or gradients.

Open Edit Objects ColorsA border can be applied by enlarging the stroke used to draw the square and giving it a different color from the squares fill color. With the square selected open the Fill and Stroke dialog by clicking the Edit Objects… icon on the Controls bar (or Shift-Ctrl-F).

Inkscape Fill and Stroke DialogOn the Fill and Stroke dialog there are three tabs to access settings. The settings for color, gradient, blur and opacity for both fill and stroke can be changed. The stroke style can be changed, which includes the width. For this graphic the rounded square will have a border color different from the fill.

Choose two colors for the fill and stroke, for example set the fill to Teal (0x008080 RGB) and the stroke to Navy (0x000080 RGB). On the Stroke style tab set the Width to 20 px (pixels). The rounded square can be made more attractive by using a gradient or adding a filter, there are lots of predefined filters that can be used.

(Select Color from PaletteNote that colors can also be set via the palette bar towards the bottom of Inkscape. If it cannot be seen use the Show/Hide option on the View menu and select Palette.)

Object Width in InkscapeAt this stage a colored square with a border has been drawn over the coffee cup image. Before applying a filter to the square to make it more attractive the underlying document size will be set to make exporting the PNG easier. The final document needs to be square to support the correct exporting. With the rounded square selected make sure the width and height are equal using the W (width) and H (height) boxes on the toolbar (the width and height may be slightly out, if so edit the values to make them equal). The values do not need to be the same as the final icon size. The correct size is generated when the PNG file is exported. The width and height are the current object size and can be much larger or smaller than the final image. This is because Inkscape manipulates images as vector files which scale without loss of detail. After checking the squares dimensions open the Document Properties dialog via the File menu. With the square selected click the Resize page to drawing or selection button and ensure that the Show page border checkbox is set (so you can see that the document matches the square.

Inkscape Lower SelectionWith the square selected use the Filters menu to apply an effect. Here the Button filter is applied from the Bevels filter option. (You could choose a different filter and also modify filter properties. Experiment with filters on another image to see what effects are possible. Note that some filters use a lot of processing power so may update the image slowly on older PCs). With the work on the rounded square completed make sure it is selected and click the Lower selection to bottom toolbar button (or use the End key or access the option via the Object menu).

Coffee Cup Button in InkscapeWith the coffee cup visible again select it, position it centrally (use the drag arrows to make any size adjustments). The final image is then ready for export.

Open the Export Bitmap dialog from the File menu. In the Width and Height boxes under the Bitmap size option enter 512 (ignore the dpi boxes, they will change automatically). Browse to a location and enter a Filename. Press the Export button. The image is now available for uploading to the Product Details page when the App is ready for publishing.

The principles covered in this article also apply to the generation of the other graphic files required for App publishing. Inkscape can be used to design those file before exporting them to PNG files at the correct size. See also the article Grabbing an Android Device Screenshot on how to get hold of the screenshot images needed to publish an App.

Adding State Graphics to an ImageButton with Inkscape

A good User Interface should be intuitive and attractive. Sometimes simple pictures can replace words, or many words on a screen. Symbols, colors and pictures can make a screen attractive and easy to use. If the screen design is using buttons with symbols instead of text then the ImageButton can be used. Provide the button with custom designed graphics using programs such as Inkscape. Out of the box it supports three visual states, normal, focused and pressed. Without a custom image the states are just plan colored rectangles, grey for normal, orange for focus, dark yellow for pressing. However it is easy to add a custom image for each of these states using a graphics program. This allows an ImageButton to be made unique. Inkscape (http://inkscape.org) is a good program for producing graphics for the Android platform. Inkscape is:

  • Fully featured
  • Free
  • Supports multiple screen densities (vector based)
  • Access to thousands of free images via the Open Clip Art Library (http://www.openclipart.org/)
  • Plenty of online tutorials.

Images can also be generated with programs such as GIMP, (http://www.gimp.org) or Paint.NET (http://www.getpaint.net/), but working with vector instead of raster images makes it easier to produce the variety of sizes needed for multiple screen densities. Those that are not familiar with working in Inkscape can use the built in tutorials (under the Help menu) and tutorials at http://inkscapetutorials.wordpress.com/ to teach themselves.

In the following example an ImageButton is used to represent Play (or Start, or Go). Open a new Android project in Eclipse using the File menu, select New then Android Project. Fill in the Project Name, here Button Press is used. Click Next and select the build target from the installed APIs, any will do, for example Android 1.5 if it is installed. Click Next and enter the Package Name in the required format, for example biz.tekeye.buttonpress, leave Create Activity as default, click Finish. The three images to be used can be built in Inkscape, or alternatively they are available from the Open Clip Art Library (http://www.openclipart.org/) as a Scalable Vector Graphic (SVG) file:

Image ImageButton State Project Name Open Clip Art Name Open Clip Art Search
Play Button in Normal State normal normal.png Architetto — pulsante 02 pulsante
 Play Button with Focus focus focus.png Blue Play Button With Focus play button
 Play Button Pressed pressed pressed.png Play Button Green With Blue Border play button

Continue reading

Animated Images in Android

Android has good support for user interface animation. Views can be animated and it is easy to sequence images using the AnimationDrawable class. This article will show a simple animation using a sequence of traffic light images. The first step is to generate the required images to be sequenced. Each image represents one frame of the animation, they will usually be the same size with changes between each frame as required. Here the images are generated using the open source vector graphics program Inkscape (see http://inkscape.org). A copy of the image used is available from the Open Clip Art Library (http://www.openclipart.org/), searching for Traffic Lights Turned Off, select the image, click on the View Image button and save the file from your browser. Open the file in Inkscape.

Four images will make up the animation, they will show the sequence of traffic lights as used in the United Kingdom, red, red and yellow, green, yellow and back to red. The SVG image has all the lights available, they are just hidden behind a translucent circle. To generate the first image select the circle covering the red light and delete it. Then from the Edit menu use Select All, or Ctrl-A, to highlight the whole image. Using the File menu select Export Bitmap. In the Export Bitmap dialog under Bitmap size enter 150 in the Height box, choose a directory and file name for the file to be generated, e.g. red.png. Click the Export button to export the bitmap. Delete the circle covering the yellow light (click away from the image to remove the selection boxes, click the yellow and press Delete). Use Select All again and export as before to a file, e.g. red_yellow.png. Use the Edit menu and choose Undo, twice, restoring the covers for the red light and yellow light and then delete the circle covering the green light, as was done for yellow. Export to green.png. Again use undo to cover the green light then delete the circle covering the yellow light and export the bitmap in the same way as before to yellow.png.

Exporting an Image from Inkscape Continue reading