{"id":984,"date":"2016-02-24T05:59:37","date_gmt":"2016-02-24T05:59:37","guid":{"rendered":"http:\/\/abhiandroid.com\/ui\/?page_id=984"},"modified":"2019-06-12T12:07:04","modified_gmt":"2019-06-12T12:07:04","slug":"webview","status":"publish","type":"page","link":"https:\/\/abhiandroid.com\/ui\/webview","title":{"rendered":"WebView Tutorial With Example In Android Studio"},"content":{"rendered":"

In Android, WebView is a view used to display the web pages in application. This class is the basis upon which you can roll your own web browser or simply use\u00a0it\u00a0to display some online content within your Activity. We can also specify HTML string and can show it inside our application using a WebView. Basically, WebView turns application into a web application.<\/p>\n

\"WebView<\/center>In order to add Web View in your application, you have to add\u00a0<WebView> <\/strong>element to your XML( layout ) file or you can also add it in java class.<\/p>\n
<WebView\r\nandroid:id=\"@+id\/simpleWebView\"\u00a0\u00a0\r\nandroid:layout_width=\"fill_parent\"\r\nandroid:layout_height=\"fill_parent\" \/><\/pre>\n
\n
Internet Permission Required For Webview:<\/strong><\/h4>\n
Important\u00a0Note:<\/strong><\/span> In order for Activity to access the Internet and load the web pages in a WebView, we\u00a0must add the internet permissions to our Android Manifest file (Manifest.xml).<\/p>\n
Below code define the internet permission in our manifest file to access the internet in our application.<\/p>\n
<!--Add this before application tag in AndroidManifest.xml-->\r\n<uses-permission android:name=\"android.permission.INTERNET\" \/>\r\n<\/pre>\n
\"Intenet<\/center><\/p>\n
\n
Methods of WebView In Android:<\/strong><\/h4>\n
Let\u2019s discuss some common methods of a Webview which are used to configure a web view in our application.<\/p>\n
loadUrl() – Load a web page in our WebView<\/strong><\/span><\/p>\n
loadUrl(String url)<\/strong><\/pre>\n
This function is used to load a web page in a web view of our application. In this method we\u00a0specify the url of the web page that should be loaded in a web view.<\/p>\n
Below we load a url:\u00a0https:\/\/abhiandroid.com\/ui\/<\/a> in our application.<\/p>\n
\/*Add in Oncreate() funtion after setContentView()*\/\r\n\/\/ initiate a web view\r\nWebView simpleWebView=(WebView) findViewById(R.id.simpleWebView);\r\n\/\/ specify the url of the web page in loadUrl function\r\nsimpleWebView.loadUrl(\"https:\/\/abhiandroid.com\/ui\/\");<\/pre>\n
\"loadUrl<\/center>2. loadData() – Load Static Html Data on WebView<\/strong><\/span><\/p>\n
\u00a0<\/strong>\u00a0<\/strong>loadData(String data, String mimeType, String encoding)<\/strong>\u00a0<\/strong>\r\n<\/pre>\n
This method is used to load the static HTML string in a web view. loadData() function takes html string data, mime-type and encoding param\u00a0as three parameters.<\/p>\n
Below we load the static Html string data in our application of\u00a0a web view.<\/p>\n
\/*Add in Oncreate() funtion after setContentView()*\/\r\n\/\/ initiate a web view\r\nWebView webView = (WebView) findViewById(R.id.simpleWebView);\r\n\/\/ static html string data\r\nString customHtml = \"<html><body><h1>Hello, AbhiAndroid<\/h1>\" +\r\n        \"<h1>Heading 1<\/h1><h2>Heading 2<\/h2><h3>Heading 3<\/h3>\" +\r\n        \"<p>This is a sample paragraph of static HTML In Web view<\/p>\" +\r\n        \"<\/body><\/html>\";\r\n\/\/ load static html data on a web view\r\nwebView.loadData(customHtml, \"text\/html\", \"UTF-8\");<\/pre>\n
\"loadData<\/center>3. Load Remote URL on\u00a0WebView using WebViewClient:<\/strong><\/span><\/p>\n
WebViewClient help us to monitor event in a WebView. You have to Override the\u00a0shouldOverrideUrlLoading() method. This method allow us to\u00a0perform our own action when a particular url is selected. Once you are ready with the WebViewClient, you can set the WebViewClient in your WebView using the\u00a0setWebViewClient()\u00a0method.<\/p>\n
Below we load a url by using web view client in a WebView.<\/p>\n
\/*Add in Oncreate() funtion after setContentView()*\/\r\n\/\/ initiate a web view\r\n simpleWebView = (WebView) findViewById(R.id.simpleWebView);\r\n\r\n\/\/ set web view client\r\n simpleWebView.setWebViewClient(new MyWebViewClient());\r\n\r\n\/\/ string url which you have to load into a web view\r\n String url = \"https:\/\/abhiandroid.com\/ui\/\";\r\n simpleWebView.getSettings().setJavaScriptEnabled(true);\r\n simpleWebView.loadUrl(url); \/\/ load the url on the web view\r\n }\r\n\r\n \/\/ custom web view client class who extends WebViewClient\r\n private class MyWebViewClient extends WebViewClient {\r\n @Override\r\n public boolean shouldOverrideUrlLoading(WebView view, String url) {\r\n view.loadUrl(url); \/\/ load the url\r\n return true;\r\n }<\/pre>\n
4. canGoBack() – Move to one page back if a back history exist<\/strong><\/span><\/p>\n
This method is used to specify whether the web view has a back history item or not. This method returns a Boolean value either\u00a0true or false. If it returns true then goBack() method is used to move one page back.<\/p>\n
Below we check whether a web view has back history or not.<\/p>\n
\/\/ initiate a web view\r\nWebView simpleWebView=(WebView)findViewById(R.id.simpleWebView<\/em><\/strong>);\r\n\/\/ checks whether a web view has a back history item or not\r\nBoolean canGoBack=simpleWebView.canGoBack();\r\n<\/pre>\n
5. canGoForward() – Move one page forward if forward history exist<\/strong><\/span><\/p>\n
This method is used to specify whether the web view has a forword history item or not. This method returns a Boolean value either\u00a0true or false. If it returns true then goForword() method is used to move one page forword.<\/p>\n
Below we check whether a web view has forward history or not.<\/p>\n
\/\/ initiate a web view\r\n WebView simpleWebView=(WebView)findViewById(R.id.simpleWebView);\r\n\/\/ checks whether a web view has a forward history item or not\r\n Boolean canGoForword=simpleWebView.canGoForward() ;\r\n<\/pre>\n
6. clearHistory() – clear the WebView history<\/strong><\/span><\/p>\n
This method is used to clear the web view forward and backward history.<\/p>\n
Below we clear the forword and backword history of a WebView.<\/p>\n
WebView simpleWebView=(WebView)findViewById(R.id.simpleWebView<\/em><\/strong>); \/\/ initiate a web view\r\nsimpleWebView.clearHistory(); \/\/ clear the forward and backward history<\/pre>\n
\n
WebView Example In Android Studio:<\/strong><\/h4>\n
Here in this WebView example\u00a0we show the use of web view in our application. To do\u00a0that we display two buttons one is for displaying a web page and other is for displaying static HTML data in a web view. Below is the final output, download code and step by step explanation:<\/p>\n
Download Code<\/a> ? <\/a><\/p>\n
\"WebView<\/center>Step 1:<\/strong><\/span> Create a new project and name it WebViewExample<\/strong><\/p>\n
Select File -> New -> New Project\u2026 then Fill the forms and click \"Finish\" button.<\/pre>\n
Step 2:<\/strong><\/span> Open res -> layout ->\u00a0activity_main.xml (or) main.xml\u00a0and add following code :<\/p>\n
In this step we open an XML\u00a0file and add the code for displaying two buttons and a Webview in our xml file ( layout ).<\/p>\n
<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    xmlns:tools=\"http:\/\/schemas.android.com\/tools\"\r\n    android:layout_width=\"match_parent\"\r\n    android:layout_height=\"match_parent\"\r\n    android:orientation=\"vertical\"\r\n    android:paddingBottom=\"@dimen\/activity_vertical_margin\"\r\n    android:paddingLeft=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingRight=\"@dimen\/activity_horizontal_margin\"\r\n    android:paddingTop=\"@dimen\/activity_vertical_margin\"\r\n    tools:context=\".MainActivity\">\r\n\r\n    <LinearLayout\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"wrap_content\"\r\n        android:orientation=\"horizontal\"\r\n        android:weightSum=\"2\">\r\n\r\n        <Button\r\n            android:id=\"@+id\/loadWebPage\"\r\n            android:layout_width=\"0dp\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:layout_marginRight=\"10dp\"\r\n            android:layout_weight=\"1\"\r\n            android:background=\"#444\"\r\n            android:text=\"Load Web Page\"\r\n            android:textColor=\"#fff\"\r\n            android:textSize=\"14sp\"\r\n            android:textStyle=\"bold\" \/>\r\n\r\n        <Button\r\n            android:id=\"@+id\/loadFromStaticHtml\"\r\n            android:layout_width=\"0dp\"\r\n            android:layout_height=\"wrap_content\"\r\n            android:layout_marginLeft=\"10dp\"\r\n            android:layout_weight=\"1\"\r\n            android:background=\"#444\"\r\n            android:text=\"Load Static HTML\"\r\n            android:textColor=\"#fff\"\r\n            android:textSize=\"14sp\"\r\n            android:textStyle=\"bold\" \/>\r\n    <\/LinearLayout>\r\n\r\n    <WebView\r\n        android:id=\"@+id\/simpleWebView\"\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"fill_parent\"\r\n        android:layout_marginTop=\"20dp\"\r\n        android:scrollbars=\"none\" \/>\r\n\r\n<\/LinearLayout><\/pre>\n
Step 3:<\/strong><\/span> Open\u00a0 \u00a0src -> package ->\u00a0MainActivity.java<\/p>\n
In this step we open\u00a0MainActivity\u00a0and\u00a0add the code to\u00a0initiate the web view and two buttons.\u00a0Out of those one button is used for displaying a web page in a webview and other one is used to load a static HTML page in webview.<\/p>\n
package example.gb.webviewexample;\r\n\r\nimport android.support.v7.app.AppCompatActivity;\r\nimport android.os.Bundle;\r\nimport android.support.v7.widget.ButtonBarLayout;\r\nimport android.view.Menu;\r\nimport android.view.MenuItem;\r\nimport android.view.View;\r\nimport android.webkit.WebView;\r\nimport android.webkit.WebViewClient;\r\nimport android.widget.Button;\r\n\r\npublic class MainActivity extends AppCompatActivity implements View.OnClickListener {\r\n\r\n    WebView simpleWebView;\r\n    Button loadWebPage, loadFromStaticHtml;\r\n\r\n    @Override\r\n    protected void onCreate(Bundle savedInstanceState) {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.activity_main);\r\n        \/\/ initiate buttons and a web view\r\n        loadFromStaticHtml = (Button) findViewById(R.id.loadFromStaticHtml);\r\n        loadFromStaticHtml.setOnClickListener(this);\r\n        loadWebPage = (Button) findViewById(R.id.loadWebPage);\r\n        loadWebPage.setOnClickListener(this);\r\n        simpleWebView = (WebView) findViewById(R.id.simpleWebView);\r\n\r\n    }\r\n\r\n    @Override\r\n    public void onClick(View v) {\r\n        switch (v.getId()) {\r\n            case R.id.loadFromStaticHtml:\r\n                \/\/ define static html text\r\n                String customHtml = \"<html><body><h1>Hello, AbhiAndroid<\/h1>\" +\r\n                        \"<h1>Heading 1<\/h1><h2>Heading 2<\/h2><h3>Heading 3<\/h3>\" +\r\n                        \"<p>This is a sample paragraph of static HTML In Web view<\/p>\" +\r\n                        \"<\/body><\/html>\";\r\n                simpleWebView.loadData(customHtml, \"text\/html\", \"UTF-8\"); \/\/ load html string data in a web view\r\n                break;\r\n            case R.id.loadWebPage:\r\n                simpleWebView.setWebViewClient(new MyWebViewClient());\r\n                String url = \"https:\/\/abhiandroid.com\/ui\/\";\r\n                simpleWebView.getSettings().setJavaScriptEnabled(true);\r\n                simpleWebView.loadUrl(url); \/\/ load a web page in a web view\r\n                break;\r\n        }\r\n    }\r\n\r\n    private class MyWebViewClient extends WebViewClient {\r\n        @Override\r\n        public boolean shouldOverrideUrlLoading(WebView view, String url) {\r\n            view.loadUrl(url);\r\n            return true;\r\n        }\r\n    }\r\n\r\n    \r\n}<\/pre>\n
Step 4:<\/strong><\/span> Open manifests -> AndroidManifest.xml<\/strong><\/p>\n
In this step we open\u00a0Manifest file\u00a0and\u00a0define the internet permission for our app.<\/p>\n
<?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<manifest xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n    package=\"example.gb.webviewexample\">\r\n    <!-- define internet permission for our app -->\r\n    <uses-permission android:name=\"android.permission.INTERNET\" \/>\r\n    <application\r\n        android:allowBackup=\"true\"\r\n        android:icon=\"@mipmap\/ic_launcher\"\r\n        android:label=\"@string\/app_name\"\r\n        android:theme=\"@style\/AppTheme\">\r\n        <activity\r\n            android:name=\".MainActivity\"\r\n            android:label=\"@string\/app_name\">\r\n            <intent-filter>\r\n                <action android:name=\"android.intent.action.MAIN\" \/>\r\n\r\n                <category android:name=\"android.intent.category.LAUNCHER\" \/>\r\n            <\/intent-filter>\r\n        <\/activity>\r\n    <\/application>\r\n\r\n<\/manifest><\/pre>\n
\u00a0Output:<\/strong><\/p>\n
Now start the AVD in Emulator and run the App.\u00a0Choose either to open webpage or static HTML in WebView by clicking on Button. We open static HTML.<\/p>\n
\"WebView<\/center> <\/p>\n
\n
How to add progressBar in webview & convert website into advance android app<\/strong><\/h4>\n