Web View implementation

Web View is used to help us display a web page in our application without the need to call another application, like web browser, to show designated web page. This android feature can be explained simply as headless browser with no or limited functionality. This web view lives as long the activity is active. It is fairly simple design with just one class for the WebView, and it can be used everywhere in our application.

In my example, im going to use two activities, MainActivity and WebViewActivity, separate layout for every of them, one toolbar layout resource and one logo.

NOTE: Im using ButterKnife library for binding the views, like buttons, text views, edit texts and etc.

First, let`s create MainActivity.class and layout for it:

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.webViewLogo)
    ImageView webViewLogo;
    @BindView(R.id.titleName)
    EditText titleName;
    @BindView(R.id.webAddress)
    EditText webAddress;

    @OnClick(R.id.button)
    public void onClickButton() {
        if (!titleName.getText().toString().isEmpty() &amp;&amp; !webAddress.getText().toString().isEmpty()) {
            WebViewActivity.startActivity(this, titleName.getText().toString(), webAddress.getText().toString());
        } else {
            Toast.makeText(this, "Nothing entered, please try again", Toast.LENGTH_SHORT).show();
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        titleName.setText(this.getString(R.string.google));
        webAddress.setText(this.getText(R.string.web_address_google));
    }
}

@BindView(R.id.webViewLogo)

ImageView webViewLogo;

@BindView(R.id.titleName)

EditText titleName;

@BindView(R.id.webAddress)

EditText webAddress;

@OnClick(R.id.button)

public void onClickButton() {

if (!titleName.getText().toString().isEmpty() && !webAddress.getText().toString().isEmpty()) {

WebViewActivity.startActivity(this, titleName.getText().toString(), webAddress.getText().toString());

} else {

Toast.makeText(this, "Nothing entered, please try again", Toast.LENGTH_SHORT).show();

}

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

ButterKnife.bind(this);

titleName.setText(this.getString(R.string.google));

webAddress.setText(this.getText(R.string.web_address_google));

}

In this code we can see only button implementation so we can start our next activity by calling its static method startActivity().

Here is the layout for our activity, activity_main.xml, with one logo, two edit texts and one button, with black background, all of that wrapped in Relative Layout:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
 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:background="@color/colorBlack"     
 tools:context="com.xtrid.webviewexample.MainActivity">

 <ImageView          
   android:id="@+id/webViewLogo"          
   android:layout_width="150dp"          
   android:layout_height="150dp"          
   android:layout_centerHorizontal="true"          
   android:layout_marginBottom="60dp"          
   android:layout_marginTop="25dp"          
   android:background="@drawable/web_view_logo" />

 <EditText          
   android:id="@+id/titleName"          
   android:layout_width="match_parent"          
   android:layout_height="wrap_content"          
   android:layout_below="@id/webViewLogo"          
   android:layout_marginEnd="@dimen/activity_horizontal_margin"          
   android:layout_marginLeft="@dimen/activity_horizontal_margin"          
   android:layout_marginRight="@dimen/activity_horizontal_margin"          
   android:layout_marginStart="@dimen/activity_horizontal_margin"          
   android:hint="@string/name_hint"          
   android:inputType="text"          
   android:maxLines="1"          
   android:paddingLeft="15dp"          
   android:paddingStart="15dp"          
   android:textColor="@color/colorWhite"          
   android:textColorHint="@color/colorPrimaryLight"          
   android:textStyle="italic" />

 <EditText          
   android:id="@+id/webAddress"  
   android:layout_width="match_parent"          
   android:layout_height="wrap_content" 
   android:layout_below="@+id/titleName" 
   android:layout_marginEnd="@dimen/activity_horizontal_margin" 
   android:layout_marginLeft="@dimen/activity_horizontal_margin" 
   android:layout_marginRight="@dimen/activity_horizontal_margin" 
   android:layout_marginStart="@dimen/activity_horizontal_margin" 
   android:layout_marginTop="20dp" android:hint="@string/web_address" 
   android:inputType="text" 
   android:maxLines="1" 
   android:paddingLeft="15dp" 
   android:paddingStart="15dp" 
   android:textColor="@color/colorWhite" 
   android:textColorHint="@color/colorPrimaryLight" 
   android:textStyle="italic" />

 <Button 
   android:id="@+id/button" 
   android:layout_width="match_parent" 
   android:layout_height="wrap_content" 
   android:layout_below="@id/webAddress" 
   android:layout_marginEnd="@dimen/login_horizontal_margin" 
   android:layout_marginLeft="@dimen/login_horizontal_margin" 
   android:layout_marginRight="@dimen/login_horizontal_margin" 
   android:layout_marginStart="@dimen/login_horizontal_margin" 
   android:layout_marginTop="50dp" 
   android:background="@drawable/shape_login" 
   android:text="@string/button" />

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout

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:background="@color/colorBlack"

tools:context="com.xtrid.webviewexample.MainActivity">

<ImageView

android:id="@+id/webViewLogo"

android:layout_width="150dp"

android:layout_height="150dp"

android:layout_centerHorizontal="true"

android:layout_marginBottom="60dp"

android:layout_marginTop="25dp"

android:background="@drawable/web_view_logo" />

<EditText

android:id="@+id/titleName"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@id/webViewLogo"

android:layout_marginEnd="@dimen/activity_horizontal_margin"

android:layout_marginLeft="@dimen/activity_horizontal_margin"

android:layout_marginRight="@dimen/activity_horizontal_margin"

android:layout_marginStart="@dimen/activity_horizontal_margin"

android:hint="@string/name_hint"

android:inputType="text"

android:maxLines="1"

android:paddingLeft="15dp"

android:paddingStart="15dp"

android:textColor="@color/colorWhite"

android:textColorHint="@color/colorPrimaryLight"

android:textStyle="italic" />

<EditText

android:id="@+id/webAddress"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@+id/titleName"

android:layout_marginEnd="@dimen/activity_horizontal_margin"

android:layout_marginLeft="@dimen/activity_horizontal_margin"

android:layout_marginRight="@dimen/activity_horizontal_margin"

android:layout_marginStart="@dimen/activity_horizontal_margin"

android:layout_marginTop="20dp" android:hint="@string/web_address"

android:inputType="text"

android:maxLines="1"

android:paddingLeft="15dp"

android:paddingStart="15dp"

android:textColor="@color/colorWhite"

android:textColorHint="@color/colorPrimaryLight"

android:textStyle="italic" />

<Button

android:id="@+id/button"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_below="@id/webAddress"

android:layout_marginEnd="@dimen/login_horizontal_margin"

android:layout_marginLeft="@dimen/login_horizontal_margin"

android:layout_marginRight="@dimen/login_horizontal_margin"

android:layout_marginStart="@dimen/login_horizontal_margin"

android:layout_marginTop="50dp"

android:background="@drawable/shape_login"

android:text="@string/button" />

</RelativeLayout>

Also we need shape for the button in our MainActivity, and its located in drawable under the name shape_button.xml like this:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorSecondaryLight" />
    <corners android:radius="3dp" />
</shape>

<?xml version="1.0" encoding="utf-8"?>

</shape>

In the next screen is activity_web_view.xml, the layout for the activity, and it have Toolbar, Web View frame and progress bar over the Web View to be visible when our application is calling the designated web page, and it will be hidden when web page is finished loading:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     
android:layout_width="match_parent"     
android:layout_height="match_parent">

 <android.support.v7.widget.Toolbar x
      mlns:android="http://schemas.android.com/apk/res/android" 
      xmlns:app="http://schemas.android.com/apk/res-auto" 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:background="?attr/colorPrimary" 
      android:theme="@style/AppTheme" 
      app:titleTextColor="@color/colorWhite">

 </android.support.v7.widget.Toolbar>

 <WebView 
      android:layout_below="@id/toolbar" 
      android:id="@+id/web_view" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" />

 <ProgressBar 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      android:id="@+id/progress_bar" 
      style="@android:style/Widget.DeviceDefault.Light.ProgressBar" 
      android:layout_width="40dp" 
      android:layout_height="40dp" 
      android:layout_centerInParent="true" 
      android:layout_gravity="center" />

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

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

android:layout_width="match_parent"

android:layout_height="match_parent">

<android.support.v7.widget.Toolbar x

mlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="?attr/actionBarSize"

android:background="?attr/colorPrimary"

android:theme="@style/AppTheme"

app:titleTextColor="@color/colorWhite">

</android.support.v7.widget.Toolbar>

<WebView

android:layout_below="@id/toolbar"

android:id="@+id/web_view"

android:layout_width="match_parent"

android:layout_height="match_parent" />

<ProgressBar

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

android:id="@+id/progress_bar"

style="@android:style/Widget.DeviceDefault.Light.ProgressBar"

android:layout_width="40dp"

android:layout_height="40dp"

android:layout_centerInParent="true"

android:layout_gravity="center" />

</RelativeLayout>

And for the last, but most important part, initializing the WebViewActivity programmatically. In this activity we have to set up the toolbar for it (not going in to details for that now) in setupToolbar() method, and populating our WebView layout with actual page in setupUi() method for it.
In this setupUi() method we have conditional check if the string, which is URL for the page, passed by our previous activity, in this case MainActivity, is NOT null. Then we start by giving our webView designated URL or web page address with .loadUrl() method which receive String url as a parameter. Then we start our new WebViewClient by calling .setWebViewClient() method passing a new WebViewClient object as a parameter.
Here we have two @overridden methods like onPageFinished() and onReceivedError() where we set our progress bar to INVISIBLE. You can do whatever you like in this methods after the page loading is finished or some error have occurred during page loading:

public class WebViewActivity extends AppCompatActivity {

    @BindView(R.id.toolbar)
    Toolbar toolbar;
    @BindView(R.id.web_view)
    WebView webView;
    @BindView(R.id.progress_bar)
    ProgressBar progressBar;

    private static final String EXTRA_TOOLBAR_TITLE = "extra.toolbar.title";
    private static final String EXTRA_URL = "extra.url";

    public static void startActivity(Context context, String toolbarTitle, String url) {
        Intent intent = new Intent(context, WebViewActivity.class);
        intent.putExtra(EXTRA_TOOLBAR_TITLE, toolbarTitle);
        intent.putExtra(EXTRA_URL, url);
        context.startActivity(intent);
    }

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_view);
        ButterKnife.bind(this);
        setupUi();
        setupToolbar();
    }
    private void setupToolbar() {
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        if (getIntent().getStringExtra(EXTRA_TOOLBAR_TITLE) != null)
            toolbar.setTitle(getIntent().getStringExtra(EXTRA_TOOLBAR_TITLE));
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
    }
    private void setupUi() {
        webView.getSettings().setJavaScriptEnabled(true);
        if (getIntent().getStringExtra(EXTRA_URL) != null) {
            webView.loadUrl(getIntent().getStringExtra(EXTRA_URL));
            webView.setWebViewClient(new WebViewClient() {

                public void onPageFinished(WebView view, String url) {
                    progressBar.setVisibility(View.INVISIBLE);
                }

                @Override
                public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
                    progressBar.setVisibility(View.INVISIBLE);
                    super.onReceivedError(view, request, error);
                }
            });
        }
    }
}

public class WebViewActivity extends AppCompatActivity {

@BindView(R.id.toolbar)

Toolbar toolbar;

@BindView(R.id.web_view)

WebView webView;

@BindView(R.id.progress_bar)

ProgressBar progressBar;

private static final String EXTRA_TOOLBAR_TITLE = "extra.toolbar.title";

private static final String EXTRA_URL = "extra.url";

public static void startActivity(Context context, String toolbarTitle, String url) {

Intent intent = new Intent(context, WebViewActivity.class);

intent.putExtra(EXTRA_TOOLBAR_TITLE, toolbarTitle);

intent.putExtra(EXTRA_URL, url);

context.startActivity(intent);

}

@Override

protected void onCreate(@Nullable Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_web_view);

ButterKnife.bind(this);

setupUi();

setupToolbar();

}

private void setupToolbar() {

setSupportActionBar(toolbar);

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

getSupportActionBar().setDisplayShowTitleEnabled(false);

if (getIntent().getStringExtra(EXTRA_TOOLBAR_TITLE) != null)

toolbar.setTitle(getIntent().getStringExtra(EXTRA_TOOLBAR_TITLE));

toolbar.setNavigationOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

finish();

}

});

}

private void setupUi() {

webView.getSettings().setJavaScriptEnabled(true);

if (getIntent().getStringExtra(EXTRA_URL) != null) {

webView.loadUrl(getIntent().getStringExtra(EXTRA_URL));

webView.setWebViewClient(new WebViewClient() {

public void onPageFinished(WebView view, String url) {

progressBar.setVisibility(View.INVISIBLE);

}

@Override

public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {

progressBar.setVisibility(View.INVISIBLE);

super.onReceivedError(view, request, error);

}

});

}

Hints:
AndroidManifest (for the action bar implementation)

</pre>
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.xtrid.webviewexample">

<uses-permission android:name="android.permission.INTERNET" />

<application 
   android:allowBackup="true" 
   android:icon="@drawable/web_view_logo" 
   android:label="@string/app_name" 
   android:roundIcon="@drawable/web_view_logo" 
   android:supportsRtl="true" 
   android:theme="@style/AppTheme">

<activity android:name=".MainActivity" android:screenOrientation="portrait">
 <intent-filter>
  <action android:name="android.intent.action.MAIN" />
  <category android:name="android.intent.category.LAUNCHER" />
</intent-filter>

</activity>
   <activity android:
   name=".WebViewActivity" 
   android:theme="@style/NoActionBarTheme">
   android:screenOrientation="portrait"

</activity>
</application>

</manifest>

</pre>

<?xml version="1.0" encoding="utf-8"?>

<uses-permission android:name="android.permission.INTERNET" />

<application

android:allowBackup="true"

android:icon="@drawable/web_view_logo"

android:label="@string/app_name"

android:roundIcon="@drawable/web_view_logo"

android:supportsRtl="true"

android:theme="@style/AppTheme">

<intent-filter>

</intent-filter>

</activity>

<activity android:

name=".WebViewActivity"

android:theme="@style/NoActionBarTheme">

android:screenOrientation="portrait"

</activity>

</application>

</manifest>

colors.xml (for the design)

<?xml version="1.0" encoding="utf-8"?>
<resources>
 <color name="colorPrimary">#212121</color>
 <color name="colorPrimaryDark">#000000</color>
 <color name="colorPrimaryLight">#484848</color>

 <color name="colorSecondary">#0277bd</color>
 <color name="colorSecondaryDark">#004c8c</color>
 <color name="colorSecondaryLight">#58a5f0</color>

 <color name="colorWhite">#ffffff</color>
 <color name="colorBlack">#000000</color>

 <color name="colorAccent">#FF4081</color>

</resources>

<?xml version="1.0" encoding="utf-8"?>

<color name="colorWhite">#ffffff</color>

</resources>

styles.xml (for action bar, or toolbar)

<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorPrimaryLight</item>
<item name="colorControlNormal">@color/colorPrimaryLight</item>
</style>
<style name="NoActionBarTheme" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorAccent">@color/colorPrimaryLight</item>
</style>

</resources>

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorPrimaryLight</item>

<item name="colorControlNormal">@color/colorPrimaryLight</item>

</style>

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorAccent">@color/colorPrimaryLight</item>

</style>

</resources>

strings.xml (for buttons and edit texts)

<resources> 
   <string name="app_name">Web View Example</string> 

   <!-- Main Activity --> <string name="button">Web View</string> 
   <string name="name_hint">enter name for the title</string> 
   <string name="web_address">example http://www.google.com</string> 
   <string name="google">Google</string> 
   <string name="web_address_google">http://www.google.com</string> 

</resources>