Learning Android in 30 Days. Tutorial 3 of 30: Create the GUI. Pt1

Go back to previous tutorial.

On our last tutorial, we figured out how to add elements (from now on widgets) to the layout using the pallete and the XML code, now, we are going to take a deeper view in layouts and how to arrange widgets inside them. We will also learn how to change some fundamental properties using Java so the widgets have functionalities.

When we are designing a layout, we have to think in 2 separate concepts; in one hand we have all those widgets that will remain static the entire app and those that will change their value depending on some other factors. For the last ones, we will use Java code to change the display values like the text, the image related to the weather condition and so on.

Let's start adding the skeleton of the layout. We will use a LinearLayout as root element so we can add widgets easier. We will use a new property that is only usable for LinearLayouts called orientation.


The orientation defines if the widgets are going to be aligned in columns (horizontal) or in lines (vertical). In this case we will set the orientation as vertical.

Now that our widgets will arrange vertically let's add a new property but this time we will add it to the TextView that we left from the previous tutorial. The property layout_gravity changes the alignment of the widget that implements it. You can choose from many values but now we will use center_horizontal which allows the widget to align at the center of the width of the holding element; in this case the LinearLayout.


You can go now and check the preview and see how the text sits at the middle of the layout.

The TextView aligns depending on the gravity.

Since this widget will display the date, the tiny size of the text won't look well. The textSize property is used to define the size of the text and it indicates that will use sp as a measure. The sp indicates that is measured for text so Android will fit the size accordingly for the screen size. Lets set bigger text size.


It looks better but now we will delete its contents so it doesn't say Hello World. To change that you can just erase the property text from the TextView in the XML code and set the date like "28 04 2016".

Wait a moment. ¿How can we display the date of every day in XML?

We can't. The XML code remains static and only Java can change it after it was created, for example, if you want to put a label that will stay the same until the end of times no matter what, you can just simply use a static value like this Hello World! message. But if this value will change depending on the execution of an event or a condition then we will have to do it in the Java code.

Since this date will change everyday, we wont be using the text property here, so let's erase completely the property from the XML code. Now lets prepare to convert this XML TextView into a Java TextView with the id property.

The id property allows to identify the widget as a unique element in the layout, there can't be 2 widgets with the same id in the same layout but there could be 2 likewise ids in different layouts. In the XML code you will find the property id for your TextView with some value like this: @+id/textView. This is very hard to remember so lets use a new id: @+id/txt_date


Open the navigation bar at your left in Android Studio, you can do it by pressing <Alt+1>. You will see a blue package named java. Expand it and open the package with no test on it (Altough it would be great to perform test, we will not cover android tests units in this tutorial). Open the only Java Class there. If you followed the tutorial you would see HomeActivity.

Open HomeActiviy.

You will be able to see a different view. In this case the view changes to read Java code. Although there is not too much to see, this is where the gears spin giving life to our app and all of the functionalities.

Inside onCreate you will see two expressions: super and setContentView. Since this is not a Java tutorial we will not talk about the super calling. Instead we will focus on the Android Development Kit methods like setContentView; what this method does is to "paint" the screen with the resource or layout given. After it gets painted there is nothing else so we will begin by adding to the Java code the TextView object.


Now maybe Android Studio highlighted your first error by coloring some of the code you just wrote red. To see what's going on just hover the piece of red code with your mouse.

Cannot resolve symbol.

This usually means that Android Studio doesn't know what are you talking about when you say TextView. This a regular and very common thing to fix since you are working in java; the way to fix it is to click over the error and hitting <Alt+Enter> when the blue hint shows up.

Android Studio thinks that this could be the solution.

Once it's done, the error is gone.

But what happened? Do we have to do this always?

In Java there are thousands of Classes defined. Think like a toolbox to build a house. There are millions of tools that you will need but if you are setting the windows is most likely that you will not need a demolition hammer. Instead we import the tools that we need for each class. In this case we imported the TextView class for our HomeActivity. If we were to use another TextView we won't need to import it again but if we were to use a different tool we would have to import it.


As the code suggest you can also import a Class if you know the package. But let's make use of Android Studio powerful prediction abilities.

Once that our code is error free let's go back to the textDate object and lets change the value for the date.


Now let's run the app so we are sure it works as we planned.

The TextView now displays the current date.

The bell rings.

We learned how to grab widgets in our XML and put them in our Java Code so we can alter some of their values accordingly to the execution of certain conditions.

We also figured how to import Classes using Android Studio's help.

Now that our application is starting to move forward to our goal, we can move faster every time. For now check this tutorial if you want to give the date a more appropriate format.

Don't miss the next chapter with more widgets and more Java code.

Thank you for reading.