Build an Android web browser app with David Briddock
Over the last few issues, we’ve used App Inventor 2 (AI2) to build a useful timer and a motion-activated dice shaker.
This time, we’re going to build a fully functional web browser, and it’s much easierthan you might think.
Remember, all you’ll need to play along is a Windows/Mac/Linux PC, a web browser and a Google account. Ideally you’ll also have an Android smartphone or tablet, but even this isn’t essential.
What We’ll Learn
We’ll need to use a horizontal layout component again, but this time it will host four separate components.
In addition, we’ll introduce the purposebuilt and easy-to-use web viewer component.
Starting AI2
In your browser, navigate to the AI2 home page (ai2.appinventor.mit.edu) and sign in with your Google account.
We need a new project, so in the Projects menu select the ‘Start new project’ option and give it a meaningful name, such as ‘MMBrowser’.
Screen Properties
We’re automatically placed in Designer View mode. Notice there’s already a component called ‘Screen1’. We’ll drag and drop the other components onto this screen.
In the right-hand Properties panel, ensure the AppName is set to ‘MMBrowser’, then set the Title to ‘MM Browser’ and the BackgroundColor to dark grey. Lastly, set the ScreenOrientation to landscape, which is more appropriate for a browser.
Now we’ll add some screen components.
Creating A Header
Now let’s create a web browser like header. As this header contains multiple components, we’ll use a layout. Over in the left-hand Palette panel, open the Layout group and grab a HorizontalArrangement component. Drag and drop it towards the top of the Screen1 area. A blue bar appears to indicate its drop location.
With the HorizontalArrangement1 component selected in the Properties panel, set the Width to the ‘Fill parent...’ option from the pop-up list.
Next select a Button component from the User Interface group and drop it onto the left-hand side of the horizontal layout area. Rename this button to ‘BackButton’, then set its Text property to the ‘<’ character.
Grab another button and place it just to the right of the BackButton. Rename this button to ‘ForwardButton’, then set its Text property to the ‘>’ character.
Now grab a TextBox from the User Interface group and drop it next to the ForwardButton. This will be our web address input field.
The final header element is another button component dropped to the right of the TextBox1 component. Rename this button to ‘GoButton’ and set the Text property to ‘Go’.
Finally, select TextBox1 in the Components panel and set the Width property to the ‘Fill parent...’ value.
The WebViewer
The remainder of the screen is dedicated to displaying web pages. Communicating with the internet, downloading pages, then decoding the HTML, CSS and JavaScript code isn’t straightforward. Fortunately, we don’t have to do any of this ourselves.
Instead we can just use the purposebuilt WebViewer, which already has all this behaviour. Grab a WebViewer component from the User Interface group and drop it underneath the header’s horizontal layout.
With WebViewer1 selected in the Properties panel, set both the Height and Width properties to the ‘Fill parent...’ value.
App Start Code
Now it’s time to start coding, so click on the Blocks View button located on the green bar.
When the app starts, we want to load the home web page. Over in the lefthand Blocks panel, click on the Screen1 component, grab a brown ‘when Screen1. Initialize’ block and drop it into the Viewer panel’s coding area.
To set the inner ‘do’ behaviour, go back to the Blocks panel, select WebViewer1 and grab the purple ‘call WebViewer1.GoToUrl’ block. Snap this inside the brown block.
Notice this purple block requires a single ‘url’ value to be set. We can do this with a simple text string block from the Text group. Grab one and snap it next to ‘url’, then enter a valid web URL string.
Button Behaviour
Now to define what happens when we click on the back, forward and go buttons, located in the header. Once again, the flexibility of the WebViewer component makes this a straightforward task.
In the Blocks panel, click on the BackButton component, grab a brown ‘when BackButton.Click’ block and drop it into the coding area. Now repeat this process for the ‘when ForwardButton.Click’ and the ‘when GoButton.Click’ blocks.
The inner ‘do’ space for the BackButton is populated with a single purple ‘call WebViewer1.GoBack’ block from the WebViewer1 component. Snap it inside the brown block.
It’s a similar story with the ForwardButton, as once again we only need a single block. This time it’s a purple ‘call WebViewer1.GoForward’ block from the WebViewer1 component.
Finally, we come to the GoButton. For this grab a purple ‘call WebViewer1.GoToUrl’ block, just like the one we used inside the Screen1.Initialize event block.
As we now know, this block requires a ‘url’ value. However, this time we want to use the text string associated with the TextBox1 component, so from the TextBox1, grab the light green ‘TextBox1.Text’ block and snap it next to the ‘url’ tag.
And that’s the coding done. Ensure the warning and error counts in the bottom-left are both zero, then carefully check your code against the Blocks View image.
Testing
We can test our app using the AI2 Emulator. However, you’ll notice that it doesn’t take account of the landscape orientation. A better option is to use the AI Companion App installed on an Android device and the Connect menu (as we discussed earlier in the series).
Going Further
One simple change would be to set the Image properties on the BackButton and ForwardButton. Any suitable PChosted image file will work fine. A more challenging option would be to add other buttons that call other WebViewer1 functionality, such as clearing the page history or web cache.
And if you switch on the WebViewer1 property called UsesLocation, the device’s location sensor is involved when using mapping and other geo-location websites.
Next time, we’ll build a pixel density calculator based on a pixels-per-inch (PPI) formula.