How to implement WebView in your Android apps
Hello, everyone! Welcome back to androidhunger.com. Here in this post, I will discuss on how to implement WebView
in your android apps. As the name suggests, a WebView
is a view which displays web pages in your activities or fragments.
Here in this sample app, I used some buttons which when clicked opens up some webpage and displays it the app’s WebView
element.
I will load the social network pages of android hunger, Facebook, G+, Twitter, and YouTube channel when its related button is clicked.
The layout of the app,
The above screen shows a horizontal scroll view for these 4 buttons. When a button is clicked there, below those buttons is a WebView which shows the appropriate web page.
The layout file now looks,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.androidhunger.webviewexample.MainActivity">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/fb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Load Facebook" /><Button
android:id="@+id/gp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Load Google+" /><Button
android:id="@+id/twitter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Load Twitter" /><Button
android:id="@+id/youtube"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Load Youtube" />
</LinearLayout>
</HorizontalScrollView>
<WebView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/webview"></WebView>
</LinearLayout>
Now I initialize the buttons and web view in the activity file (MainActivity.java),
Button fb = (Button) findViewById(R.id.fb);
Button gp = (Button) findViewById(R.id.gp);
Button twitter = (Button) findViewById(R.id.twitter);
Button youtube = (Button) findViewById(R.id.youtube);
WebView wv = (WebView) findViewById(R.id.webview);
Now I will set onClickListeners to these buttons,
fb.setOnClickListener(this);
gp.setOnClickListener(this);
twitter.setOnClickListener(this);
youtube.setOnClickListener(this);
Here I will handle this click listener by implementing View.OnClickListener
to the MainActivity.
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
So now I will add a new onClick
function and use a Switch case to handle each click.
@Override
public void onClick(View v) {
switch(v.getId()) {
case R.id.fb:
url = "http://www.facebook.com/androidhungerAH";
wv.setWebViewClient(new myWebViewClient());
wv.getSettings().setJavaScriptEnabled(true);
wv.getSettings().setLoadsImagesAutomatically(true);
wv.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
wv.loadUrl(url);
break;
case R.id.gp:
...
...
}
}
Here we have some options to enable JavaScript or to load images by default and some other options to set.
The laodUrl()
accepts a parameter which is the URL we need to open.
In the above code wv.setWebViewClient(new myWebViewClient());
I used a function myWebVewClient
which we need to use with WebViewClient
which is defined as below.
public class myWebViewClient extends WebViewClient {
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
// TODO Auto-generated method stubsuper.onPageStarted(view, url, favicon);
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// TODO Auto-generated method stub
view.loadUrl(url);
return true;
}
}
So now the app is ready, when I click on any of the buttons, its related web page is displayed below.