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.

Open the layout file for the App, main.xml in the res\layout folder. Using the User Interface (UI) designer view (click the Graphical Layout tab at the bottom of the edit area) drag and drop controls onto the Activity screen, or edit the XML layout code directly (the main.xml tab at the bottom of the edit area). Drag and drop a Plain Text control from the Text Fields folder on the Palette bar. Then drag and drop an Image Button from the Images & Media folder, selecting magglass from the Resource Chooser dialog that appears (or whatever image name you have used).

On the Graphical Layout change the text on the existing TextView, using the context menu, to something more appropriate. For example via the Edit Text… option create a string called prompt and set the value to Search For. Here android:textSize has also been set to 20dp.

Web Search ActivityBy Default the magnifying glass image appears to sit directly on the Activity’s background. It can be given the appearance of a button by using a shape drawable. See  the article ImageButton Background with Shape Drawable for details. With the drawable folder selected bring up the context menu and using New select Android XML File, call it button_background.xml and select shape as the Root Element. By setting appropriate gradient, padding and corners elements on a shape and assigning it to the background attribute for the ImageButton the magnifying glass image is given a rounded button appearance. Edit the background_button.xml to have this code (if copying and pasting this code see Copying Code from the Articles for tips). Experiment with the shape elements to see the effect on the ImageButton appearance, e.g. remove the padding element.

[code lang=”xml”]<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<gradient android:startColor="#B07FC9FF"
android:endColor="#B00094FF"
android:angle="315"/>
<padding android:left="7dp"
android:top="7dp"
android:right="7dp"
android:bottom="7dp" />
<corners android:radius="8dp" />
</shape>[/code]

The main.xml code should look similar to this.

[code language=”xml”]<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<TextView android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/prompt"
android:textSize="20dp" />
<EditText android:id="@+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
<requestFocus />
</EditText>
<ImageView android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/button_background"
android:src="@drawable/magglass" />
</LinearLayout>[/code]

Add the Code to Handle the Button Press

With the UI ready the code to watch for button presses is added by linking an OnClickListener instance to the Button. There are several ways to do this, see the article Different Ways to Code Android Event Listeners. Here is the code for this example which replaces onCreate in the WebSearchActivity.java (under the src folder), the imports for OnClickListener and View will be required.

[code lang=”java”]@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//attach an instance of HandleClick to the Button
findViewById(R.id.imageView1).setOnClickListener(new HandleClick());
}
private class HandleClick implements OnClickListener{
public void onClick(View arg0) {
}
}[/code]

Perform the Search

One of the advantages of using Android is the ability to reuse functionality from within an App without being tied to specific versions of libraries or programs. This is achieved via the Intent mechanism. Intents can reduce the amount of code to be written if that code already exists. For an Internet search the Android platform supports an Intent of type ACTION_WEB_SEARCH. The search term is taken from the EditText and loaded into the Intent. The Intent is then passed to Android, via startActivity(), to do the browser based search. This is the code in the onClick, imports for EditText, Intent and SearchManager will be required.

[code lang=”java”]public void onClick(View arg0) {
String searchFor=((EditText) findViewById(R.id.editText1)).getText().toString();
Intent viewSearch = new Intent(Intent.ACTION_WEB_SEARCH);
viewSearch.putExtra(SearchManager.QUERY, searchFor);
startActivity(viewSearch);
}[/code]

Searching for the Term Tek EyeThis screenshot shows the result of entering Tek Eye in the EditText and pressing the ImageButton. The code for this example is available here and from our Android Example Projects page.

One thought on “Putting a Web Search Button in Your App

Leave a Reply

Your email address will not be published. Required fields are marked *

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.