Search text within a WebView

This article is to explain how to search for text within a WebView. The functions used are built into the WebView Class already. This article will show the classes used for search within a WebView, and also show how to create user interface functionality similar to the web browser on Android phones. The search functionality will include a text box for search word entry, a next button, close button, and text highlighting of search words found within the WebView. Here is a screenshot of what it will look like once we are finished:

Basic WebView
First, we are going to want to set up a WebView to add search functionality to.

SearchDemoActivity.java

package com.search.demo;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebView;

public class SearchDemoActivity extends Activity {
WebView mWebView;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mWebView = (WebView)findViewById(R.id.webview);
        mWebView.loadUrl("http://devemat-androidprogramming.blogspot.com/");
    }
}

main.xml

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
  
/>

SearchDemo Manifest
In your manifest make sure to add the internet permission so your web page loads.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
      package="com.search.demo"
      android:versionCode="1"
      android:versionName="1.0">
    <uses-sdk android:minSdkVersion="8" />

    <application android:icon="@drawable/icon" android:label="@string/app_name">
        <activity android:name=".SearchDemoActivity"
                  android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
      <uses-permission android:name="android.permission.INTERNET"/>
</manifest>

Test to make sure that your WebView is functioning correctly before moving on to the next step.

Add A Menu Option for Search
Now that we have a webpage loaded in our WebView we will add a search menu option for when the user wants to search the web page. Here is what our SearchDemoActivity.java looks like with the search menu option added:

SearchDemoActivity.java with Search Menu Option

package com.search.demo;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebView;

public class SearchDemoActivity extends Activity {
WebView mWebView;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mWebView = (WebView)findViewById(R.id.webview);
        mWebView.loadUrl("http://devemat-androidprogramming.blogspot.com/");
    }
  
    private static final int SEARCH_MENU_ID = Menu.FIRST;
  
    @Override
    public boolean onCreateOptionsMenu(Menu menu){
    super.onCreateOptionsMenu(menu);
    
    menu.add(0, SEARCH_MENU_ID, 0, "Search");
    
    return true;
    }
  
    public boolean onPrepareOptionsMenu(Menu menu){
     super.onPrepareOptionsMenu(menu);
    return true;
    }
  
    public boolean onOptionsItemSelected(MenuItem item){
    switch(item.getItemId()){
    case SEARCH_MENU_ID:
    
    return true;
    }
    return true;
    }
}

Search User Interface
Now that we have a webpage to search and a menu option to select search we need to create a user interface to get the search word from the user. Also we will enable the user to cycle through the found words and to close the search interface. To do this I create a dynamic Linear Layout. I'm sure you could create a static UI using XML, but this is the way that made since to me. First add a Linear Layout to our main.xml:

Main.xml with Linear Layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<WebView 
    android:id="@+id/webview"
   android:layout_width="fill_parent"
    android:layout_height="fill_parent"
  
/>

<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/layoutId"

></LinearLayout>


</RelativeLayout>

Next we will have our Edit Box and buttons appear when the user selects search from the options menu. We will add a function called search to contain all of our search functionality. Here is what our SearchDemoActivity.java looks like with the added Linear Layout items:

SearchDemoActivity.java with Edit Box and Buttons

 package com.search.demo;


import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;

public class SearchDemoActivity extends Activity {
WebView mWebView;
private LinearLayout container;
private Button nextButton, closeButton;
private EditText findBox;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mWebView = (WebView)findViewById(R.id.webview);
        mWebView.loadUrl("http://devemat-androidprogramming.blogspot.com/");
    }
  
    private static final int SEARCH_MENU_ID = Menu.FIRST;
  
    @Override
    public boolean onCreateOptionsMenu(Menu menu){
    super.onCreateOptionsMenu(menu);
    
    menu.add(0, SEARCH_MENU_ID, 0, "Search");
    
    return true;
    }
  
    public boolean onPrepareOptionsMenu(Menu menu){
    super.onPrepareOptionsMenu(menu);
    return true;
    }
  
    public boolean onOptionsItemSelected(MenuItem item){
    switch(item.getItemId()){
    case SEARCH_MENU_ID:
    search();
    return true;
    }
    return true;
    }
  
    public void search(){
    container = (LinearLayout)findViewById(R.id.layoutId);
    
    nextButton = new Button(this);
    nextButton.setText("Next");
    container.addView(nextButton);
    
    closeButton = new Button(this);
    closeButton.setText("Close");
    container.addView(closeButton);
    
    findBox = new EditText(this);
findBox.setMinEms(30);
findBox.setSingleLine(true);
container.addView(findBox);
    }
}

Search Functionality
Now we just need to add functionality to our buttons and edit box. To do this we will use the WebView built in search functionality. Most notably is the WebView.findall(). This is going to do the search functionality for us. Then we just have to provide the button functionality. To do this we will use WebView.findnext() and LinearLayout.removeAllViews(). We will also add a hint that is displayed in our edit box using EditText.setHint(). Here is what our SearchDemoActivity.java looks like with the added search functionality:

SearchDemoActivity.java with Search Functionality

package com.search.demo;


import java.lang.reflect.Method;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnKeyListener;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;

public class SearchDemoActivity extends Activity {
WebView mWebView;
private LinearLayout container;
private Button nextButton, closeButton;
private EditText findBox;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mWebView = (WebView)findViewById(R.id.webview);
        mWebView.loadUrl("http://devemat-androidprogramming.blogspot.com/");
    }
  
    private static final int SEARCH_MENU_ID = Menu.FIRST;
  
    @Override
    public boolean onCreateOptionsMenu(Menu menu){
    super.onCreateOptionsMenu(menu);
    
    menu.add(0, SEARCH_MENU_ID, 0, "Search");
    
    return true;
    }
  
    public boolean onPrepareOptionsMenu(Menu menu){
    super.onPrepareOptionsMenu(menu);
    return true;
    }
  
    public boolean onOptionsItemSelected(MenuItem item){
    switch(item.getItemId()){
    case SEARCH_MENU_ID:
    search();
    return true;
    }
    return true;
    }
  
    public void search(){
    container = (LinearLayout)findViewById(R.id.layoutId);
    
    nextButton = new Button(this);
    nextButton.setText("Next");
    nextButton.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v){
mWebView.findNext(true);
}
});
    container.addView(nextButton);
    
    closeButton = new Button(this);
    closeButton.setText("Close");
    closeButton.setOnClickListener(new OnClickListener(){
@Override
public void onClick(View v){
container.removeAllViews();

}
});
    container.addView(closeButton);
    
    findBox = new EditText(this);
findBox.setMinEms(30);
findBox.setSingleLine(true);
findBox.setHint("Search");

findBox.setOnKeyListener(new OnKeyListener(){
public boolean onKey(View v, int keyCode, KeyEvent event){
if((event.getAction() == KeyEvent.ACTION_DOWN) && ((keyCode == KeyEvent.KEYCODE_ENTER))){
mWebView.findAll(findBox.getText().toString());

try{
Method m = WebView.class.getMethod("setFindIsUp", Boolean.TYPE);
m.invoke(mWebView, true);
}catch(Exception ignored){}
}
return false;
}
});

container.addView(findBox);
    }
}

And that's all there is to it. Your WebView should now have complete search functionality with search word highlighting similar to a web browser.

Creating a Hi-Res 512x512 Launcher Icon

Here is a tool that I have found useful:
http://converticon.com/

This online tool enables you to upload your Android Launcher icon and it will convert it to the size that you want. I use this for when I need to create that pesky 512x512 image that is required to submit an app to the Android Market.

It has a simple online interface:

Just click the Get Started button and then pick your launcher icon. Use the drop down box on the bottom left when browsing for your icon to choose a different file type. The default is Icon (ico). I usually have to set it to Image (png, gif, jpeg). Once you have selected your launcher icon, select the Export button. 

Now you will want to select the 512x512 option to get your hi-res launcher icon:

Once you have selected the size you want your icon to be, select Save As.

After you save it, just upload it to Android Market and now you have that pesky hi-res requirement out of the way.