 This is Ajay and I am going to tell you how to develop a web application in Android. So till now whatever you have seen the various different application that were of static application and I am going to tell you what is the web application, how to develop the web application in Android. So in this session I am going to cover what is the web content, then I have a web view widget. So what is the web view widget, what are the different properties of the web view and at the end we will have a web browser application that is it is an apk file. So it is not any type of browser, so this will be my own custom browser that we are going to develop right now. So what is the web content? Most of you regularly visits the web sites on a different browser such as Mozilla Firefox or Google Chrome and you search the information for a personal usage such as watching the videos, images but have you noticed that each and every web sites has some common things. So that thing is called a web content. Now what is the web content? So web content includes the text, images, videos as well as many more things such as animation graphics and if we merge these three contents or some other contents or if we process these content using some HTML language that is HTML code or some web based language then what we get? We get the web page and if I want to load these web page I use some kind of view so that I can load and display the web pages on that view and that view is a browser. So you heard about the lots of browser Mozilla Firefox, Google Chrome which displays the web pages as well as the HTML pages but what if I want to develop my own custom browser like Firefox or Google Chrome. So for that Android provides a web view widget which is a special widget which displays the web view. We display the, sorry, we display the pages. Now what is the web view? Web view is an Android widget for displaying the web pages and web view class resides in the android.webkit package. So if you want to learn more about the web view webkit package you can go to this link developer.android.com slash reference slash android slash webkit slash package summary dot HTML but while working with a web view it need an internet connection and therefore we need to have internet permission in the android applications manifest file that allows the accessing internet. So how to give the internet permission? So in the manifest file you have to have this statement that is android colon name android colon permission colon internet, sorry android dot permission dot internet. So this permission you have to give in the android manifest file, next. Now what are the properties of the web view? So web view is a class which displays the web pages and it has the properties. So first one is the load data property. So what is the load data property? Load data property takes the three parameters. First one is the HTML code string, second one is the MIME type and the third one is the encoding type. The second property that is URL, sorry for the first property load data what is the use for load data method of the web view class? It parse the HTML code and it displays the output of that HTML page. Now the second property is the load URL. So if I want to load the HTML pages from the external resources then in the load URL method, so load URL method takes only one argument that is the string parameter which takes the URL that is the path of the file which resides in the external resources or it can also load the local file and it runs that file in the web view. Then we have reload method. So what is the reload method? So the current page of the web view. So web view, suppose the web view has a google.com page loaded. So when I use the reload method it will refresh that page as we do in a browser. Then I have a go back method. So suppose if I visited a multiple pages on the browser then if I want to move to the previous page I will use this method that is go back. Then can go forward, can go back. So what is a can go back? Suppose I have a previous history that hey can I go back it is like. So that time I need to give this condition then only I can go back. Suppose I have, so suppose I have a previous history that is I can go back to the previous page so it will return me true can go back and I can go back. Now I have a go forward method. So it is similar to the back method that is if I want to move to the next page and if I use the go forward method I can go to the next page then we have can go forward. So it is like a can go back, can go back method. So if I want suppose I have a history that I can go forward. So when I click when I use this method it will give me the value as a true or false and if it gives me the true that means I can go forward. So I will use this method in the if condition and at the end I have a clear history method. So clear history method is used to clear the history of the browser. So WebView class has many more methods but here I have shown only that method that I am going to use in my application. Now we will develop our application that is my own custom browser. So here I have already put all the required widgets. Let me show you the snapshot of this first. So now we are going to see the program demo. So this is the snapshot of the web application that is the custom browser that I am going to achieve at the end of this session. So here you can see that I have the title my web browser. So it is not a native browser of the Android, it is a custom browser that I have made. So here I have a title my web browser, my web browser. Now what is this? The address bar. So this is the address bar. Then I have a search button. So whatever be in the address bar it will search when I click on search button. Then at the end at the bottom I have four buttons. So first one is the forward. So first one is the forward so that I can go to the forward page, next page. Then I have a back button that means I can go to the back page that is previous page. Then I have a refresh button which will reload the current page. Then at and then last I have a clear history button which will clear the history. And in the blue rectangle what you can see is the web view widget. So this is the web view. So this part actually loads the HTML pages or any website. Now we will see the application code. So here this is your Eclipse IDE. So this is your Eclipse IDE and I have already put the required widgets that is the four buttons here, the search button here. I think there is some problem in my layout. But in the emulator it will be definitely visible correct. So here I have four buttons. The middle part is the web view widget. This is the text view and this is the search button and this is the title. And my project name is web app. So now I will show you the XML file of this graphical layout. So for that click on main.xml. So I am not going to tell you about what is the layouts and all. You have already learned in the morning. So here I have a edit text which has a ID URL. So the edit text widget will act as a address bar in my application. That is my browser application. Then I have a button in front of the, in the right of the address bar. That is with IDB search. Then most importantly I have a web view with ID web engine. And then finally I have buttons, the forward button with IDB for. Then back button with IDB back. Then refresh button with IDBref and clear history button with IDBhist. So this was about the graphical code that is the XML code. Now I will show you the Java code. So here I have already declared my widget that I have used in this application. So that is the edit text as a URL text, all the buttons search, forward, backward, refreshed and history. And I have a browser widget and here let me zoom and here I have and I have already initialized all the widgets to their respective IDs. So the URL text with the ID URL search button with IDB search. And then let me do this. So here I have used the load data method. So what is the load data method? It takes the three parameters. So first one is the HTML code string. So what, so here in the HTML code string I have a text this is android and what the load data will do? It will just show me this is android in my web view widget. So this is the first parameter HTML body h1. Then I have a text, then I am closing the h1 tag, then body, then HTML closing tag. Then I have a encoding as a text slash HTML. So I am using the HTML code string. Therefore I have encoding as text slash HTML and the MIME type is utf8. So now I will run this application. So the browser.java has been modified and save the changes, click on yes. So it is installing webapp.apk. So it should give me the output. Yes, we have successfully run that this is android. Now I will show you the another method of the web view widget. So let me comment this. So this is the load URL method which takes only one parameter that is the website name. So here what I did I have just written that sttp www.google.co.in. That means whenever this application will run first it will show me a Google page. Now let me run this application. So right click on the webapp project name and run as android application. So save the changes, click on yes. So installing webapp starting intent and yes it has loaded the Google page. So that means I have successfully load my website on my web view widget. Now I will do the coding for the rest of the widgets that is the address bar, button, search button and the bottom four buttons here what I have. So here I am setting the on click listener method. So I will show you how to get the on click listener method. So let me delete this. So this is the search. So this is the search I have taken the object of button. So button widget I have this object search and here I have initialized the search button with its id and then I will set the on click listener. So dot set on click listener, new on click listener, put the semicolon at the end and whenever I will click on search button the statement inside this block here the statement whatever be the statement in this block it will execute. So I will take string as web website name and what I need to do? I want the address bar text. So I will get the url text. So url text dot get text dot to string. So here what I did I stored the address bar text that is the edit text widgets text into the website name string and then what I will do? I will just pass I will just pass this string into the load url. So like this whatever be the text in the address bar it will go into the load url method and it will load it into the web view widget. So similarly I will do the code for the backward button. So here I have a method go back so it will go to the previous page but before that I am checking the condition that can I go back if it is yes then only the browser will go back. Then for the forward button similarly that we did for the back button here I have can I go forward method and I am checking before executing go forward then I have refresh. So for refreshing it is only one method so that it will reload the current page that is browser dot reload. So I will type it for you browser dot reload. So when I press dot I get some list and when I type reload so it gives me the proper method and it will reload the current page when I click on the refresh button. Now similarly for the history I have a browser dot clear history method. Now we will run this so let me do this now I will run this run as android application click yes let me run it again. So here I have successfully loaded again the Google page now I will edit the address bar http colon slash slash www dot iitb dot ac dot in. Now here what I am doing I want to load the iitb website and I click on search button. So yes we successfully load the iitb website and now I will show you the action of these four buttons. So if I click on back I will move to the Google page and if I click on forward I can move to the iitb website. Now if I want to refresh this current page I can click so I will click on the refresh and it should refresh the iitb website page to refresh they are not a problem. So we will so now I will show you the clear history button so when I so you can again see I can go back I can go forward but when I click on clear history button now I cannot go back you can see I cannot go back. Now we will do some now we will explore about the iit what is the iit so about the iit. So what happened it moved me to its native browser. So you can see here I do not have the four buttons that is this is not my application this page that loaded into the another intent that is its native browser. So here I do not have search button do not have address bar I do not have any four buttons at the bottom that is forward backward clear history so what is the solution for that. So now we will solve that problem so for that what I need to do I need to set this line. So what is this line so this is the method for setting the webview client. So browser dot set webview client and pass this class as a parameter. So control click on this so here I have a class that is my webview client which extends the webview client and here I have method should override URL loading which has two parameters webview v and the string URL and here I am using the load URL and I am just passing this string URL into the load URL method and it has a access modifier boolean it has a written type boolean so it will return the true or false. So here I am returning true and now we will run this application again so that whatever be the pages that you are going to load will load on my webview widget. So right click on web app run as android application yes and again it has loaded the Google now the same procedure I will go to the IITB website www.itb.ac.in slash and I click on search and yes I loaded the page into my webview so you can see I have so this is my application and in that I have loaded the next pages so whatever be the pages that I am going to load it will load in my webview widget. Now we will open some website that require the JavaScript enabled so www.youtube.com slash and click on search so you can see here I have indication that please enable the JavaScript on your browser so why this message has come because I have not enabled the JavaScript for my webview widget so how to do that so you can do this in this page in this coding so let me do uncomment so this is the statement for enabling the JavaScript so firstly you need to call the dot get settings then you need to call the set JavaScript enable to true so let me type this again for you dot get settings dot set JavaScript so set JavaScript enable taking the flag value that is the Boolean type and here set it to true semicolon and now it I will run this application so that it can load the YouTube website so it has loaded the Google again I will load the YouTube website and now it should load and you can see it is actually loading the YouTube website and it is not giving me please enable your JavaScript and all that and it has loaded the webview widget it has loaded the YouTube website so like this you can develop your web application using the webview so this is a very general application you can also modify you can update this application so we will have this application on GitHub that was about the web app