Download Building a Simple UI

ELET4133: Embedded Systems
Topic 4
Building a Simple User Interface
Agenda
• We will begin a new App
– This presentation follows the Android Developer
tutorial called Building a Simple User Interface
• http://developer.android.com/training/basics/firstap
p/building-ui.html
– We will be introduced to some basic XML
•
•
•
•
•
9/27/2013
Create a Layout
Create Text Fields
Create a Button
Create String Resources
Create and compare Layout and Object attributes
2
Views and ViewGroups
• Views and ViewGroups are Java objects
(containers) which are used to build a GUI for
an Android App1
• A View is a type (a subclass) of a Java Object
– An Object is a primitive class of Java
– Everything is an Object (a subclass of Object)
– Requirement: when new classes are introduced
(such as View), go to the Android API and study
what they are
9/27/2013
1: http://developer.android.com/training/basics/firstapp/building-ui.html
3
Views and ViewGroups
• Views2:
9/27/2013
2: http://developer.android.com/reference/android/view/View.html
4
Views and ViewGroups
• Views2:
– “This class 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.)
– The ViewGroup subclass is the base class for layouts,
which are invisible containers that hold other Views
(or other ViewGroups) and define their layout
properties. 2”
9/27/2013
2: http://developer.android.com/reference/android/view/View.html
5
Views and ViewGroups
• This new terminology (View, ViewGroup, Class,
Object, etc) is describing elements of the java
programming language
– We will look at the basics of java soon
• Place layouts in ViewGroups
– How a screen’s components are laid out (in a table, a
grid, a frame, etc)
• Place widgets in Views
– UI components (buttons, text fields, check boxes, etc)
9/27/2013
6
Model-View-Controller
• Eclipse allows us to define the GUI in the java
class (program) or in the XML document
• Android Programming Model is built on the
MVC programming model
– Model-View-Controller
• Model: data for the App (string labels for buttons, text
for a text view, etc)
• View: layout on the screen (GUI)
• Controller: App or program: that which manipulates
the data seen in the view
9/27/2013
7
Model-View-Controller
• In Eclipse, XML files are used for: Constants
and Layout
– Constants (data)
• Example: in the values folder in the res folder is an xml
file called: strings.xml
• strings.xml holds the text that will be shown in buttons
or text views and it holds the names of the buttons or
views
9/27/2013
8
Model-View-Controller
• Layout
– The Buttons and ImageView (image holder) are
laid out in a table
• Example: in the layout folder in the res folder is an xml
file called: activity_main.xml
• activity_main.xml holds
layout (table and rows in the
table) and describes their
contents
9/27/2013
9
Model-View-Controller
• Android (and Eclipse) provides an XML
vocabulary that corresponds to the View and
ViewGroup classes in java3
• Allows the developer to describe the UI (User
Interface) in XML
– Alternative is to program the layout in java
– It is more difficult to do in java, but it can be done
• This lesson shows how to develop that XML
file3
9/27/2013
3: http://developer.android.com/training/basics/firstapp/building-ui.html
10
Start a New Project and Create a
Linear Layout
9/27/2013
11
Create a Linear Layout
• The first step is to create a new project as was
done in the previous topics
• I named mine “SimpleUI”
• When “Blank Activity” was selected in the
start-up procedure, Eclipse automatically
create an xml file called activity_main.xml
– Shown on next page
9/27/2013
12
The “activity_main.xml” File
• Below is the listing of the default “blank”
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
These values are defined
android:paddingLeft="@dimen/activity_horizontal_margin"
in the dimens.xml file
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
This is the line that tells Android to put
“Hello World” in the main window
</RelativeLayout>
9/27/2013
13
The “activity_main.xml” File
• We are going to edit this file to create a new
activity_main.xml
– It will describe the layout of the screen
– Step 1: Delete the TextView component
– It held the text “Hello World”
– It is not needed
– Step 2: Delete the vertical and horizontal margins
– They are not needed for a linear layout
– Step 3: Add the orientation attribute
– Necessary for the linear layout
9/27/2013
14
Linear Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
</LinearLayout>
• LinearLayout is a view group (a subclass of the
class ViewGroup)3
– A ViewGroup is a container for all the buttons,
text holders, etc that will be placed on the screen
– One of several ways to layout components
9/27/2013
3: http://developer.android.com/training/basics/firstapp/building-ui.html
15
Linear Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
</LinearLayout>
• LinearLayout lays out the views (objects) in
either a vertical or horizontal orientation3
– Views are the objects placed on the screen
• Buttons, image holders, check boxes, etc
– So the attribute: android:orientation is necessary
9/27/2013
3: http://developer.android.com/training/basics/firstapp/building-ui.html
16
Linear Layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
</LinearLayout>
• Each layout child (each view object) of the linear layout
appears on the screen in the order it appears in the xml
file3
• layout_width and layout_height attributes are required
to specify the size of the layout container3
– “match_parent” ensures that the view group takes up the
whole screen
9/27/2013
3: http://developer.android.com/training/basics/firstapp/building-ui.html
17
Add an Editable Text Object to the
Linear Layout container
9/27/2013
18
Editable Text Field
• Next, we will add an EditText element inside
the Linear Layout4
• Every View Object requires several attributes
to define it’s properties4
• The xml instructions for the EditText View
Object are:
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
9/27/2013
4: http://developer.android.com/training/basics/firstapp/building-ui.html#TextInput
19
Point of Clarification
• In the previous slides several terms have been
used to describe a View
– Java (and Android and xml) defines View as a
subclass of the class Object (a type of object)
– In previous slides a View has been referred to as:
• An object
• A view
• A child
• A View Object
• A component
• An element
– The buttons, text fields, check boxes, etc are
views (they are instances of the subclass View)
9/27/2013
4: http://developer.android.com/training/basics/firstapp/building-ui.html#TextInput
20
android:id=“@+id/”
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
• The android:id attribute
– Provides a unique identifier for the view object
– Can be used to reference the object from your
app code (the java program)
• i.e.; to read and manipulate the object4
• This will be done in the next presentation
9/27/2013
4: http://developer.android.com/training/basics/firstapp/building-ui.html#TextInput
21
android:id=“@+id/”
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
• The at sign (@) is required when referencing
any resource object from XML
– It is followed by:
• The resource type (id in this case)
• A slash, and then
• The resource name (edit_message)4
9/27/2013
4: http://developer.android.com/training/basics/firstapp/building-ui.html#TextInput
22
android:id=“@+id/”
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
• The plus sign (+), before the resource type, is
required when defining a resource ID for the
first time4
• When the app is compiled, the SDK tools use
the ID name to create a new resource ID in
your project's gen/R.java file that refers to the
EditText element4
9/27/2013
4: http://developer.android.com/training/basics/firstapp/building-ui.html#TextInput
23
android:id=“@+id/”
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
• The plus sign (+), before the resource type, is
required when defining a resource ID for the
first time4
• When the app is compiled, the SDK tools use
the ID name to create a new resource ID in
your project's gen/R.java file that refers to the
EditText element4
9/27/2013
4: http://developer.android.com/training/basics/firstapp/building-ui.html#TextInput
24
android:id=“@+id/”
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
• That resource ID (variable name) will be used
by the java code to refer to this object so that
it can be manipulated (have text added to it)
• When the app is compiled, the SDK tools use
the ID name to create a new resource ID in
your project's gen/R.java file that refers to the
EditText element4
9/27/2013
4: http://developer.android.com/training/basics/firstapp/building-ui.html#TextInput
25
Resource Objects
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
• Using the plus sign is necessary only when
specifying a new resource ID4
• Not needed for concrete resources such as
strings or layouts4
• A resource object is a unique integer name
that is associated with an app resource, such
as a bitmap, layout file, or string4
9/27/2013
4: http://developer.android.com/training/basics/firstapp/building-ui.html#TextInput
26
Resource Objects
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
• Every resource has a corresponding resource
object defined in your project's gen/R.java
file4
• Use the object names in the R class to refer to
your resources4
– Example: when you need to specify a string value
for the android:hint attribute
9/27/2013
4: http://developer.android.com/training/basics/firstapp/building-ui.html#TextInput
27
Resource Objects
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
• An arbitrary resource ID can be created that is
associated with a view object using the
android:id attribute4
• Allows you to reference that view object from
other code4
– Refer to that object by name
9/27/2013
4: http://developer.android.com/training/basics/firstapp/building-ui.html#TextInput
28
Resource Objects
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
• The SDK tools generate the R.java each time
you compile your app4
• You should never modify the R.java manually4
9/27/2013
4: http://developer.android.com/training/basics/firstapp/building-ui.html#TextInput
29
Resource Objects
• With the LinearLayout container (ViewGroup)
and the EditText object (View) modifications
added, the activity_main.xml file should look
like this:
9/27/2013
30
Resource Objects
• The automatically generated
R.java file is in the gen folder:
• The edit_message
id variable and
string variable
were generated
automatically
and are in R.java
9/27/2013
31
Resource Objects
• The automatically generated
strings.xml file is in the res/values
folder
• Looks like:
• And the text for edit_message is Enter
Text Here:
9/27/2013
32
Resource Objects
• The EditText Object (or component) is
shown here (the first object in the
LinearLayout container)
– The LinearLayout container
is not visible
9/27/2013
33
Resource Objects
• The EditText Object (or component) is
shown here (the first object in the
LinearLayout container)
– The LinearLayout container
is not visible
• The “value” for this string
object was defined
in the strings.xml file
9/27/2013
34
layout_width & layout_height
• The layout_width and layout_height
attributes for the component (EditText view)
are defined as “wrap_content”
• Wrap_content specifies
that the View Object
should only be large
enough to contain the
text
9/27/2013
35
layout_width & layout_height
• If the layout_width and layout_height
attributes had been “match_parent”, the
EditText Object would have filled the screen
• Because the parent is the
Linear Layout
―And it is specified to
fill the screen
9/27/2013
36
android:hint
• The android:hint attribute was given the same
variable name as android:id attribute
– edit_message
• This is not a problem because references are
always scoped by the
reference type:
― id or string in this case
• But, there cannot be 2 id
types with the same
name
9/27/2013
37
Add String Resources to the App
9/27/2013
38
String Resources
• When text needs to be added to the UI, the
strings (text) should always be specified as a
resource5
• This allows all string resources to be managed
from a single location5
• Makes it easier to find and update text
• This is an example of the MVC programming
model
9/27/2013
5: http://developer.android.com/training/basics/firstapp/building-ui.html#Strings
39
String Resources
• “Externalizing the strings also
allows you to localize your app to
different languages by providing
alternative definitions for each
string resource”5
• By default, a strings.xml file was created and
is continuously updated as the project
continues5
• This resource is found in the res/values folder
9/27/2013
5: http://developer.android.com/training/basics/firstapp/building-ui.html#Strings
40
String Resources
• “Externalizing the strings also allows you to
localize your app to different languages by
providing alternative definitions for each
string resource”5
• The default “hello world” string can be
deleted
• Add a resource that sets the edit_message
resource to “Enter a Message”
9/27/2013
5: http://developer.android.com/training/basics/firstapp/building-ui.html#Strings
41
String Resources
• Two other string resources will be needed
– button_send should be set to “Send” 5
– action_settings should be set to “Settings” 5
• The resulting strings.xml file is:
<?xml version = “1.0” encoding=“utf-8”?>
<resources>
<string name = “app_name“>Simple UI</string>
<string name = “edit_message“>Enter A Message</string>
<string name = “button_send“>Send</string>
<string name = “action_settings“>Settings</string>
<string name = “title_activity_main“>Main Activity</string>
</resources>
9/27/2013
5: http://developer.android.com/training/basics/firstapp/building-ui.html#Strings
42
Add a Button to the App
9/27/2013
43
Add a Button Object
• To add a Button to the app6
– Open activity_main.xml
– This could be done graphically, but adding by
editing the xml file seems to work better
– Add the Button object and the necessary
attributes to the xml file
• This is a Linear Layout so the order in which
you place the objects matter
9/27/2013
6: http://developer.android.com/training/basics/firstapp/building-ui.html#Button
44
activity_main.xml with Button Object
• Latest activity_main.xml file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text =“@string/button_send” />
Because this is
a Linear Layout
the button will
come after Edit
Text Object
(see next page)
</LinearLayout>
9/27/2013
45
activity_main.xml with Button Object
• This is the graphical
version
– The GUI
• The GUI in my IDE has a
light background because
I set the Theme to a Light
9/27/2013
46
activity_main.xml with Button Object
• This is the graphical
version
– The GUI
• The GUI in my IDE has a
light background because
I set the Theme to a Light
• This dark background
would be the default
9/27/2013
47
activity_main.xml with Button Object
• If Button and EditText Object are switched
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text =“@string/button_send” />
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
9/27/2013
48
activity_main.xml with Button Object
• If Button and EditText Object are switched
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text =“@string/button_send” />
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
The button will be
before the EditText
Object
9/27/2013
49
activity_main.xml with Button Object
• Back to the earlier version
The button will be
before the EditText
Object
9/27/2013
50
Width of Objects
• At this time both objects (the EditText Object
and the Button) are only as large as necessary
to contain the strings they hold
9/27/2013
5: http://developer.android.com/training/basics/firstapp/building-ui.html#Strings
51
Width of Objects
• At this time both objects (the EditText Object
and the Button) are only as large as necessary
to contain the strings they hold
• Let’s make the EditText
Object wider
• Wide enough to take
up the remainder of
the screen width
• Can be done with the weight attribute
9/27/2013
5: http://developer.android.com/training/basics/firstapp/building-ui.html#Strings
52
Weight Attribute
• The weight value is a number that specifies
the amount of remaining space each view
(object) should consume, relative to the
amount consumed by its sibling views
(objects)7
• Both the EditText object and the Button
object are children of the container (Linear
Layout) 7
– They can therefore be considered siblings
9/27/2013
7: http://developer.android.com/training/basics/firstapp/building-ui.html#Weight
53
Weight Attribute
• The weight value works similar to a drink
recipe7:
– For example: "2 parts vodka, 1 part coffee
liqueur" means:
• The total weight is the sum (3)
• The amount of vodka is 2/3 of the total
• The amount of liqueur is 1/3 of the total
9/27/2013
7: http://developer.android.com/training/basics/firstapp/building-ui.html#Weight
54
Weight Attribute
• The default weight for all views is 07
– Therefore, if any weight value greater than 0 is
specified to only one object (view)
– Then that object fills whatever space remains
after all other objects are given the space they
require
9/27/2013
7: http://developer.android.com/training/basics/firstapp/building-ui.html#Weight
55
Width of Objects
• To fill the remaining space in the layout with
the EditText element (object), give it a weight
of 1 and leave the button with no weight7
<EditText android:id="@+id/edit_message“
android:layout_weight=“1”
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
9/27/2013
7: http://developer.android.com/training/basics/firstapp/building-ui.html#Weight
56
Width of Objects
• To improve the layout efficiency when the weight is
specified
– change the width of the EditText to zero (0dp)
– Setting the width to zero improves layout performance
• If "wrap_content" is still used the system must calculate a width
that is irrelevant because the weight value requires another width
calculation
<EditText android:id="@+id/edit_message“
android:layout_weight=“1”
android:layout_width=“0dp"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
9/27/2013
7: http://developer.android.com/training/basics/firstapp/building-ui.html#Weight
57
Width of Objects
• The resulting layout, button, and EditText
objects are :
9/27/2013
58
Width of Objects
• The resulting layout, button, and EditText
objects are :
• The original was:
9/27/2013
59
Project
• This layout (activity_main.xml) is applied by
the default activity class (java
program) that was generated
by the SDK tools when the
project was started7
9/27/2013
7: http://developer.android.com/training/basics/firstapp/building-ui.html#Weight
60
Project
• This layout (activity_main.xml) is applied by
the default activity class (java
program) that was generated
by the SDK tools when the
project was started7
• So, this can be simulated with an Android
Virtual Device
• Highlight the Project name and click Run As ->
Android Application
9/27/2013
7: http://developer.android.com/training/basics/firstapp/building-ui.html#Weight
61
Project
• Or, highlight the Virtual Device you want to
use and click [Start], then
• Run As -> Android Application
• Either way, it looks like this:
• It has no functionality
– That comes in the next section
9/27/2013
7: http://developer.android.com/training/basics/firstapp/building-ui.html#Weight
62
Summary
• We were introduced to some basic XML
– Created a Layout
– Created a Text Field
– Created a Button
– Create String Resources
• And a strings.xml file
– Created and compared Layout and Object
attributes
• By editing attributes in activity_main.xml
9/27/2013
63