Android Application Development, COMP 10073
Mohawk College, Winter 2023
Layout Editor - Part I
Make sure you review the details for the Layout Editor on Android Studio web site.
[Link]
[Link]
Some important highlights will be mentioned here.
Using the instructions from the first lecture, create a project using the Empty
Activity template and set it up for API 30: Android 11.0 (R). Your Android Virtual
Device (AVD) should also be configured as an Android 11.0 device. The Empty
Activity template provides a collection of XML resources, configuration files, a
[Link] file, and some gradle build files.
Under resources click on the activity_main.xml file.
Select “BluePrint” – blue box above the eye. Use the “eye” tool to select “Show All
Constraints”. Use the blue box above the eye to select the blueprint view.
10073 - w23 Layout Editor / Welcome Name App 1/10
In the upper right corner of the editor, you are given the options code, split and
design. Select split and the layout editor will display the blueprint and the XML.
The following XML code comes with the Hello World Demo.
<?xml version="1.0" encoding="utf-8"?>
<[Link]
xmlns:android="[Link]
xmlns:app="[Link]
xmlns:tools="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</[Link]>
By default the text widget is centered. If you click on the springs that connect the
widget to the edges of the application you can delete them and the widget will
move to the upper right corner. You can also delete the XML layout_constraint
tags and get the same effect.
If you break the layout you can always revert to the original by replacing the old
XML commands. You can enter XML directly or copy and paste it from another
source. Assignments will sometimes include a partial XML layout.
10073 - w23 Layout Editor / Welcome Name App 2/10
Delete the text view widget. Select the Text Pallette and choose the Plain Text
widget and drag it to the design editor. The “Plain Text” widget is badly named,
this widget is used for text entry, we will need it for the first few assignment.
Initially it is unconstrained, add simple fixed constraints to the top and left sides.
The constraint widget in the attributes tool will allow you to enter specific numbers
if you like. This tool also shows the constraints of the widget size. The “>>”
indicates that the widget width and height are set to wrap_content.
10073 - w23 Layout Editor / Welcome Name App 3/10
EditText Example1
The following example can be used as a basis for the first lab, the code for the
example will be posted with the lecture. This app asks you to enter your name,
when you press the button it says “Welcome <name>”. We will develop an event
handler and write text to the GUI.
Using the instructions from the first lecture, create a project using the Empty
Activity template and set it up for API 30: Android 11.0 (R).
Add an EditText Widget, a TextView widget and a Button. Center each widget by
constraining it to its parent. Do this by clicking on the circular handle and dragging
the springs out from either side of the widget. This sets the horizontal constraints.
Constrain each widget vertically by using a fixed constraint. Connect each widget
to the one above it.
10073 - w23 Layout Editor / Welcome Name App 4/10
Modifying Widget Attributes
Click on the button and expand the declared attributes. Find the attribute named
“text”. Change the button text to read “Say Hello”.
Notice that Android Studio organizes attributes by listing first those that have been
declared, i.e. can be found in the XML file, those related to the layout, the most
common attributes, and finally a list of all possible attributes.
There are nearly one hundred attributes for the simple button. Usually the ones you
need will be at the top, but you can also search for them using the magnifying
glass.
Notice that there is also an attribute called onClick. We will modify this shortly so
that the button does something.
10073 - w23 Layout Editor / Welcome Name App 5/10
XML Layout
All of the details of the layout are encoded in the XML file. If you had any difficulty
using the layout editor you can copy and paste this code into the XML editor
window, and you will get the correct layout.
<?xml version="1.0" encoding="utf-8"?>
<[Link]
xmlns:android="[Link]
xmlns:app="[Link]
xmlns:tools="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<EditText
android:id="@+id/editTextTextPersonName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Name"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="TextView"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button" />
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="32dp"
android:text="Say Hello"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/editTextTextPersonName" />
</[Link]>
10073 - w23 Layout Editor / Welcome Name App 6/10
EditText and TextView and View Objects
[Link]
The View object Represents the basic building block for user interface
components. A View occupies a rectangular area on the screen and is responsible
for drawing and event handling. View is the base class for widgets, which are used
to create interactive UI components (buttons, text fields, etc.).
[Link]
The TextView object inherits all the methods of the View Object. It provides a
basic element for display to the user.
[Link]
The EditText object inherits the methods of the TextView object. It provides an
element that allows input.
findViewByID
[Link]
To get the references for these objects we will use “findViewById” and provide a
reference to our collection of resources. At the top of the attributes section in the
editor you will find an “id”, for example, the id set for our TextView widget that we
will use for output is specified in the XML file as:
<TextView
android:id="@+id/textView"
...
The following Java code declares a reference of type “TextView” and gets the
value for the reference from the resource id “[Link]” and then sets the value
of the text to the emtpy string.
TextView myOutput = findViewById([Link]);
[Link]("");
N.B. findViewById will return a null if there is something wrong with the resource
identifier.
We want to clear out the text when the activity starts, so add this code for both of
the text view widgets.
10073 - w23 Layout Editor / Welcome Name App 7/10
getText()
[Link]
We need to write a handler for our button, call it “doStuff”. Use findViewByID() to
look up the reference for the EditText widget. EditText has a method “getText()”
which returns an object of type “EDITABLE”. We need to convert this to something
we can use via “toString()”.
The full example code looks like this:
package [Link].wk2ex1;
/**
* Statement of Authorship goes here.
*/
import [Link];
import [Link];
import [Link];
import [Link];
import [Link];
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
[Link](savedInstanceState);
setContentView([Link].activity_main);
// Initialize the fields to blanks
EditText myInput = findViewById([Link]);
[Link]("");
TextView myOutput = findViewById([Link]);
[Link]("");
}
public void showWelcomeMsg(View view) {
// Read the Edit Field, get text string into variable
EditText myInput = findViewById([Link]);
String name = "Welcome " + [Link]().toString();
// Set the modified text string to the Text View on screen
TextView myOutput = findViewById([Link]);
[Link]( name );
}
}
10073 - w23 Layout Editor / Welcome Name App 8/10
Setting onClick
[Link]
Once you have written an
appropriate button handler you
will find the handler as a
selectable option in the drop
down menu for the “onClick”
attribute. Your handler must
return “void” and it must take a
single argument of type “View”.
Once the handler is setup you
should have a simple working
application which says
“Welcome <name>” whenever
you press the button.
These details should be enough to get you started with the first homework
assignment, which includes a few modifications to this example, and a more
complex layout.
10073 - w23 Layout Editor / Welcome Name App 9/10
Exporting Your Work, uploading to Canvas
When you are done, create a .zip file of the project using the option under
“File” --> “Export” --> “Export to Zip File...”
• DO NOT pick export Selection to HTML
• DO NOT use windows to compress the entire folder.
When you export the package using Android Studio it minimizes the package size
by stripping out unnecessary binary files.
The resulting .zip file should be about 100-250K.
Lab assignments will use the start of class as the Canvas due date. You are
expected to upload the exported .zip file to Canvas by the due date, and present
your demonstration that day. When you come to class you should be able to
download the .zip file from Canvas and correctly build it for your demonstration.
10073 - w23 Layout Editor / Welcome Name App 10/10