Android Programming

WebView Progress Bar

2013-05-04T12:01:00.000-07:00

This post is going to show how to add a progress bar to a WebView, which can let the user know that there is something going on while your page loads. Some newer versions of Android may already have this built in, but the older versions of Android did not.

Basic WebView
First we need to setup a basic WebView to load a page. In your main activity add the following code to create a WebView:

package com.test.webviewprogbar;



import android.app.Activity;

import android.os.Bundle;

import android.view.Menu;

import android.webkit.WebView;



public class MainActivity extends Activity {



WebView mWebView;


    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mWebView = (WebView)findViewById(R.id.webview);

        mWebView.loadUrl("http://devemat-androidprogramming.blogspot.com/");

    }



    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.activity_main, menu);

        return true;

    }

}

Now in the activity_main.xml make sure it looks like this:

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

 

/>

In the AndroidManifest.xml make sure to add internet permission when loading webpages. Add it after the end application tag, like this:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

    package="com.test.webviewprogbar"

    android:versionCode="1"

    android:versionName="1.0" >



    <uses-sdk

        android:minSdkVersion="1"

        android:targetSdkVersion="15" />



    <application

        android:icon="@drawable/ic_launcher"

        android:label="@string/app_name"

        android:theme="@style/AppTheme" >

        <activity

            android:name=".MainActivity"

            android:label="@string/title_activity_main" >

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

Now is a good time to verify that the code is working okay so far.

Add Progress Bar
The following bit of code is all that is needed now to load a progress bar. You can also change how quickly it loads by changing the 100 to another number.

final Activity myActivity = this;

       

  mWebView.setWebChromeClient(new WebChromeClient(){

       public void onProgressChanged(WebView view, int progress){

       myActivity.setProgress(progress * 100);

}

});

Here is how MainActivity.java should look after adding the new code:

package com.test.webviewprogbar;



import android.app.Activity;

import android.os.Bundle;

import android.view.Menu;

import android.webkit.WebChromeClient;

import android.webkit.WebView;



public class MainActivity extends Activity {



WebView mWebView;



    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mWebView = (WebView)findViewById(R.id.webview);

       

        final Activity myActivity = this;

       

        mWebView.setWebChromeClient(new WebChromeClient(){

public void onProgressChanged(WebView view, int progress){

myActivity.setProgress(progress * 100);

}

});

       

        mWebView.loadUrl("http://devemat-androidprogramming.blogspot.com/");

    }



    @Override

    public boolean onCreateOptionsMenu(Menu menu) {

        getMenuInflater().inflate(R.menu.activity_main, menu);

        return true;

    }

}

Search text within a WebView

2012-03-18T10:54:00.003-07:00

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

2012-02-20T16:27:00.000-08:00

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.

Selecting Text with a WebView

2011-06-05T14:27:00.000-07:00

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);
  }
 }
}

test

2011-06-05T12:53:00.000-07:00

testing code syntax highlighting

public class MainActivity extends ListActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);