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