How to Convert Website to Android App in Android Studio | Learn about WebView | with Source Code

hey guys welcome to my channel all korean tutorials today i'm going to tell you how can we convert a website into an android app let's begin but first of all if you're watching my channel for the first time i request you to please subscribe so that you never miss my videos so first we will launch the android studio select the new project select the empty activity and we will click next then it will give name to our application i'm writing here web activity you can write your own name leave other things up and click finish and you will see two things have open activity underscore main.xml and one main activity.java we will go to activity underscore main.xml here what we will do we will first delete this text view hello world and we will also change this layout from coordinator layout to relative layout we will create a webview which having a full stretch of the screen so we will write width will be match parent and height will be match parent we will also assign an id id slash webview then we have to give some permissions to the project so let's go to android manifest or xml on the left side and here below where the pack is written enter a line and write uses permission android name equal to there will be some options coming select the first option android.permission.internet then what we can do since uh we will also change the app icon i have some logo of my website i will copy that and i'll paste on the drawable folder right click on the driver and paste on the second option and change the name here you have to be careful that the first letter should not be capital letter otherwise it will not accept so i'm writing here small letters logo.png then press ok so here in the android icon you can change it from dot ic launcher to address drawable logo because it is inside the drawable then we will go to the values then we will go to the strings in the strings we have the app name so in the app name we will change this my web activity to learn android so that the icon on your mobile phone will show the name of the app as your app the name of the my app is learn android so i'm changing that so that way it will be complete also this drawable slash logo we can copy and we can also put the same thing in the our android ground icon so that the logos are same in both type of icons so you can see on the left side you can see the mini pictures of your logo is also coming so that you can verify that the correct logo has come then what we want we don't want the upper bar which normally comes the default bar which comes on the android app we want full screen to be utilized so we will go to themes and click on the themes.xml and you will see on the top there is a style name there is a style material component dot dna dot dark action bar here we will delete the dot dark action bar and we will write no action bar similarly we will do in the other theme night dark action bar we will write dot new action bar ui is complete manifest as well as android main.xml is complete now it's time to do coding in the main activity so in the main activity we are going to define a widget web view it's basically extension of the view class which takes care of the viewing of the websites basically the urls let us write webview webview inside the oncreate method webview equal to find view by id r dot id dot web view then what we'll do inside the web view we have to load our url i will show this step then we will go to the further steps how to make the app better and better so we will write webview dot load url inside the url you will write your url of the website so https double slash learnandroid.net that's my website name and also put a slash then let us just write this much only and let us run and see what happens then we can understand how it works so when you run it you will see app is installed and it's launching so i have mirrored my phone screen here and you can see the logo has come and the label learn android has come and when we click on that it opens the app but the problem is that it is opening directly the url in the browser it is not opening inside the app and showing you your website in the browser basically showing the mobile view of your web app so you can see this website has come and all the tutorials which is uh which are in the website are also appearing and you can scroll infinitely but when you click the back button it goes the blank screen is go to the app where it is a blank screen so that's not what we desire so what we'll do is go back to our coding and above the load url we will use the webview dot we will write webview.setwebviewclient so this webview client takes care of the webview inside your app after this your app will not load the browser but inside the webview it will show the browser so this webview client is very useful write new webview client that's it now let us see what happens just run this right now and we will see the change so it is launched and you can see the app is so instead of browser earlier it is now opening inside the app webview client is able to handle the url and showing it inside your app and you can see we can scroll infinitely and all the things are coming to when we press on any block it goes to it it opens the new page but you can see some errors occurred my youtube video thumbnail it is not able to show and also the google ads are also not coming that's because we have not handled the javascript inside the website in our android studio also if you see when we when we press the back button instead of going back to the previous page it is closing the app itself that's also not we desire for that we will write web settings web settings equal to webview dot get settings and then we will write web settings dot set javascript enable true so once you do this your java will start coming and that means your ads and all your all the functionality we built in the javascript will be appearing nicely so let us run that and you will see the ads have started coming and and also when you click see in the next page also this which was coming error earlier now it has coming but still the problem persists that when we press the back button it is closing uh directly it is not going to the back page so because we are not configure the webview client properly so we have to add some more codes which are for basically configuring the webview client and handling the urls so what we'll do outside the oncreate we will create a private class let us given a mi web client extends webview client you will see the options inside that you will generate some override methods so search for the issued override url loading so that's it it will be paste it automatically and we will generate one more at the override method so go to generate and and on page we'll we will select on-page started and then the outside the in the main activity we will generate one override method which will be basically search for on back pressed when we select that the code appears and now we have to write the if webview dot is focused and so along with this condition additional condition webview dot can go back so if this both the conditions are true we write webview dot go back else we will retain this super dot on black pressed inside the else so that's it this completes the client and then run the project and let us see how it works so you will see the first page is coming as usual and all the ads are also coming that means java is working and when you press the one of the blog it opens the new page that also is okay when you press back you can see it comes to the previous page it doesn't closes so the back press is also handled properly so web client is fully configured so that's it friend i hope you must have liked this video if you learned something from this i request you to please like subscribe and comment thank you very much for watching this video

Channel: CodingTutorials

Views: 63,022

Keywords: how to convert a website into android app, website to app, URL to App, URL to Android App., Build your App, learn how to convert website into app, www to app, android studio tutorials, beginners tutorials, Android essentials, build app from web content, webview, WebView Client, website to Android App

Id: zu7P_1hY2NA

Length: 8min 43sec (523 seconds)

Published: Tue Jan 18 2022