The GUI of this basic application consists of 3 different screens: Activity Main (to login), Register (to register) and Main (to see the distance to your friends).

To develop a GUI on android two different things have to be outlined. First, we will have a .XML file where we will create the graphics, that’s what it will be explained along this article. Second, we will have to insert into our Android classes the respective listeners in order to get the values of the different fields, explained here.

Activity Main or Login Screen

This is the first screen that we see when openning the application:

Here is going to be explained how to program each element in an Android XML

android:layout_centerHorizontal=”true” />

This TextView is the LOGIN text displayed in the upside center of the screen.

The android: layout_width/height = “wrap_content” is more or less equivalent to enable autosize property in width and height.

The android:text is just what we want to be appeared on the TextView in our case: “LOGIN”.

The android:id is the the identifier that will permit us to access from our android code to the values and properties of the XML fields, in this case to change the text, get the content,…

The android:textcolor allows to choose the color of the font.

The android:textsize allows to choose the size of the font.

The android:layout_centerHorizontal allows to center the “LOGIN” TextView horizontally in the middle of the screen.