Sunday, June 5, 2011

Selecting Text with a WebView

The following explains how to copy text from a WebView to the clipboard.

First let's create a simple app that uses a WebView to load a web page. If any of the following doesn't make sense refer to the Android tutorial http://developer.android.com/resources/tutorials/views/hello-webview.html 

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"
   
/>


MainActivity.java

package com.Demo.SelectText;

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

public class MainActivity 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/");

   }
}

Now remember to set the internet permission in your Manifest after
</application>
<uses-permission android:name="android.permission.INTERNET"/>

In order to allow the user to enable the select text feature we are going to make it a menu option. So let's set up our menu in the main activity. Refer to the following link for more information on Menu's:
http://developer.android.com/guide/topics/ui/menus.html

Select Text Menu Option

private static final int SELECTTEXT_MENU_ID = Menu.FIRST;
   
    @Override
    public boolean onCreateOptionsMenu(Menu menu){
       super.onCreateOptionsMenu(menu);
    
       menu.add(0, SELECTTEXT_MENU_ID, 0, "Select Text");
    
       return true;
    }
   
    public boolean onPrepareOptionsMenu(Menu menu){
       super.onPrepareOptionsMenu(menu);
       return true;
    }
   
    public boolean onOptionsItemSelected(MenuItem item){
       switch(item.getItemId()){
       case SELECTTEXT_MENU_ID:
    
          return true;
       }
       return true;
    }

Now we just need to create our Select Text method and call it when the Select Text menu option is selected by the user.

Select Text method

public void SelectText(){
  try{
    KeyEvent shiftPressEvent = 
       new KeyEvent(0, 0, KeyEvent.ACTION_DOWN, 
       KeyEvent.KEYCODE_SHIFT_LEFT, 0, 0);
   shiftPressEvent.dispatch(mWebView);
  }catch(Exception e){
   throw new AssertionError(e);
  }
 }

The Select Text method activates the left shift key, which in Android is the select text key. Not all phones have a keyboard so we press the shift key for the user by using a KeyEvent.

Now just call the Select Text method when the user selects the option under the menu:

public boolean onOptionsItemSelected(MenuItem item){
     switch(item.getItemId()){
     case SELECTTEXT_MENU_ID:
      SelectText();
      return true;
     }
     return true;
    }

And that's it. Your application can now copy text to the clipboard. After the Select Text option is chosen under menu the user drags her finger across the text. Once she takes her finger off the screen, the selected text is copied to the clipboard. Also, a nice toast message is displayed telling the user that the text was copied to the clipboard.

Here is what your Main Activity should look like:

package com.Demo.SelectText;

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

public class MainActivity 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 SELECTTEXT_MENU_ID = Menu.FIRST;
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu){
     super.onCreateOptionsMenu(menu);
     
     menu.add(0, SELECTTEXT_MENU_ID, 0, "Select Text");
     
     return true;
    }
    
    public boolean onPrepareOptionsMenu(Menu menu){
     super.onPrepareOptionsMenu(menu);
     return true;
    }
    
    public boolean onOptionsItemSelected(MenuItem item){
     switch(item.getItemId()){
     case SELECTTEXT_MENU_ID:
          SelectText();
          return true;
     }
     return true;
    }

    public void SelectText(){
    try{
      KeyEvent shiftPressEvent = 
               new KeyEvent(0, 0, KeyEvent.ACTION_DOWN,     
               KeyEvent.KEYCODE_SHIFT_LEFT, 0, 0);
      shiftPressEvent.dispatch(mWebView);
  }catch(Exception e){
      throw new AssertionError(e);
  }
 }
}

6 comments:

  1. Thank you Devemat..
    u solved ma big problem thnx alot..!!
    :)

    ReplyDelete
  2. Can we get that copying indexes..? ie : starting index and ending index?

    ReplyDelete
  3. What about android 4.0 version because they give inbuilt selection tool so we get only selected text but if i want to open dialog on copy press which is inbuilt in android 4.0?
    So Which event is performed when i click on Copy?

    ReplyDelete
  4. It doesn't work on Android 4.x version.

    ReplyDelete
  5. hi i want to select the text and get it to use it further in my application ... is there any way to get the call back after the text selection ......

    ReplyDelete
  6. thank you very much... actually i am struggling for this to make it work perfectly. Finally your code helped me.

    ReplyDelete