Android Browser – WebView – Complete Tutorial Series Part 1 – Creating WebView Layout & Back Button


Hi guys what’s going on welcome back to
this brand new Android studio tutorial and today in this video I’m gonna
quickly show you that how to make an Android browser so as you can see this
is a sample app which is called above you master and as you can see inside the
app there is a progress bar and next to that we have an image view and the top
we have a action bar which shows which update the title according to the page
that is open inside the webview which is actually this area and as you can see
next to the title we have a back button we also have a forward button and we
have a couple of the menus so now we have the Google home page which I’m
going to search it and you know I’m simply searching for my name itself so
subit speakeasy so when I’m selecting this one as you can see now the progress
bar is moving from the zero to hundred also the this image view is updated with
Google favicon which is this logo and our and also we can see the action bar
is updated with the webview title we how the back button we have the forward
button and as you might know the forward button will not be working because we
are at the top-level page so when I click the forward button there’s nothing
you can see can’t go further there is a message and then I just go back you can
see now it can go back and at this point we can just go forward and it’s working
perfect so we are going to create an android app like this and as you can see
now we have a pop-up message says which is a dialogue and it says that you want
to exit the app or you want to stay in the app so when you just click on the
stay then you will be inside the app itself otherwise if you just click on
the exit me then it will be going to close the app so that’s our idea so one
thing I want to mention you guys that the back button which is the strong
Android back button is not only working for exceeding the app it can also act as
this back button so I’m in the second page when I click the back button it is
going to the previous page and once again when I press the back button then
it will be going to show this popup message so in this video we are going to
just create Android app like this so without any
further ado let’s get started by just going to the Android studio also I have
a sample project which is just started right now which is called as super
browser Pro so at this time I’m actually using a Dracula background in my Android
studio which I want to change into in delete a theme because I want to make it
more much very clear for you guys so I’m switching back into a deleted theme now
clicking on the plates taking away the time innovate slaughter now we have a
good old Android studio now what we need to do is that first off we have a you
know we have a layout which has nothing just going to the text we actually have
a constrained layout which is the default layout when you shot in your
Android studio project now I want to change this into linear layout so I’m
changing it into linear layout and keep in mind guys whenever you are changing
your layer into linear layer or if you’re adding a new layout which is
linear then at that case and if you’re adding multiple items inside the linear
layer then you must how to add the orientation as attribute inside the
linear layer so I’m just adding a orientation and in this case I want to
make it as political because I want to show items one by one so I’m just adding
it as vertical now removing this textview what we need is like the app we
have a progress bar and next to that we have a image view so I’m just going to
create another linear layout and a linear layout match parent and the
height can be around 30 DP so it’s all up to you like the design of the Android
app so I’m actually doing this tutorial and they for that purpose I’m just using
you know a sample layer and if you have any kind of good idea then you can go
with your idea so I want just you know make this into my parent both case and
after that maybe like yeah I just added child because we need a horizontal so
I’m actually using this bed base widget I’ve compact then progress bar
horizontal and next to there we hit near image views of the spreading
view and match parent and now as you can see it says that we need to add
orientation so what we need to do is just add orientation that is horizontal
in this case because we need the widgets one next to do the another so when
you’re using the linear layout you will get a facility to add weight so that is
layered weight and which I want to use in this case as 0.1 and for the image
view I want to switch it into 0.9 so now as you can see we have a view like this
it is divided into a different part according to the way that we have given
in the both case now I’m just going to add a sample image so that can be the
launcher which is the app icon now we have it so the next thing is that
outside this linear layer and inside the main linear layer I’m just going to
create a web view that is masked parent and I don’t need this tag so I’m just
closing it here and finally we need to add the ID for each of the items on my
web view and this image view can be ID then my image view and in this case I
want to add it as my progress but now we have it and the next thing is that we
have to declare all these items inside the main activity which I’m just going
to add outside this oncreate method so first we have the progress bar and that
is you know super just giving a sample name super progress bar now we have to
declare these these three things inside that one create method so first we have
the super then progress bar equal to then find view by ID order ID dot my
progress bar so I’m just going to skip this part
okay now I have declared the theory of the item inside the one create method so
finally what I need to do is that it’s not final but at the next point is that
we how to add progress bar so progress well then we have to set the maximum so
that can be hundred so it will be starting from zero and ending in the
hundreds 100% days so next what we need to do is that we have the image view we
have the book view so the next thing is that we have to create how to add the
web view so what view then first we need to add
the loaded URL in my case I want to just give it as something like you know HTTP
then www.google.com kind of okay now it’s google.com so when the app is going
to start then it will be going to load Google com
so after that we need to add the book view then it’s this time you will have
to enable that JavaScript so get settings then set an apple set
javascript an apple that is true so the JavaScript is kind of a must must thing
that you need to add inside the webview because most of upset these days are
using javascript for loading some some sort of items and widgets and thereby
our view should be able to load those condense so we need to set the
JavaScript enabled next we have a superb review that and this time most entire
most in case we uses that said web view client and in this case we are going to
use said Bob your client and at the same time we are going to also use this web
chrome client so first off I’m going to use the chrome client which is a really
good method which can help to introduce load other features so chrome client
it’s hard to pronounce now I’m just opening between these two you know you
see this between these two brackets I’m going to add a curly braces so that is
like this and now inside that what I’m gonna do is that I’m simply pressing
ctrl or on the keyboard so it will be like this
and when I press the control or as you can see how a small pop-up window on my
screen and in the window I have these three methods which I need the one
progress changer on received title and one receiver icon and in case if you
can’t see these methods then you can simply search it on the keyboard just
simply press that so receiver I can things like that so once you do once you
go to my test then what you need to do is that press the control on the
keyboard and by keep pressing the control you just have to select it three
of them and now you can leave the control and you know just after
selecting three of them just click on the okay now it will bring those three
methods inside the web you client web chrome Kline I mean now as you can see
we have three method one is the one progress changer which has book viewed
and view and next we have the new progress which is an integer so what
we’re going to do is that we need to get the progress from this web from client
so in today we are going to get the progress into the progress bar so we
have the super then progress bar then set progress at this time we have new
progress which is a variable name which is in the type and that’s it now next we
have the string title which is going to be the title for the action bar now
action bar can be accessed through the get support action bar then set title
and in this case you just need to know you just you can directly add the string
now it is subtitle and finally we have the bitmap I can which is the favicon of
the website or the web page now I want to get into my image view so we have a
super image view then set image bitmap and that is going to be icon which is
this variable name of the one receiver matter now we have it now everything is
done and the next thing is that we have to just go to the manifest and above the
permission for using internet so that can be Internet
and yeah okay now we have given the permission and the final thing is that
we have to add a couple of the things for a you know and kind of again before
that I’m just going to run the app and I’m pretty sure that it will not going
to run because we haven’t added a single line we have it at one more line in this
code and that line is really kind of significant for running the webpage
inside the webview so now when the app is going to get started I’m pretty sure
that it will be going to open the URL inside the default browser and in my
case the default browser is you know the Google Chrome so this is the google
chrome and how which is this is what I said as a default browser and I will
after opening the app I will be also tell you I’ll be also explaining the
reason why the app is going to start inside the way that you are at least
going to start inside the Chrome browser instead of this instead of our Android
application so let’s wait a couple seconds and do this get done so right
now it’s completed building process so hoping that it will going to start
really soon okay now it’s installing the epic game so let’s wait and now it’s
opening and as you can see it loader and blam it it’s actually opening it inside
the Chrome browser okay now it’s time to fix this error so the first thing is
that we just go into back now as you can see now we just added the web chrome
client matter but we forgot to add one thing that is the super then webview
then said webview client and new webview client so when you add this line which
it represent that if you just give the permission to just open that URL inside
W itself and while using this method then it is just is this just enabling a
lot of the features inside your web view now when we are running the app and then
it’s pretty sure that it will be going to you know start within the app itself
so let’s face and it’s now as you can see it’s opening
okay now the next thing is that finally in this video on what I’m gonna do is
I’m simply showing you guys that how to go back so before that I’m going to
search my name now I’m going to search it and now I’m in the second page and as
you can see everything is updating and now when I just go back you can see it
is called it’s going to close the application so instead of that we need
to open we just need to go to the previous page of the book view so for
that what I’m going to do is that simply at this point you know
one back press set method which is the stock Android matter I want to call it
like that now inside the one back processor we have to add a if statement
and check that if the webview can go back so we can simply say superb view
then don’t can go back and if it can go back then it should go back and it can
be given like superb view then go back so in case it can’t go back then we just
need to close the application so we can simply call the finish method which is
going to destroy that activity which is the main activity and as we only have a
single activity then it will be going to close the application now let’s go and
try that up again well you know it’s running and as you can see now it’s
loading the page let’s wait unlit again and let’s get done again now it’s Google
what I’m going to do is I’m simply searching like you know sabias pkc and
selecting this wrong now I’m just going to you know the next page which is the
YouTube my youtube channel now in the YouTube channel and we are three pages
away or maybe like two pages away from the initial page now I’m just going to
press the back button oh it’s just still closing the application so what we need
to do is that we just need to run the app you know normal run instead of this
instant run and let’s try this time searching same thing just going to my
youtube channel okay now this time everything is then we
have the activity we have the action bar which shows the title we have fully
loaded a progress bar next to that we have a Philly con now I’m going to press
the back button still closing the application so we need to check so then
should go back all the way oh okay the problem is as you can see I’m actually
so much yeah disappointing that I’d having added this else now it’s okay
maybe like while you’re watching this video you might be wondering that why am
I actually not going to add this else now I just didn’t know it said that now
it will be going to work perfect I’m pretty sure now let’s wait until it get
done okay so doing the same thing without any explanation or come on I
don’t know sometimes my internet is so into my channel now we are two pages
away going back laments again as you can see it’s fucking perfect just going to
the home page now we are in the home page so it’s working perfect than we
expected now when I just press it again it will be going to destroy that
activity which is the main activity and as we only have a single activity this
is going to close the application so that’s it for this video and the next
video maybe like we are going to defend the action bar item like in this
application as you can see we have the action bar then there is a menu there is
a forward menu then we have a couple other menus so we are going to add these
things into our Android app and also we will be adding this dialogue in the next
video so stay tuned as always thanks for watching and peace out
you

87 thoughts on “Android Browser – WebView – Complete Tutorial Series Part 1 – Creating WebView Layout & Back Button

  1. Very very very nice video

    Bhai aap se bohat kuch seekh ne ko milta hai or mai bohat shok se aap ki video daikhta hun

    Bhai kabhi kabhi kuch error aa jate hain to kia aap whastaaps pe baat kar skte hai

    My no. 03034001533

    Aap ko pic share karna chahta hun jis main error aa te hain

  2. Create more features like multi-tab, bookmarks on home page, option to set as default browser so that it can load url came from other apps.

  3. Hi sir how are you?
    Your early reply is so impressive,

    I want to request you please make some toturial on live cricket scores app! Please gave toturial not share any link other website,
    Kindly help?

  4. As always one of the bests programing YouTube teaching styles! Congratulations bro, soon you will reach 20k that's nice success! Also thank you for these series!

  5. Can you please post the source code. It will be much easier and error free to implement. The link for website keeps on redirecting to your youtube channel. Kindly fix that also.

  6. I'm looking for some tutorial on how to upload an image (it's the profile picture of my user), in Json and php, to upload it to ftp …. upload the image to the ftp and to the mysql table just the image path, but I do not find anything in kotlin even on the web … will you have any tutorial on it? Thank you!!! I love your videos!

  7. Hi Sabith… I have another question. Can you please tell me how can i add zoom in and zoom out buttons or enable pinch to zoom in webview because sometimes the websites need to be zoomed in.

  8. hi i follow your tutorial but i have problem ;geolocation is not working;can you please do a tutorial how it can work with html5 geolocation

  9. please make a webservices tutorial with retrofit mean how can retrieve song in recycleview from a rest api…

  10. onLoadUrl me agar main http:// sirf de kar url de raha hun to error de raha h please help me

    maine jo website banaya h abhi usme ssl nahi laga hua h please help bro as soon as possible

  11. Why pop-ups do not appear inside a webview such as windows printing and downloads.
    I use the link within the app do not show these windows within the app.
    But when using the link in a normal condenser outside the application appear with me without problems

  12. Great tutorial. I have followed your tutorial and integrated olx.in to webview. Site loads fine in webview. But photos i.e file input buttons in olx.in website not working no action. Kindly can you let me know what to do. Is there any webview settings. Thanks

  13. hi mr sabith, im tryin to rebuild this web view from your source code for education purpose, but its stuck when playin video online, i think this app can't play video , or there is need you "touch"

  14. Created app with the above tutorial. .. it installed but it won't launch the main activity and force close every time.. I'm running latest android version 9.0 (pie).. please help..

  15. Please help. Following your tutorial. Made a webview with local html page with JavaScript.
    I am saving a variable in a cookie. How can I access that cookie to write it to a text file locally in android? I don't want to use nodejs to write it to the file.

  16. great tut but i get error: incompatible types: view cannot be converted to ProgressBar that error i have for image view and webview asswel can you help??

Leave a Reply

Your email address will not be published. Required fields are marked *