Creating Layouts

Last week we completed our second "proof of concepts" for mobile programming: layouts. The least I can say about it is that it was a nice way to begin to delve into Android programming and get a feel for the basics of UI functioning. We were tasked with creating a few different layouts as examples (just dummies) to show that we are able to do so.

To begin, you must first create a new XML and Java file for your layout. Your new Java files will be located under src\packagename\appname\file.java and your XML will be located under your res\layout\file.xml. These files can be started out the same as the default files that are loaded with each new application, which are located under the same folders as the other two specified before. The Java file will be the name of your application, and the XML will be under the name main.xml (this refers to your main/home layout for the app).

I started by just creating a simple home screen that asked what type of layout you'd like to use: linear, table, or relative layouts. This screen was made, itself, using a linear layout.

Linear Layout: organizes controls linearly, in either a horizontal or vertical fashion. When the layout's orientation is set to vertical, all child controls within it are organized in a single column; when the layout's orientation is set to horizontal, all child controls within it are organized in a single row.
My linear layout is a very basic user input of a username and password. After the user has clicked "Log In", it will prompt them with a "Welcome" message (again this is just a dummy, doesn't actually log into anything).

Table Layout: a grid of made up of rows and columns, where a cell can display a view control.
My table layout, again, is just a very basic user input and again prompts the user with a "Welcome" message when they hit the login button.

One issue I continually ran into with the table layout, and still am, is getting things to align correctly. The columns expand dynamically to the sizes they need to be, but will push others away if needed. An example of what I'm talking about is when I click the "Log In" button, the "Welcome" message will push the edit boxes off of the screen partially. Hoping I can find a fix for this soon (or just simply avoid a table layout in this case).

Relative Layout: it organizes controls relative to one another, or to the parent control itself.
Finally, the relative layout was the simplest to use in terms of being user-friendly. As defined before, it allows the author to organize everything relative to other controls/widgets on the screen. This was much easier because I could simply tell the XML code that I wanted to display a TextView below my "Log In" button and how far away I wanted it to be.

After I had all of my layouts created, the next step was to create new activities for the app to be able to load these different layouts when I asked for them. As defined by the Android Developers website, "An activity is a single, focused thing that the user can do." To do this, you must add each new layout class to be loaded by the Android Manifest file. An issue that took me a few hours to notice about this was getting my different activities to load. This was due to not adding them to the manifest file to begin with, and shortly after they
were added, and a few debugs, everything was running as intended.

We are continuing to mess with basic UI functions for this week, and not much should change.

Source code for my "Layouts" app can be found here!