How to implement WebView in your Android apps

Published in

Android Hunger

3 min readApr 22, 2017

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.

Implementing Android WebView — androidhunger.com

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.

Post: http://androidhunger.com/implement-webview-android-app/