Putting a Web Search Button in Your App

Tutorial on Adding a Simple Internet Search Button to an Activity

This article assumes that your computer is configured for developing Apps using the Eclipse Integrated Development Environment (IDE) (see Set Up Windows for Android Development if not), and that you can create and run a simple App (see Your First Android Java Program if in doubt). The tutorial covers adding a simple Internet search to an App. If functionality is required to search for items within your App (such as the database) see the Android Developers Guide Search page.

Start by creating a new Android Project in Eclipse using the File menu, select New then Android Project. Fill in the Project Name, here Web Search is used. Click Next and select the build target from the installed APIs, e.g. Android 1.5, any of the installed APIs will work and it can be changed later if required. Click Next and enter the Package Name in the required format, e.g. biz.tekeye.websearch, leave Create Activity checked with the default Activity name, click Finish.

The User Interface (UI).

Android Xtra High Density Magnifying Glass IconTo implement the web search a EditText will be used for the search term and an ImageButton with a magnifying glass icon is used to start the search. The magnifying glass image is by Open Clip Art Library user warszawianka (OpenClipArt.org is a good source of free clip art images). See the image’s web page and use the PNG button with a value to generate the image at your required size (see the article Free Android Icons Using OpenClipArt.org and Paint.NET for more detail on converting a Open Clip Art Library image to PNG format). The image is placed into the res\drawable folder in the project. You can of course use you own image for the button or use a text Button. The magnifying glass icon is available from the Android Graphic Resources page, use the Zip file and the icons can be imported into the project using the File menu Import option (see Move Android Code Between PCs Running Eclipse for details on importing from zip files). The magnifying glass icon is called magglass.png in the Zip file. Continue reading

ImageButton Background with Shape Drawable

In this tutorial a background is set on an ImageButton to change its appearance. The article also shows how that appearance can be easily changed without the need to edit the button’s image. To follow this example the Eclipse Integrated Development Environment (IDE) is required. If your computer is not configured for developing Apps using Eclipse see Set Up Windows for Android Development. In Eclipse use the File menu and select New then Android Project. Fill in the Project Name, here Image Button is used. Click Next and select the build target from the installed APIs, e.g. Android 1.5, any of the installed APIs will work and it can be changed later if required. Click Next and enter the Package Name in the required format, e.g. biz.tekeye.imagebutton, leave Create Activity checked with the default Activity name, click Finish.

Green Tick Icon Android FormatA graphic is required for use with the ImageButton. Here a couple of buttons will be used one to show a red cross and another a green tick, with the images taken from the Open Clip Art Library, a good source of free graphics. You may have your own images to use.

Red Cross Icon in Android FormatTo see how images from the Open Clip Art Libray can be converted into PNGs see the article Android Launcher Icons Using Inkscape or Free Android Icons Using OpenClipArt.org and Paint.NET. The images are also on our Android Graphic Resources page with a Zip file available for importing directly into a project. See Move Android Code Between PCs Running Eclipse for instructions on importing from Zip (archive) files. Add the required images to the project’s res\drawable folder. Continue reading

SDK Manager not Working in Windows

A change in the Android Software Development Kit (SDK) Tools that took place between release 16 and release 17 means that on some Windows configurations the Android SDK Manager (SDK Manager.exe) does not run outside of Eclipse, that issue is discussed in this article. Occasionally the SDK Manager does not work for other reasons, in which case one possible solution is to manually update the SDK tools as discussed at the end of the article Keeping the Android SDK Updated. However, if SDK Manager (and other Android utilities) worked prior to release 17 of the SDK tools then read on. The article also discusses why recent Android SDKs fail to install on a Windows 64-bit system. Continue reading

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.

Google Play Publishing Graphics Checklist

You like your Android Phone or Tablet, it gives you easy portable computing with access to thousands of programs that cover almost any subject. Almost. That App that you wanted doesn’t exist so you’ve invested some time and energy and made it yourself. Now you’d like to publish it so that others can use it, and maybe make a little money on the side. Unfortunately you’ll need to break out the creative talents again and come up with some promotional graphics, because your App will not be listed on Google Play (formerly Android Market) unless those graphics are available. The following table lists the graphic and media images you will need to produce to publish on Google Play.

Media Assets Required for Google Play App Publishing
Item Type Opt. Size Alpha Padding
2 to 8 Screenshots 24-bit PNG/JPG No 320×480 or 480×800 or 480×854 No No
Large App Icon 32-bit PNG No 512×512 (1024KB max.) Yes Allowed
Promo Image 24-bit PNG/JPG Yes 180×120 No No
Feature Image 24-bit PNG/JPG Yes 1024×500 (924×400 useable) No Yes
YouTube Video Link URL Yes N/A N/A N/A

Notes:

  • Provide every asset for a professional app listing, even those that are optional.
  • PNG is a Portable Networks Graphics file, file extension normally .png.
  • JPG file extension is normally .jpg or .jpeg and is a Joint Photographics Expert Group graphics format.
  • All graphics sizes are give as X pixels times Y pixels (i.e. 320×480 is 320 pixels wide by 480 pixels high).
  • Alpha determines whether or not the alpha channel is support for the given image being used.
  • Do not put a border around the edge of any graphics.
  • Use large fonts, bright contrasting colors and crisp designs that are not overly detailed. Particularly for the Feature Image which may be scaled down.

See the article High Resolution App Icon for Google Play Publishing for a tutorial on generating the 512×512 image.

See the article Grabbing an Android Device Screenshot for information on generating the screenshots required.

The Google web page Graphic Assets for your Application has further details.

Grabbing an Android Device Screenshot

Android developers need to be able to grab a screenshot of their App running on a device or the emulator. This is because when the App is published on Google Play (previously known as Android Market) one of the requirements is at least two screenshots. The ability to take a screenshot helps with the production of a website to support the App (online user guides, manuals, training and quick start guides). There is also the production of marketing materials and good old fashioned printed user guides or manuals.

It is most likely that the screen capture will be done during the final testing phases of the App on a developers computer. The App will be running on a Android Virtual Device (AVD) configuration or on a device physically tethered to the computer, usually connected via a USB cable. This tutorial explains how easy it is to capture the screen for an Android device from within the Eclipse programming environment. If you have a App project handy start up Eclipse now and give it ago. Alternatively install Eclipse (see this article) and try it with one of our example projects.

Open Perspective HintExecute the project so that it is running on an AVD or physical device. In the upper right hand corner of Eclipse click the Open Perspective button, or use the Eclipse Window menu and select Open Perspective. This will open a menu with several options.

DDMS Menu Option via Open PerspectiveFrom the Open Perspective menu chose the Dalvik Debug Monitor Server (DDMS) entry. The DDMS is provided with the Software Development Kit (SDK) and is available from Eclipse when the Android Development Tools (ADT) plugin is installed. Continue reading