Introduction

Android is one of the most popular operating systems for mobile. The User can access the internet through the Browser. Each Browser has the Web view module. The web view is the most important thing in Android and Web development. Thus, I will show you how to create a Web view Android Application, using Android Studio. Android is a kernel-based operating system. It allows the user to modify the GUI components and the source code.
Requirements
Steps to be followed are given below
Carefully follow my steps to create Web view Android Application, using Android Studio and I have included the source code given below.
Step 1
Open Android Studio. Start the new project.
Android
Step 2
Put the Application name and the company domain. If you wish to use C++ to code the project, mark Include C++ support, followed by clicking Next.
Android
Step 3
Select Android minimum SDK. Afterward, you chose the minimum SDK. It will show an approximate percentage of the people using the SDK, followed by clicking Next.
Android
Step 4
Choose the basic activity, followed by clicking Next.
Android
Step 5
Put the activity name and the layout name. Android Studio basically takes a Java class name, which provides the activity name and click Finish.
Android
Step 6
Go to activity_main.xml, followed by clicking the text bottom. This XML file contains the designing code for an Android app. Into the activity_main.xml, copy and paste the code given below.
Activity_main.xml code
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. android:id="@+id/main_content"
  5. android:layout_width="match_parent"
  6. android:layout_height="match_parent"
  7. android:background="@android:color/white"
  8. android:fitsSystemWindows="true">
  10. <android.support.design.widget.AppBarLayout
  11. android:id="@+id/appbar"
  12. android:layout_width="match_parent"
  13. android:layout_height="@dimen/detail_backdrop_height"
  14. android:fitsSystemWindows="true"
  15. android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  17. <android.support.design.widget.CollapsingToolbarLayout
  18. android:id="@+id/collapsing_toolbar"
  19. android:layout_width="match_parent"
  20. android:layout_height="match_parent"
  21. android:fitsSystemWindows="true"
  22. app:contentScrim="?attr/colorPrimary"
  23. app:expandedTitleMarginEnd="64dp"
  24. app:expandedTitleMarginStart="48dp"
  25. app:expandedTitleTextAppearance="@android:color/transparent"
  26. app:layout_scrollFlags="scroll|exitUntilCollapsed">
  28. <RelativeLayout
  29. android:layout_width="wrap_content"
  30. android:layout_height="wrap_content">
  32. <ImageView
  33. android:id="@+id/backdrop"
  34. android:layout_width="match_parent"
  35. android:layout_height="match_parent"
  36. android:fitsSystemWindows="true"
  37. android:scaleType="centerCrop"
  38. app:layout_collapseMode="parallax" />
  39. </RelativeLayout>
  41. <android.support.v7.widget.Toolbar
  42. android:id="@+id/toolbar"
  43. android:layout_width="match_parent"
  44. android:layout_height="?attr/actionBarSize"
  45. app:layout_collapseMode="pin"
  46. app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
  48. </android.support.design.widget.CollapsingToolbarLayout>
  50. </android.support.design.widget.AppBarLayout>
  52. <include layout="@layout/content_main" />
  54. <ProgressBar
  55. android:id="@+id/progressBar"
  56. style="@style/Widget.AppCompat.ProgressBar.Horizontal"
  57. android:layout_width="match_parent"
  58. android:layout_height="wrap_content"
  59. android:layout_marginTop="-7dp"
  60. android:indeterminate="true"
  61. app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  63. </android.support.design.widget.CoordinatorLayout>
Android
Step 7
Create a new activity_browser.xml file (File ⇒ New ⇒Activity⇒Empty_activity).
Go to activity_browser.xml, followed by clicking the text bottom. This XML file contains the designing code for an Android app. In activity_browser.xml, copy and paste the code given below.
activity_browser.xml code
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. xmlns:tools="http://schemas.android.com/tools"
  5. android:id="@+id/main_content"
  6. android:layout_width="match_parent"
  7. android:layout_height="match_parent"
  8. android:background="@android:color/white"
  9. android:fitsSystemWindows="true"
  10. tools:context=".BrowserActivity">
  12. <android.support.design.widget.AppBarLayout
  13. android:layout_width="match_parent"
  14. android:layout_height="wrap_content"
  15. android:theme="@style/AppTheme.AppBarOverlay">
  17. <android.support.v7.widget.Toolbar
  18. android:id="@+id/toolbar"
  19. android:layout_width="match_parent"
  20. android:layout_height="?attr/actionBarSize"
  21. android:background="?attr/colorPrimary"
  22. app:popupTheme="@style/AppTheme.PopupOverlay" />
  24. </android.support.design.widget.AppBarLayout>
  26. <include layout="@layout/content_browser_full" />
  28. <ProgressBar
  29. android:id="@+id/progressBar"
  30. style="@style/Widget.AppCompat.ProgressBar.Horizontal"
  31. android:layout_width="match_parent"
  32. android:layout_height="wrap_content"
  33. android:layout_marginTop="-7dp"
  34. android:indeterminate="true"
  35. android:visibility="gone"
  36. app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  38. </android.support.design.widget.CoordinatorLayout>
Android
Step 8
Create a new content_browser_full.xml file (File ⇒ New ⇒Activity⇒Empty_activity).
Go to content_browser_full.xml then click the text bottom. This XML file contains the designing code for android app. In content_browser_full.xml, copy and paste the code given below.
content_browser_full.xml code
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. android:fadeScrollbars="false"
  7. android:scrollbarFadeDuration="0"
  8. app:layout_behavior="@string/appbar_scrolling_view_behavior">
  11. <WebView
  12. android:id="@+id/webView"
  13. android:layout_width="match_parent"
  14. android:layout_height="wrap_content" />
  16. </android.support.v4.widget.NestedScrollView>
Android
Step 9
In MainActivity.java, copy and paste the code given below. Java programming is the backend language for Android. Do not replace your package name, otherwise, the app will not run.
MainActivity.java code
  1. import android.content.Context;
  2. import android.content.Intent;
  3. import android.os.Bundle;
  4. import android.support.design.widget.AppBarLayout;
  5. import android.support.design.widget.CollapsingToolbarLayout;
  6. import android.support.v7.app.AppCompatActivity;
  7. import android.support.v7.widget.Toolbar;
  8. import android.text.TextUtils;
  9. import android.view.MotionEvent;
  10. import android.view.View;
  11. import android.webkit.WebChromeClient;
  12. import android.webkit.WebView;
  13. import android.webkit.WebViewClient;
  14. import android.widget.ImageView;
  15. import android.widget.ProgressBar;
  17. import com.bumptech.glide.Glide;
  18. import com.bumptech.glide.load.engine.DiskCacheStrategy;
  20. public class MainActivity extends AppCompatActivity {
  22. private String postUrl = "/members/ganeshan-n";
  23. private WebView webView;
  24. private ProgressBar progressBar;
  25. private float m_downX;
  26. private ImageView imgHeader;
  28. @Override
  29. protected void onCreate(Bundle savedInstanceState) {
  30. super.onCreate(savedInstanceState);
  31. setContentView(R.layout.activity_main);
  32. Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
  33. setSupportActionBar(toolbar);
  34. getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  36. webView = (WebView) findViewById(R.id.webView);
  37. progressBar = (ProgressBar) findViewById(R.id.progressBar);
  38. imgHeader = (ImageView) findViewById(R.id.backdrop);
  40. if (!TextUtils.isEmpty(getIntent().getStringExtra("postUrl"))) {
  41. postUrl = getIntent().getStringExtra("postUrl");
  42. }
  44. initWebView();
  45. initCollapsingToolbar();
  46. renderPost();
  48. }
  50. private void initWebView() {
  51. webView.setWebChromeClient(new MyWebChromeClient(this));
  52. webView.setWebViewClient(new WebViewClient() {
  54. @Override
  55. public boolean shouldOverrideUrlLoading(WebView view, String url) {
  57. if (Utils.isSameDomain(postUrl, url)) {
  58. Intent intent = new Intent(MainActivity.this, MainActivity.class);
  59. intent.putExtra("postUrl", url);
  60. startActivity(intent);
  61. } else {
  62. // launch in-app browser i.e BrowserActivity
  63. openInAppBrowser(url);
  64. }
  66. return true;
  67. }
  69. @Override
  70. public void onPageFinished(WebView view, String url) {
  71. super.onPageFinished(view, url);
  72. progressBar.setVisibility(View.GONE);
  73. }
  74. });
  75. webView.clearCache(true);
  76. webView.clearHistory();
  77. webView.getSettings().setJavaScriptEnabled(true);
  78. webView.setHorizontalScrollBarEnabled(false);
  79. webView.setOnTouchListener(new View.OnTouchListener() {
  80. public boolean onTouch(View v, MotionEvent event) {
  82. if (event.getPointerCount() > 1) {
  83. //Multi touch detected
  84. return true;
  85. }
  87. switch (event.getAction()) {
  88. case MotionEvent.ACTION_DOWN: {
  89. // save the x
  90. m_downX = event.getX();
  91. }
  92. break;
  94. case MotionEvent.ACTION_MOVE:
  95. case MotionEvent.ACTION_CANCEL:
  96. case MotionEvent.ACTION_UP: {
  97. // set x so that it doesn't move
  98. event.setLocation(m_downX, event.getY());
  99. }
  100. break;
  102. }
  104. return false;
  105. }
  106. });
  107. }
  109. private void renderPost() {
  110. webView.loadUrl(postUrl);
  112. }
  114. private void openInAppBrowser(String url) {
  115. Intent intent = new Intent(MainActivity.this, BrowserActivity.class);
  116. intent.putExtra("url", url);
  117. startActivity(intent);
  118. }
  119. private void initCollapsingToolbar() {
  120. final CollapsingToolbarLayout collapsingToolbar =
  121. (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
  122. collapsingToolbar.setTitle(" ");
  123. AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar);
  124. appBarLayout.setExpanded(true);
  126. // hiding & showing the txtPostTitle when toolbar expanded & collapsed
  127. appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
  128. boolean isShow = false;
  129. int scrollRange = -1;
  131. @Override
  132. public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
  133. if (scrollRange == -1) {
  134. scrollRange = appBarLayout.getTotalScrollRange();
  135. }
  136. if (scrollRange + verticalOffset == 0) {
  137. collapsingToolbar.setTitle("Web View");
  138. isShow = true;
  139. } else if (isShow) {
  140. collapsingToolbar.setTitle(" ");
  141. isShow = false;
  142. }
  143. }
  144. });
  146. // loading toolbar header image
  147. Glide.with(getApplicationContext()).load("http://www.ourlonelyuniverse.com/wp-content/uploads/2016/01/google-dont-be-evil.png")
  148. .thumbnail(0.5f)
  149. .crossFade()
  150. .diskCacheStrategy(DiskCacheStrategy.ALL)
  151. .into(imgHeader);
  152. }
  154. private class MyWebChromeClient extends WebChromeClient {
  155. Context context;
  157. public MyWebChromeClient(Context context) {
  158. super();
  159. this.context = context;
  160. }
  161. }
  162. }
Step 10
Create a new BrowserActivity.java file (File ⇒ New ⇒Java class).
In the BrowserActivity.java, copy and paste the code given below. Java programming is the backend language for Android. Do not replace your package name, otherwise, the app will not run.
BrowserActivity.java code
  1. import android.content.Context;
  2. import android.graphics.Bitmap;
  3. import android.os.Bundle;
  4. import android.support.design.widget.CoordinatorLayout;
  5. import android.support.design.widget.Snackbar;
  6. import android.support.v7.app.AppCompatActivity;
  7. import android.support.v7.widget.Toolbar;
  8. import android.text.TextUtils;
  9. import android.view.Menu;
  10. import android.view.MenuItem;
  11. import android.view.MotionEvent;
  12. import android.view.View;
  13. import android.webkit.WebChromeClient;
  14. import android.webkit.WebResourceError;
  15. import android.webkit.WebResourceRequest;
  16. import android.webkit.WebView;
  17. import android.webkit.WebViewClient;
  18. import android.widget.ProgressBar;
  20. public class BrowserActivity extends AppCompatActivity {
  23. private String url;
  24. private WebView webView;
  25. private ProgressBar progressBar;
  26. private float m_downX;
  27. CoordinatorLayout coordinatorLayout;
  29. @Override
  30. protected void onCreate(Bundle savedInstanceState) {
  31. super.onCreate(savedInstanceState);
  32. setContentView(R.layout.activity_browser);
  33. Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
  34. setSupportActionBar(toolbar);
  35. getSupportActionBar().setDisplayHomeAsUpEnabled(true);
  36. getSupportActionBar().setTitle("");
  38. url = getIntent().getStringExtra("url");
  40. // if no url is passed, close the activity
  41. if (TextUtils.isEmpty(url)) {
  42. finish();
  43. }
  45. webView = (WebView) findViewById(R.id.webView);
  46. progressBar = (ProgressBar) findViewById(R.id.progressBar);
  47. coordinatorLayout = (CoordinatorLayout) findViewById(R.id.main_content);
  49. initWebView();
  51. webView.loadUrl(url);
  52. }
  54. private void initWebView() {
  55. webView.setWebChromeClient(new MyWebChromeClient(this));
  56. webView.setWebViewClient(new WebViewClient() {
  57. @Override
  58. public void onPageStarted(WebView view, String url, Bitmap favicon) {
  59. super.onPageStarted(view, url, favicon);
  60. progressBar.setVisibility(View.VISIBLE);
  61. invalidateOptionsMenu();
  62. }
  64. @Override
  65. public boolean shouldOverrideUrlLoading(WebView view, String url) {
  66. webView.loadUrl(url);
  67. return true;
  68. }
  70. @Override
  71. public void onPageFinished(WebView view, String url) {
  72. super.onPageFinished(view, url);
  73. progressBar.setVisibility(View.GONE);
  74. invalidateOptionsMenu();
  75. }
  77. @Override
  78. public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
  79. super.onReceivedError(view, request, error);
  80. progressBar.setVisibility(View.GONE);
  81. invalidateOptionsMenu();
  82. }
  83. });
  84. webView.clearCache(true);
  85. webView.clearHistory();
  86. webView.getSettings().setJavaScriptEnabled(true);
  87. webView.setHorizontalScrollBarEnabled(false);
  88. webView.setOnTouchListener(new View.OnTouchListener() {
  89. public boolean onTouch(View v, MotionEvent event) {
  91. if (event.getPointerCount() > 1) {
  92. //Multi touch detected
  93. return true;
  94. }
  96. switch (event.getAction()) {
  97. case MotionEvent.ACTION_DOWN: {
  98. // save the x
  99. m_downX = event.getX();
  100. }
  101. break;
  103. case MotionEvent.ACTION_MOVE:
  104. case MotionEvent.ACTION_CANCEL:
  105. case MotionEvent.ACTION_UP: {
  106. // set x so that it doesn't move
  107. event.setLocation(m_downX, event.getY());
  108. }
  109. break;
  110. }
  112. return false;
  113. }
  114. });
  115. }
  117. @Override
  118. public boolean onCreateOptionsMenu(Menu menu) {
  119. // Inflate the menu; this adds items to the action bar if it is present.
  120. getMenuInflater().inflate(R.menu.browser, menu);
  122. if (Utils.isBookmarked(this, webView.getUrl())) {
  123. // change icon color
  124. Utils.tintMenuIcon(getApplicationContext(), menu.getItem(0), R.color.colorAccent);
  125. } else {
  126. Utils.tintMenuIcon(getApplicationContext(), menu.getItem(0), android.R.color.white);
  127. }
  128. return true;
  129. }
  132. @Override
  133. public boolean onPrepareOptionsMenu(Menu menu) {
  134. if (!webView.canGoBack()) {
  135. menu.getItem(1).setEnabled(false);
  136. menu.getItem(1).getIcon().setAlpha(130);
  137. } else {
  138. menu.getItem(1).setEnabled(true);
  139. menu.getItem(1).getIcon().setAlpha(255);
  140. }
  142. if (!webView.canGoForward()) {
  143. menu.getItem(2).setEnabled(false);
  144. menu.getItem(2).getIcon().setAlpha(130);
  145. } else {
  146. menu.getItem(2).setEnabled(true);
  147. menu.getItem(2).getIcon().setAlpha(255);
  148. }
  150. return true;
  151. }
  154. @Override
  155. public boolean onOptionsItemSelected(MenuItem item) {
  157. if (item.getItemId() == android.R.id.home) {
  158. finish();
  159. }
  161. if (item.getItemId() == R.id.action_bookmark) {
  162. // bookmark / unbookmark the url
  163. Utils.bookmarkUrl(this, webView.getUrl());
  165. String msg = Utils.isBookmarked(this, webView.getUrl()) ?
  166. webView.getTitle() + "is Bookmarked!" :
  167. webView.getTitle() + " removed!";
  168. Snackbar snackbar = Snackbar
  169. .make(coordinatorLayout, msg, Snackbar.LENGTH_LONG);
  170. snackbar.show();
  171. invalidateOptionsMenu();
  172. }
  174. if (item.getItemId() == R.id.action_back) {
  175. back();
  176. }
  178. if (item.getItemId() == R.id.action_forward) {
  179. forward();
  180. }
  182. return super.onOptionsItemSelected(item);
  183. }
  184. private void back() {
  185. if (webView.canGoBack()) {
  186. webView.goBack();
  187. }
  188. }
  189. private void forward() {
  190. if (webView.canGoForward()) {
  191. webView.goForward();
  192. }
  193. }
  195. private class MyWebChromeClient extends WebChromeClient {
  196. Context context;
  198. public MyWebChromeClient(Context context) {
  199. super();
  200. this.context = context;
  201. }
  202. }
  203. }
Step 11
Create a new Utils.java file (File ⇒ New ⇒Java class).
In Utils.java, copy and paste the code given below. Java programming is the backend language for Android. Do not replace your package name, otherwise, the app will not run.
Utils.java code
  1. import android.content.Context;
  2. import android.content.SharedPreferences;
  3. import android.graphics.PorterDuff;
  4. import android.graphics.drawable.Drawable;
  5. import android.support.v4.content.ContextCompat;
  6. import android.view.MenuItem;
  8. public class Utils {
  10. public static boolean isSameDomain(String url, String url1) {
  11. return getRootDomainUrl(url.toLowerCase()).equals(getRootDomainUrl(url1.toLowerCase()));
  12. }
  14. private static String getRootDomainUrl(String url) {
  15. String[] domainKeys = url.split("/")[2].split("\\.");
  16. int length = domainKeys.length;
  17. int dummy = domainKeys[0].equals("www") ? 1 : 0;
  18. if (length - dummy == 2)
  19. return domainKeys[length - 2] + "." + domainKeys[length - 1];
  20. else {
  21. if (domainKeys[length - 1].length() == 2) {
  22. return domainKeys[length - 3] + "." + domainKeys[length - 2] + "." + domainKeys[length - 1];
  23. } else {
  24. return domainKeys[length - 2] + "." + domainKeys[length - 1];
  25. }
  26. }
  27. }
  29. public static void tintMenuIcon(Context context, MenuItem item, int color) {
  30. Drawable drawable = item.getIcon();
  31. if (drawable != null) {
  32. // If we don't mutate the drawable, then all drawable's with this id will have a color
  33. // filter applied to it.
  34. drawable.mutate();
  35. drawable.setColorFilter(ContextCompat.getColor(context, color), PorterDuff.Mode.SRC_ATOP);
  36. }
  37. }
  39. public static void bookmarkUrl(Context context, String url) {
  40. SharedPreferences pref = context.getSharedPreferences("androidhive", 0); // 0 - for private mode
  41. SharedPreferences.Editor editor = pref.edit();
  43. // if url is already bookmarked, unbookmark it
  44. if (pref.getBoolean(url, false)) {
  45. editor.putBoolean(url, false);
  46. } else {
  47. editor.putBoolean(url, true);
  48. }
  50. editor.commit();
  51. }
  53. public static boolean isBookmarked(Context context, String url) {
  54. SharedPreferences pref = context.getSharedPreferences("androidhive", 0);
  55. return pref.getBoolean(url, false);
  56. }
  57. }
Step 12
As we need to make network requests, we need to add internet permission in AndroidManifest.xml. Add the code given below in an AndroidManifest.xml.
AndroidManifest.xml code
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
  3. package="info.androidhive.webview" >
  5. <uses-permission android:name="android.permission.INTERNET"/>
  7. <application
  8. android:allowBackup="true"
  9. android:icon="@mipmap/ic_launcher"
  10. android:label="@string/app_name"
  11. android:supportsRtl="true"
  12. android:theme="@style/AppTheme.NoActionBar" >
  13. <activity android:name=".MainActivity" >
  14. <intent-filter>
  15. <action android:name="android.intent.action.MAIN" />
  17. <category android:name="android.intent.category.LAUNCHER" />
  18. </intent-filter>
  19. </activity>
  21. <activity android:name=".BrowserActivity"
  22. android:theme="@style/AppTheme.NoActionBar"></activity>
  23. </application>
  25. </manifest>
Step 13
This is our user interface of the Application. Click Make project option.
Android
Step 14
Run the Application, followed by choosing a virtual machine. Click OK.
Android
Deliverables
“Google-Don’t be evil” image is the default. If you want to replace the image, I will change the image link.
Android
Below this image is the Web view part. I set the default link, which is my C# Corner profile link. Due to this, it shows my C# Corner profile. link.
Android
Just scroll up the page.
Android
Android
Android
Don’t forget to like and follow me. If you have any doubts, just comment below.
Source code
https://github.com/GaneshanNT/WebView