This week we will build an app has three buttons to launch our favourite websites.

• The app will consist of three buttons across the top. The buttons will launch the Google website, the YouTube website and our own Athenry CoderDojo website.
• We will also change the icon of the app from the default one supplied by App Inventor.

Getting started

Begin by dragging and dropping a HorizontalArrangement control from the Palette onto the screen. Rename this control to hsaButtons

Drag three buttons from the Palette and drop them onto the HorizontalArrangement control. Rename the buttons to btnGoogle, btnYouTube, btnCoderDojo. When dropping the buttons onto the HorizontalArrangement, try to ensure the buttons are overlapping. This will make sure they appear side by side.

Drag and drop a WebViewer control from the Palette onto the screen. Rename this control to wbvBrowser.

Creating the scripts

1. Click the Blocks button.
2. Select the btnGoogle Block.
3. Select the “when btnGoogle.Click do” script.
4. Select the wbvBrowser Block
5. Select the “call wbvBrowser.GoToUrl” script
6. Drag the “call wbvBrowser.GoToUrl” script and drop it into the “when btnGoogle.Click do” script.
7. Drag a blank Text block and drop it at the end of the “call wbvBrowser.GoToUrl” script.
8. In the blank Text Block type the full url of Google is http://www.google.ie
   1. Please remember to include the http://
9. Test your app using an emulator or a mobile device

Launching the other web sites

1. Repeat the steps above for the YouTube button and the CoderDojo button.
2. The full url for YouTube is http://www.youtube.com
3. The full url for the Athenry CoderDojo is https://cdathenry.wordpress.com

Changing the default icon

A number of web sites exist that allow you to use free icons. Today we will use http://www.iconarchive.com .

In this website you can search for your favourite icon.

• For App Inventor the recommended icon size is 48 pixels * 48 pixels.
• Save your favourite icon to your machine.
• In App Inventor click the Designer button.
• Upload the icon to your App Inventor project.
• Select the Screen1 component.
• Change the Icon property to the newly uploaded icon.

Please note: The new icon will only be visible when the app is installed on a mobile device.

Full steps are included in the following link

App Inventor Week 4 – FavouriteBrowser