Click here to Skip to main content
15,354,442 members
Articles / Mobile Apps / Android
Tip/Trick
Posted 25 Aug 2013

Tagged as

Stats

34.7K views
2.1K downloads
6 bookmarked

WebView browser controller

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
30 Aug 2013CPOL
Android webview browser controller

Introduction

Today, I will guide that way to control a WebView Android, with some normal action of web Browser.

  • Reload button: tap on to refresh current page.
  • Back button: back to previous page of webview if it exists.
  • Next button: go to next page if it exists.

Using the code

Off course we will customize to have Webview like that. In this tip, I will layout for custom view by coding, not xml. I hope it can help you use it easier. 

The customize view is FrameLayout which contains:

  • A WebView is fill_parent.
  • A LinearLayout in the bottom which contains [Back], [Next], [Reload] button.

And below is customize class

CustomizeWebview.java  

Java
/**
 * @author huyletran84@gmail.com
 */
public class CustomizeWebview extends FrameLayout {
    private Button mReload;
    private Button mNextBtn;
    private Button mPreBbn;
    private WebView mWebView;
    private boolean mIsLoadFinish = false;
    private LinearLayout mWebViewControllerLn;
    private WebViewClient mWebViewClient;

    public CustomizeWebview(final Context context, final AttributeSet attrs) {
	super(context, attrs);
	mWebView = new WebView(getContext());
	mWebView.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
		LayoutParams.MATCH_PARENT));
	addView(mWebView);

	mReload = new Button(getContext());
	mReload.setText("Reload");
	mReload.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
		LayoutParams.WRAP_CONTENT));

	mNextBtn = new Button(getContext());
	mNextBtn.setText("Next");
	mNextBtn.setEnabled(false);
	mNextBtn.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
		LayoutParams.WRAP_CONTENT));

	mPreBbn = new Button(getContext());
	mPreBbn.setText("Back");
	mPreBbn.setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,
		LayoutParams.WRAP_CONTENT));
	mPreBbn.setEnabled(false);

	mWebViewControllerLn = new LinearLayout(getContext());
	mWebViewControllerLn.setLayoutParams(new LayoutParams(
		LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT,
		Gravity.BOTTOM));
	mWebViewControllerLn.setOrientation(LinearLayout.HORIZONTAL);
	mWebViewControllerLn.setBackgroundColor(Color.GRAY);

	mWebViewControllerLn.addView(mPreBbn);
	mWebViewControllerLn.addView(mNextBtn);
	mWebViewControllerLn.addView(mReload);
	addView(mWebViewControllerLn);

	// Setup for button controller
	mReload.setOnClickListener(new OnClickListener() {
	    @Override
	    public void onClick(View v) {
		mWebView.reload();
		enableControllerButton();
	    }
	});
	mPreBbn.setOnClickListener(new OnClickListener() {
	    @Override
	    public void onClick(View v) {
		mWebView.goBack();
		enableControllerButton();
	    }
	});
	mNextBtn.setOnClickListener(new OnClickListener() {

	    @Override
	    public void onClick(View v) {
		mWebView.goForward();
		enableControllerButton();
	    }
	});
    }

    public void loadUrl(String url) {
	mWebView.getSettings().setJavaScriptEnabled(true);
	mWebViewClient = new WebViewClient() {
	    @Override
	    public boolean shouldOverrideUrlLoading(WebView view, String url) {
		return super.shouldOverrideUrlLoading(view, url);
	    }

	    @Override
	    public void onPageStarted(WebView view, String url,
		    android.graphics.Bitmap favicon) {
	    }

	    @Override
	    public void onPageFinished(WebView view, String url) {
		mIsLoadFinish = true;
		enableControllerButton();
	    }
	};
	mWebView.setWebViewClient(mWebViewClient);
	mWebView.loadUrl(url);
    }

    private void enableControllerButton() {
	if (mIsLoadFinish) {
	    mReload.setEnabled(true);
	    if (mWebView.canGoBack()) {
		mPreBbn.setEnabled(true);
	    } else {
		mPreBbn.setEnabled(false);
	    }
	    if (mWebView.canGoForward()) {
		mNextBtn.setEnabled(true);
	    } else {
		mNextBtn.setEnabled(false);
	    }
	} else {
	    mPreBbn.setEnabled(false);
	    mNextBtn.setEnabled(false);
	}
    }
}

And the result is here

Beside that, if you want to hide and view controller by tapping, please download this source

History 

  • 20130826: First version.
  • 20130830: add source to view and hide controller by tapping event. 
  • 20130831: add source to display video in html5 in webview (Clinton's request) 

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

huyletran
Vietnam Vietnam
I'm Java developer.
I started Java web coding from 2007 to 2010. After that, I began to develop Android from 2010 to now.
In my thinking, sharing and connecting is the best way to develop.
I would like to study more via yours comments and would like to have relationship with more developers in the world.

Comments and Discussions

 
Questiondisplay video via webview?? Pin
Mo Kash30-Aug-13 4:08
MemberMo Kash30-Aug-13 4:08 
AnswerRe: display video via webview?? Pin
huyletran30-Aug-13 4:45
Memberhuyletran30-Aug-13 4:45 
AnswerRe: display video via webview?? Pin
huyletran30-Aug-13 4:47
Memberhuyletran30-Aug-13 4:47 
GeneralRe: display video via webview?? Pin
Clinton Gallagher30-Aug-13 7:44
professionalClinton Gallagher30-Aug-13 7:44 
Huy,

If I may spreak for Mo I think what Mo (and I) want to know is if WebView can parse HTML5 that contains HTML source used to fetch, load and playback a video.

In other words, since WebView uses URI to get and load some HTML web page from the WWW and if that HTML web page has a <video> element in its source code then the WebView should allow that video to play. I would think so myself but asking to make sure.

See this artical about HTML5 video: http://msdn.microsoft.com/en-us/magazine/dn423697.aspx

Sample Video Page URLs to use as WebView URI:
http://camendesign.com/code/video_for_everybody/test.html
http://html5demos.com/video
http://www.w3.org/2010/05/video/mediaevents.html


I also want to say I see you are new on CodeProject Huy and ask you if this: http://bit.ly/14epbyN is you on YouTube?

Finally, thank you for this WebView article and source. Very, very useful
Clinton Gallagher

GeneralRe: display video via webview?? Pin
huyletran30-Aug-13 18:44
Memberhuyletran30-Aug-13 18:44 
GeneralRe: display video via webview?? Pin
Clinton Gallagher31-Aug-13 10:00
professionalClinton Gallagher31-Aug-13 10:00 
GeneralMy vote of 5 Pin
trth27-Aug-13 20:38
Membertrth27-Aug-13 20:38 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.