## Android development requirements
To run, test and debug an Android project you create in Xojo requires that Google's Android Studio development tool be installed but you will not have to use it. If you have not yet downloaded and installed Android Studio yet, `do that now` before continuing with the QuickStart.
1. Click on Android to select it.
You see three fields that need values:
- **Application Name** will be the filename of the actual app file that you create.
- **Company Name** is the name of your company. You may choose to leave this blank.
- **Application Identifier** is a unique identifier for this app.
3. Enter `SimpleBrowser` as the Application Name.
4. Click **Create** to open the Workspace, the main Xojo window, where you will begin designing your app.
## Workspace
The Workspace opens with the default screen.
## Making the simple browser app
### Overview
A Xojo app consists of a collection of objects, called classes. Nearly everything in Xojo is a class, including screens and controls. In the SimpleBrowser project, you use the default Screen class to create your screen and you add controls (user interface classes) to the screen to create the design.
The app uses three controls:
- **TextField**: A TextField control is used to enter text. In this project, the URL to display is typed into a TextField at the top of the screen.
- **Button**: A Button is used to trigger an action. The user presses the button to load the web page at the URL into the HTML Viewer.
- **HTML Viewer**: An HTML Viewer is used to display a web page.
### Building the user interface
With Screen1 open in the Layout Editor, you are ready to start adding controls to the screen.
1. In the Library, click on the **TextField** icon and drag it to the top-left corner of the screen in the Layout Editor. As you get close to the edges of the screen, you will see alignment indicators that help you position the control.
2. In the Library, click on the **Button** icon and drag it to the top-right corner of the screen.
3. In the Library, click on the **HTML Viewer** icon and drag it to the middle of the screen. Resize the control (using the selection handles so that it fills the screen below the TextField and Button).
4. Resize the **TextField** so that it is larger. Click on it to show the selection handles. Click the center-right handle and drag it to the right until the alignment guides tell you it is close enough to the Button.
Your finished screen layout should look like this:
### Setting the properties
A property is a value of a class. Changing property values allows you to change the behavior of the class.
#### Inspector
The Inspector is used to change screen and control properties. It shares the same area on the right of the Workspace as the Library.
#### Setting the properties for the screen
1. In order to show the Inspector, click the Inspector button on the toolbar or press `⌘ I` (`Ctrl I` on Windows and Linux).
2. In the Layout Editor, click on the **Screen1** (not on any control) to select it. The Inspector now shows the properties for the screen.
3. In the Name field (located in the ID group), change the **name** from `Screen1` to `BrowserScreen`. Press `RETURN` to see the name change in the Navigator.
4. In the Title field, change the **name** to `SimpleBrowser`.
#### Setting the properties for the TextField
The TextField is where your user enters the URL they want to see in the browser.
1. In the Navigator, select the **TextField1** control on BrowserScreen. The Inspector changes to show the TextField properties.
2. Change the **Name** property from `TextField1` to `URLField`.
3. Now make changes to the locking so that the Text Field fills the space based upon the size of the screen. Click the **locks** so that top, left and right are locked and bottom is unlocked.
1. Change the **InputType** property to **URL**. This displays the special URL keyboard on the Android device when the user taps in the field.
2. Change the **Text** property to `https://wikipedia.org`.
#### Setting the properties for the button
When running the app, pressing the button displays the web page.
1. On BrowserScreen, select the **Button1** control. The Inspector changes to show the Button properties.
2. In the Name field, change the **name** from `Button1` to `ShowButton`.
3. Now you need to make changes to the locking so that the Button stays attached to the right side of the screen no matter how large or small the screen is. Click the **locks** so that top and right are locked and left and bottom are unlocked.
1. Give your button a caption by changing the **Caption** field from `Button` to `Show`.
#### Setting the properties for the HTML viewer
The last user interface change you need to make is for the HTML Viewer.
1. On BrowserScreen, select the **HTMLViewer1** control. The Inspector changes to show the HTML Viewer properties.
2. In the Name field, change the **name** from `HTMLViewer1` to `WebViewer`.
3. Finally, you need to make changes to the locking so that the HTML Viewer continues to fill the screen not matter its size. Click the **locks** so that top, bottom, left and right are locked.
### Adding code
Your app is almost complete. Now it is time to add the code that will tell the HTML Viewer (called WebViewer) the web page to display.
Follow these steps to add the code:
1. On BrowserScreen, double-click the **ShowButton** control. It's labelled "Show".
2. The Add Event Handler window appears. Event Handlers occur when the user initiates an action. In this case, when a user presses on a Button, your app runs any code in its Pressed event handler. Select **Pressed** from the Event Handler list and click **OK**. Notice the Navigator updates to show the Pressed event underneath the ShowButton control and the Code Editor displays.
3. Now you need to get the URL that the user typed. The value that a user types into a TextField is stored in the Text property of the TextField. Then you want to have the WebViewer display the web page. This is done by calling the LoadURL method of the HTML Viewer control and sending it the URL that the user typed. So, you need to add this code to the Code Editor. Start by clicking in **the white space below the Pressed event name** and then type this code (do type it rather than copy and pasting it):
``` xojo
WebViewer.LoadURL(URLField.Text)
```
That's it! Your first app is complete.
### Saving your work
Before you go any further, save your work:
1. Save the project by choosing **File \> Save As**.
2. Click **Save**.
#### Running your project
1. Click the **Run** button in Xojo to run the app in the Android Simulator. It may take a minute for the Android emulator to load.
2. Type a (**secure, https**) URL of your choice (or use the default) and click the **Show** button.
3. You will see the web page.
4. When you are finished experimenting with the Simple Browser app, you can quit the Android Simulator to return to Xojo.
## What's next
This QuickStart has introduced you to Xojo and showed you how to make a simple app. Next, try the `Android Tutorial` that walks you through building a Task Manager app.
For more details, view the Topics and API sections of the documentation.