ANDROID TUTORIAL # 1 - CREATING A SIMPLE FORM

Hello guys! Today we will start a new series of posts, where we will address the creation of mobile applications for Android applications . Unlike the other series, in this we will do something different. We will have a project that will be incremented with each post, adding new concepts and techniques.

How to create a virtual device and how to create a new project , we have already seen in previous posts. Then, create a new project called RestaurantList . The application name will be the Restaurant List and the activity name will be ListRestaurants . The package may be what you think is best.

For the tutorials, I'll use version 2.2 of Android, which runs on the vast majority of phones today. But feel free to use the version you want (there should not be any big differences).

When you finish creating the project, we will have our tree mounted, having as main files ListRestaurantes.java (our Activity) and main.xml (our layout file).

The first step is to adjust the layout of the application by creating a simple form. Open the main.xml file and switch to the editor. Now enter the following code:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

    <LinearLayout

        android:orientation="horizontal"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content">

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Nome:"/>

        <EditText android:id="@+id/nome"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"/>

    </LinearLayout>

    <LinearLayout

        android:orientation="horizontal"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content">

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="Endereço:"/>

        <EditText android:id="@+id/end"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"/>

    </LinearLayout>

    <Button android:id="@+id/salvar"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="Salvar"/>

</LinearLayout>

Let's look at the structure of the XML file. If you've ever messed with Swing in Java, you'll recognize how to structure the form. The XML file is organized into hierarchically distributed tags or elements , starting with a file descriptor. In the case of this XML, we indicate its version and the encoding used ( UTF-8 ).

Next, we have the beginning of the layout definition , with the adoption of LinearLayout . This layout is characterized by having the elements inserted one after the other (in this case, vertically , since we passed the vertical parameter in the attribute android: orientation ). When you reach the end of the "line" (screen), it starts a new line, or if possible, adjusts the elements so that they fit on the same line. Also, we have the androidparameters : layout_width and android: layout_height , which were configured with the fill_parent value. This parameter (used in several other points of the code) means that the size of this element will fit the size of the element immediately above it at the hierarchical level. In this case, since LinearLayout is the root element, it will fit the screen, which is the element above it.

Internally to this layout , we have 3 elements: 2 other LinearLayout and a Button . Each of these LinearLayout has a TextView (a kind of label ) and an EditText (a text input field). These layouts had the android attribute : layout_height assigned with wrap_content . This value indicates that the size of this element should fit the content assigned to it. Try to modify these parameters to see the result.

The TextView element has the android: text attribute , which indicates the text displayed by the label . In addition, its width and height attributes are set. In the case of EditText , we have the android: id attribute , which tells us what the element identifier is so we can manipulate it from the application (inside the Java file). In the case of the first field, @ + id / name indicates that the element will be referenced in the application by name name . In the second EditText , we set its name to end .

Finally, the Button has both the android: text element (indicating what will appear on the button) and the android: id element (in the example, set to save ).

In this first version of our project, as there is no logic, you do not need to modify the file ListaRestaurantes.java .

Let's run our app to see how it went. Right click on the project and select Run As -> Android Application . After a few seconds the emulator will open, the system loaded and the application installed (do not worry if it is delayed, it is normal). The application will look like this (varying slightly depending on the screen size set):