Kotlin Project - Android WebView

Key Takeaways

hey guys welcome back to building projects with Kaitlyn my name is tensor today we're going to be building a basic Android webview application a webview is basically just an application that allows you to access a website and there are a lot of very nice webview applications that have been built over the years the other side however would be to use an API and then build out your own user interface rather than relying on the HTML at the web page to get started in Android studio you want to click start a new Android studio application and I'm using Android studio canary you can use Android studio as long as it's above 3.0 it should have this checkbox that says include Collins support our application name will be webview and then the company domain for me at least will be calmed tensor - programming you want to make sure that you click the include Collin support box down here because of course we're building this in cottoned so you just want to set the phone and tablet API I'm choosing API 22 you don't really have to worry about there where TV Android audio or Android things stuff all of that is for other things we're gonna hit next and then when we want to add an activity to mobile we're just going to add an empty activity and we want to change our activity name to splash screen activity and the layout name will also automatically change to activity splash screen a window will open like this and all of your Gradle scripts will run to initialize the application once your Gradle build finishes everything should work fine the first thing that we want to take a look at is our Android manifest XML file and the two major changes that we want to make to our manifest file are to add these two uses permission blocks so naturally because our application is built around opening up a web page we want to have access to the Internet and then the network state will be for error handling if the individual is not connected to Wi-Fi we'll be able to throw errors back and for now this is all we really want to do inside of the manifest file the next thing we want to do is set up our XML so here's our activity splash screen XML file this is the main opening layout and the way that we want this to work in particular is we want our splash screen to be something that sort of just kind of shows when the application is loading and then we want it to disappear and show the webview afterwards so by default you'll have this like textview in here just remove it and then for the rest of this you can just remove the bottom tag and put a forward slash into here so that this is now just one element and the rest of the default stuff for this constraint layout can be left alone we do want to create a new layout file however we right-click on layout then we click new layout resource file and I'm going to call this activity underscore web underscore view and we're going to use a constraint layout so just leave that as it is just hit OK and this will create it for you you want to click the text tab so that you're actually looking at the text and not the design in here we want to create our web view and we want to give it a width and a height of match parent we also want to add the XML tools import so just come up here inside of this element and type in tools and you should get this little autofill that says tools and s and if you hit tab or space and enter it will automatically import it for us we'll give the webview an ID you want to call this just web view then we want to set up a few other things so we want to use the constraint layout to our advantage and this will be the layout constraint bottom to bottom of more set this to parent then we also want constraint left to left of we'll also set this to parent and then we'll set right to right of and top to top of both of them to parent so these essentially allow us to stretch out the web view and have it cover the entire screen for us you can also make this one entire component so remove the other closing tag and just put a forward slash in here underneath of it we want to have an image view with a layout width of 120 DP and a layout high and 20 DP will give this an idea of loader image this will be an image that will pop up and bounce around while our webview gets loaded for our source for this image view I'm going to point it towards drawable backslash steam I brought in a steam dot PNG file so this is just the logo for the website that we're going to load which is called steam it if you're going to have a different website you can go and just use a Google search to find like a nice little logo now we also want to add these app layout constraints like we did with our webview and these will just kind of stretch things a tile to make them look proper I also want to add a few more attributes to the top so I'm just going to add Android background at Android color black and then we're going to add in the context and it's just going to be called the webview activity so you put dot and then the activity name which will be a webview activity and of course this will throw an error for now because we haven't created the webview activity let's jump back into our splash screen activity and build it out properly we have this on create method this is like the entry point for all Android applications when you click a button on an android app it will automatically pop up and this is the logic that runs when that happens on create we're calling super on create and then we're setting the content view to our layout activity splash screen which is that XML that we just had so we'll bring in timer this will come from Java util glob import and so timer dot schedule and I'll put in three thousand three seconds and then we want to create what's called an intent now intent is what you use to pass one activity to the next so in this case we're going to open up our webview activity which we still haven't created yet so we say Val intent equals intent and this will bring in Android Content intent also make sure that for schedule you bring in Kotlin dot concurrent schedule so our intent will point towards intent and inside of it we'll put in application context which is the context of this application and then we'll point towards the class that we're going to create which is called webview activity and we need to preface this with class Java then we want to actually start the tivity so we passed the intent to this function called start activity and then we have a little finish function to properly stop this timer when it finishes so now let's create our webview activity we want this to extend app compact activity so that it is a proper Android activity and this will bring in Android support version 7 Donna come packed activity then we want to create two private variables the first one will be evolve and this will be our URL so whichever website you want to embed in your web view so I'm pointing this towards steam and DICOM and you could point it towards whatever site that you want to embed in your web view our next variable will be called is already created and this will just be a boolean and we'll set it to false by default then we want to override our on create method so again this is the entry point for our application and because this is a new activity it also needs to have an on create method and inside of this we want to set the content view to our layout activity web view that way it's pointing towards the proper piece of XML and then we're gonna call a function called start loader anime and this will animate the image view so that image that we brought in now we want to set up our actual web view just type in web view and you should be able to just import Kotlin X dot Android dot synthetic mainactivity webview glob and this will actually bring in the component that we created inside of the XML so unlike with Java you don't actually have to build out a variable and then point it towards the XML item that you want so the first thing we want to do is set up settings javascript enable and we'll set this to true that way we have JavaScript running on our web page then we also don't want the user to zoom in and out of our web page so we'll set up web view settings set support zoom and we'll set this to false then we want to setup the web view client so that we can gain access to it and modify some of the functionality we say web view dot web view client equals object which extends the web view client so the larger web view client class remember objects in Kotlin are singleton this is the object that is essentially running when our webview is open the override on page finish and we're gonna call a function that will create called end loader animate so we have a start loader enemy and then we have n loader anim and this is mainly just for our animated icon we also want to override on the received error so that we can properly do some error handling and inside of this override it function we're going to call our end loader animate and then we'll call it another function we're going to create called show error dialog and we'll pass in error and we're going to pass in the message which will say no internet connection please check your connection and then we want to reference this web activities so finally after our webview client object we just want to come down here and call webview download URL on our URL this will actually load up the URL alright so now let's create these functions that we've been looking at so let's start with start loader animate and inside of this function we want to create a object most let this equal to object animator and this will extend animation make sure to bring in Android view we're going to override the applied transformation function so that we can apply our own transformation to the logo so we want our icon to sort of zoom in and zoom out third height which will be 170 new height which will be equal to start height times start height plus 40 times our time so this is the actual time that's passed by that gets passed into this function and then we'll convert all this into an integer and that will make it look smoother as it moves up and down like with our web view we can just bring in our loader image image view we'll set the height so the layout params height equal to our new height we'll make sure it gets constantly changed by calling request layout on our loader image we also want to override the function will change bounds and this returns a boolean we're just going to force it to return true always and then below all of this stuff so below the object we'll call object dot animator repeat count we'll set this equal to negative 1 and then we'll call object animator repeat mode and we'll set this equal to value Reverb will give it a duration of one second which is 1,000 milliseconds and then will Karl's start animation on loader image with our object animator inside of it is logo bouncing back and forth will be repeated multiple times during the three seconds that the page is being loaded behind it now we want to create our end loader animate function inside of this we just want to call loader image clear animation then we want to clear the visibility of this image loader and just remove it from the view now we want to create our private fun show error dialog function and this function will take in title which is a string message which is also string and then the context which is this that we've passed in inside of this function we're going to create a dialog box so when the user hits the error we'll get this dialog box and then they'll have various options that they can take so first we want to instantiate the dialogue variable by creating an alert dialog with a Dildar and setting in our context and then we're gonna say dialog set title to our title and then we're gonna set the message to our message then we want to create three buttons first one's a negative button and the negative button is typically used when you want the user to be able to quit out of the application so that's exactly what we're doing here the words on the button will be canceled and this should be capital cancel and we're passing in a closure with two anonymous variables and this is referencing this web activity and then we're calling the finish function which will quit out of the application dialog set neutral button this will be for settings and in this one we're calling start activity we're passing in a new intent with settings action settings and what this will do is it will open up the settings menu to the Wi-Fi or data menu and it allow the user to try to find a new Wi-Fi network and then our positive button which is called retry will actually restart the webview activity so it will recreate it and it will then reload the web page you have this web activity dot recreate to do that and then of course we want to show this dialog box so we call dialog create dot show all right so now we have most of this built we just need to add a few more things specifically we want to over our own resume method this is the life cycle that gets called when you exit out of an application but you don't close it and then you resume it inside of this we just want an if statement this will check to see if is already created is true and will check to see if not is network available which is a function that will create and then what will do inside of this is will set is already created to false and we'll call our show arrow dialog and we'll pass an error no internet connection please check your internet connection and this add web activity as our context then we want to override the function on key down so this checks to see if the user clicks a key so basically what we're doing here is we're checking to see if the key code is key throw it back so if the user hits the back button and the webview can go backwards meaning we can go backwards in the quest cycle so like for instance if we load up steam it and then we go to another page then we'll be able to go back but if we've just loaded up steam it then we can't go back so we want to make sure that we can go backwards and then if we can go back then we'll just call webview go back and we'll return true otherwise we'll just return super onkeydown key code with event so now all we need to do is create our is network of an edible function this will just output a boolean so inside of this function we want to create a variable called connection manager and we bind this to this at web activity dot system service and then we use the contacts connectivity service and then we want to cast this as a connectivity manager we just basically create a network info variable which is just our connection manager dot active network info so this is just the info of whether or not the Wi-Fi is working properly or the device is connected to the Internet and then we just return whether or not that is not equal to null meaning it is connected and we check to see if Network info dot is connected or connecting meaning if the application is trying to connect to the internet or it is connected to the internet then it will return as true and that's all we have to do for this activity there is one more thing that we do need to do however before we actually run this application and let's go back into our manifest and we want to add an activity to our manifest after our other activity that points to our web View activity so basically we just want to tell the Android application that there are two activities in here rather than just one so we have our splash screen and then our webview the way I'm personally going to run this is through the genymotion android emulator and the reason I'm using this is because I am running an AMD CPU on my computer if you're running Intel then I recommend you use the emulator that's built into Android studio because it's a lot faster genymotion is good if you do have an and the processor and you don't want to have to worry about the slow startup speeds of the normal emulator that's built into Android studio alright so this is open and now we can run our application in it so I hit the play button and then I click any motion Google pixel and great or we'll run down here and then we just have to wait for the application to build and install on our virtual device alright so our application has installed and you can see here we have our logo and it doesn't seem to be animated properly so there is one thing that we missed and inside of our Start loader animate function inside of the object animation we need to override the function initialize and that way the animation will actually run properly and even after you do that it will give you a little warning and say that it's a redundant override but we still need to override it and now you can see it opens up and you can see the icon goes back and forth and back and forth and I know it lags a little because this is extremely slow compared to an actual native Android application here's this team at web view you can see that we can scroll through it like we would with any other web page we can do things like look at the tags I can click on the post and it will load it up for us and since we've moved forward in the application we can hit the back button and this will automatically take us backwards now I've put us into airplane mode so that we can see how our error handling works and now you can see this dialog box pops up it says error No connection please check your connection if we clicked settings it would open up these settings for the Android application if we click cancel it'll just cancel and if we click retry it will retry to load it and you'll see here we get the dialog box again we hit cancel it'll close out of the application and if we hit settings you'll see here that it will open up our Android settings alright guys well I hope you enjoyed this tutorial if you did feel free to like and subscribe if you have any questions or comments feel free to leave them in the comment box below and if you disliked it then by all means download it as much as you like have a good day