Graphical User Interfaces

Basic widgets
The View class

• The View class is the Android’s most basic

component from which user interfaces can be
created. It acts as a container of displayable
elements.
View
• A View occupies a rectangular area on the screen
and is responsible for drawing and event
handling.
• Widgets are subclasses of View. They are used to
create interactive UI components such as buttons,
checkboxes, labels, text fields, etc.
• Layouts are invisible structured containers used
for holding other Views and nested layouts.

2
Using XML to represent UIs
<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"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">
<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="36dp"
android:text="@string/edit_user_name"
android:ems="12" >
<requestFocus />
</EditText>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Actual UI displayed by the app android:layout_below="@+id/editText1"
android:layout_centerHorizontal="true"
android:layout_marginTop="48dp"
Text version: activity_main.xml file ⟶ android:text="@string/btn_go" />
</RelativeLayout>

3
Nesting XML Layouts
• An Android’s XML view file consists of a layout design holding a
hierarchical arrangement of its contained elements.
• The inner elements could be basic widgets or user-defined nested
layouts holding their own viewgroups.
• An Activity uses the setContentView(R.layout.xmlfilename)
method to render a view on the device’s screen.

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >

Widgets and other nested layouts

</LinearLayout>

4
Nesting XML Layouts

5
Setting Views to Work

Dealing with widgets & layouts typically involves the following

operations:
1. Set properties: For instance, when working with a TextView
you set the background color, text, font, alignment, size,
padding, marging, etc.
2. Set up listeners: For example, an image could be programmed
to respond to various events such as: click, long-tap, mouse-
over, etc.

6
A Sample of Common Android LAYOUTS

Linear Layout Relative Layout Table Layout

A LinearLayout places its A RelativeLayout is a A TableLayout is a
inner views either in ViewGroup that allows ViewGroup that places
horizontal or vertical you to position elements elements using a row &
disposition. relative to each other. column disposition.

7
A Sample of Common Android WIDGETS

GalleryView

TabWidget

Spinner

TimePicker Form Controls

AnalogClock Includes a variety of typical
DatePicker form widgets, like:
A DatePicker is a widget buttons, image buttons,
that allows the user to text fields, checkboxes and
select a month, day and radio buttons.
year.

8
GUI Elements: The LAYOUT

• Android GUI Layouts are containers having a predefined

structure and placement policy such as relative, linear
horizontal, grid-like, etc.
• Layouts can be nested, therefore a cell, row, or column of a
given layout could be another layout.

9
FrameLayout

• The FrameLayout is the simplest type of

GUI container.
• It is useful as an outermost container
holding a window.
• Allows you to define how much of the
screen (high, width) is to be used.
• All its children elements are aligned to
the top left corner of the screen.

10
LinearLayout

• The LinearLayout supports a filling strategy in which new elements are

stacked either in a horizontal or vertical fashion.
• If the layout has a vertical orientation new rows are placed one on top of
the other.
• A horizontal layout uses a side-by-side column placement policy.

11
LinearLayout

Setting Attributes

Configuring a LinearLayout usually requires you to set the following attributes:

• orientation (vertical, horizontal)

• fill model (match_parent, wrap_contents)
• weight (0, 1, 2, …n )
• gravity (top, bottom, center,…)
• padding ( dp – dev. independent pixels )
• margin ( dp – dev. independent pixels )

12
LinearLayout : Orientation
<LinearLayout
The android:orientation xmlns:android="http://schemas.android.com/apk/res/and
roid"
property can be set to: horizontal android:id="@+id/myLinearLayout"
for columns, or vertical for rows. android:layout_width="match_parent"
android:layout_height="match_parent"
Use setOrientation() for android:orientation="horizontal"
android:padding="4dp" >
runtime changes. <TextView
android:id="@+id/labelUserName"
horizontal android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ffff0000"
android:text=" User Name "
android:textColor="#ffffffff"
android:textSize="16sp"
android:textStyle="bold" />
<EditText
android:id="@+id/ediName"
v android:layout_width="wrap_content"
e android:layout_height="wrap_content"
r android:text="Maria Macarena"
android:textSize="18sp" />
t
i <Button
android:id="@+id/btnGo"
c android:layout_width="wrap_content"
a android:layout_height="wrap_content"
l android:text="Go"
android:textStyle="bold" />
</LinearLayout>

13
LinearLayout : Fill Model

• Widgets have a "natural size“ based on their included text

(rubber band effect).
• On occasions you may want your widget to have a specific
space allocation (height, width) even if no text is initially
provided (as is the case of the empty text box shown below).
natural
sizes empty screen
space

14
LinearLayout : Fill Model

All widgets inside a LinearLayout must include ‘width’ and ‘height’ attributes.

android:layout_width
android:layout_height

Values used in defining height and width can be:

1. A specific dimension such as 125dp (device independent pixels dip )

2. wrap_content indicates the widget should just fill up its natural space.

3. match_parent (previously called ‘fill_parent’) indicates the widget wants

to be as big as the enclosing parent.

15
LinearLayout : Fill Model
<LinearLayout
125 dp xmlns:android="http://schemas.android.com/apk/res/android"
entire row android:id="@+id/myLinearLayout"
(320 dp on medium resolution screens) android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff0033cc"
android:orientation="vertical" Row-wise
android:padding="6dp" >
<TextView
android:id="@+id/labelUserName"
android:layout_width="match_parent" Use all the row
android:layout_height="wrap_content"
android:background="#ffff0066"
android:text="User Name"
android:textColor="#ff000000"
android:textSize="16sp"
android:textStyle="bold" />
<EditText
android:id="@+id/ediName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp" />
<Button
android:id="@+id/btnGo"
android:layout_width="125dp" Specific size: 125dp
android:layout_height="wrap_content"
Medium resolution is: 320 x 480 dpi. android:text="Go"
Shown on a Gingerbread device android:textStyle="bold" />
</LinearLayout>

16
LinearLayout : Weight

The extra space left unclaimed in a layout could be assigned to any of its inner
components by setting its Weight attribute.
Use 0 if the view should not be stretched. The bigger the weight the larger
the extra space given to that widget.

Example
The XML specification for this window is
similar to the previous example.

The TextView and Button controls have

the additional property
android:layout_weight="1" Takes: 2 /(1+1+2)
whereas the EditText control has of the screen space
android:layout_weight="2"
Remember, default value is 0

17
LinearLayout : Gravity

• Gravity is used to indicate how a control will align on the screen.

• By default, widgets are left- and top-aligned.
• You may use the XML property android:layout_gravity="…"
to set other possible arrangements: left, center, right, top, bottom, etc.

Button has
right
layout_gravity

18
LinearLayout : Padding

• The padding attribute specifies the widget’s internal margin

(in dp units).

• The internal margin is the extra space between the borders of

the widget's "cell" and the actual widget contents.

The ‘blue’ surrounding space

Hello world around the text represents
the inner view’s padding

20
LinearLayout : Padding and Margin

Padding and Margin represent the internal and external spacing between a
widget and its included and surrounding context (respectively).

21
LinearLayout : Set internal margins using padding

Example:
The EditText box has been changed to include 30dp of padding all around

<EditText
android:id="@+id/ediName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:padding="30dp" />

...

22
LinearLayout : Set External Margins

• Widgets –by default– are closely displayed next to each other.

• To increase space between them use the
android:layout_margin attribute

Increased inter-widget space

<EditText
android:id="@+id/ediName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:layout_margin="6dp">
</EditText>
...
Using default spacing between
widgets

23
Relative Layout

The placement of a widget in a RelativeLayout is based on its positional

relationship to other widgets in the container as well as the parent container.

Example:
A A is by the parent’s top
C is below A, to its right
B is below A, to the left of C

B C

24
Relative Layout - Example

Location of the button is expressed

in reference to its relative position
with respect to the EditText box.

25
Relative Layout - Referring to the container
Below there is a sample of various positioning XML boolean properties
(true/false) which are useful for collocating a widget based on the location of
its parent container.

android:layout_alignParentTop
android:layout_alignParentBottom

android:layout_alignParentLeft
android:layout_alignParentRight

android:layout_centerInParent
android:layout_centerVertical
android:layout_centerHorizontal

26
Relative Layout - Referring to Other Widgets

android:layout_alignTop=“@+id/wid1” wid2
wid1

android:layout_alignBottom =“@+id/wid1” wid1 wid2

wid1
android:layout_alignLeft=“@+id/wid1”

wid2

wid1
android:layout_alignRight=“@+id/wid1”
wid2

27
Relative Layout - Referring to Other Widgets

android:layout_toLeftOf=“@+id/wid1” wid2 wid1

wid2
android:layout_toRightOf =“@+id/wid1” wid1

wid2

android:layout_above=“@+id/wid1” wid1

wid1
android:layout_below=“@+id/wid1”
wid2

28
Relative Layout - Referring to Other Widgets

When using relative positioning you need to:

1. Use identifiers ( android:id attributes ) on all elements that you will

be referring to.

2. XML elements are named using the prefix: @+id/... For instance
an EditText box could be called: android:id="@+id/txtUserName"

3. You must refer only to widgets that have been already defined. For
instance a new control to be positioned below the txtUserName EditText
box could refer to it using:
android:layout_below="@+id/txtUserName"

29
 Relative Layout - Example
<RelativeLayout <EditText
xmlns:android="http://schemas.android.com/apk/res/androi android:id="@+id/txtUserName"
d" android:layout_width="match_parent"
android:id="@+id/myRelativeLayout" android:layout_height="wrap_content"
android:layout_width="match_parent" android:layout_alignParentLeft="true"
android:layout_height="match_parent" android:layout_below="@+id/lblUserName"
android:background="#ff000099" > android:padding="20dp" >
</EditText>
<TextView <Button
android:id="@+id/lblUserName" android:id="@+id/btnGo"
android:layout_width="match_parent" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:layout_alignParentLeft="true" android:layout_alignRight="@+id/txtUserName"
android:layout_alignParentTop="true" android:layout_below="@+id/txtUserName"
android:background="#ffff0066" android:text="Go"
android:text="User Name" android:textStyle="bold" >
android:textColor="#ff000000" </Button>
android:textStyle="bold" > <Button
</TextView> android:id="@+id/btnCancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/txtUserName"
android:layout_toLeftOf="@+id/btnGo"
android:text="Cancel"
android:textStyle="bold" >
</Button>
</RelativeLayout>

30
ScrollView Layout (Vertical & Horizontal)
• The ScrollView control is useful
in situations in which we have
more data to show than what a Scroller
single screen could display. indicator

• ScrollViews provide a vertical

sliding (up/down) access to the
data.

• The HorizontalScrollView
provides a similar left/right
sliding mechanism)

• Only a portion of the user’s data

can be seen at one time,
however the rest is available for
viewing.

31
Example: Vertical ScrollView Layout
<ScrollView xmlns:android= android:layout_height="wrap_content"
"http://schemas.android.com/apk/res/android" android:text="Item2"
android:id="@+id/myVerticalScrollView1" android:textSize="150sp" />
android:layout_width="match_parent"
android:layout_height="match_parent" > <View
android:layout_width="match_parent"
<LinearLayout android:layout_height="6dp"
android:id="@+id/myLinearLayoutVertical" android:background="#ffff0000" />
android:layout_width="match_parent"
android:layout_height="match_parent" <TextView
android:orientation="vertical" > android:id="@+id/textView3"
android:layout_width="match_parent"
<TextView android:layout_height="wrap_content"
android:id="@+id/textView1" android:text="Item3"
android:layout_width="match_parent" android:textSize="150sp" />
android:layout_height="wrap_content"
android:text="Item1" </LinearLayout>
android:textSize="150sp" />
</ScrollView>
<View
android:layout_width="match_parent"
android:layout_height="6dp"
android:background="#ffff0000" />

<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"

32
Example: HorizontalScrollView Layout
<HorizontalScrollView <TextView
android:id="@+id/textView2"
xmlns:android="http://schemas.android.com/apk/r android:layout_width="match_parent"
es/android" android:layout_height="wrap_content"
android:id="@+id/myHorizontalScrollView1" android:text="Item2"
android:layout_width="match_parent" android:textSize="75sp" />
android:layout_height="wrap_content" >
<View
<LinearLayout android:layout_width="6dp"
android:id="@+id/myLinearLayoutVertical" android:layout_height="match_parent"
android:layout_width="match_parent" android:background="#ffff0000" />
android:layout_height="match_parent"
android:orientation="horizontal" > <TextView
android:id="@+id/textView3"
<TextView android:layout_width="match_parent"
android:id="@+id/textView1" android:layout_height="wrap_content"
android:layout_width="match_parent" android:text="Item3"
android:layout_height="wrap_content" android:textSize="75sp" />
android:text="Item1" </LinearLayout>
android:textSize="75sp" />
<View </HorizontalScrollView>
android:layout_width="6dp"
android:layout_height="match_parent"
android:background="#ffff0000" />

33
Connecting layouts to Kotlin code

PLUMBING.
You must ‘connect’ functional XML elements –such as buttons, text boxes,
check boxes - with their equivalent Kotlin objects. This is typically done in the
onCreate(…) method of your main activity. After all the connections are
made and programmed, your app should be ready to interact with the user.
XML Layout
<xml….
...
...
</xml>

Kotlin code
class MainActivity
{
...
...
}

34
 Connecting Layouts to Kotlin code

Kotlin code
class MainActivity : AppCompatActivity() {

lateinit var edtUserName: EditText

lateinit var btnGo: Button

<!– XML LAYOUT -->

<LinearLayout override fun onCreate(savedInstanceState: Bundle?) {
android:id="@+id/myLinearLayout" super.onCreate(savedInstanceState)
... >
setContentView(R.layout.activity_main)
<TextView
android:text="ACME Login Screen"
... /> edtUserName = findViewById(R.id.edtUserName)
btnGo = findViewById(R.id.btnGo)
<EditText
android:id="@+id/edtUserName" }
... /> }

<Button
android:id="@+id/btnGo"
... />
</LinearLayout>

35
What is the meaning of an Android Context?

On Android, a Context defines a logical workspace on which an app can load

and access resources.

• When a widget is created, it is attached to a particular Context. By means

of its affiliation to that environment, it then could access other members
of the hierarchy on which it has been collocated.

• For a simple ‘one activity app’ - say MainActivity - the property

applicationContext and the reference MainActivity.this return the same
result.

• An application could have several activities. Therefore, for a multi-

activity app we have one app context, and a context for each of its
activities, each good for accessing what is available in that context.

4 - 36
36
Connecting Layouts to Kotlin code

Assume the UI in res/layout/activity_main.xml has been created. This layout

could be called by an application using the statement

setContentView(R.layout.activity_main)

Individual XML defined widgets, such as btnGo is later associated to the

application using the statement findViewById(...) as in

val btnGo: Button = findViewById(R.id.btnGo)

Where R is a class automatically generated to keep track of resources available to

the application. In particular R.id... is the collection of widgets defined in the XML
layout (Use Eclipse’s Package Explorer, look at your /gen/package/R.java
contents).
A Suggestion: The widget’s identifiers used in the XML layout and Java code could
be the same. It is convenient to add a prefix to each identifier indicating its nature.
Some options are txt, btn, edt, rad, chk, etc. Try to be consistent.

37
Connecting Layouts to Kotlin code

Attaching Listeners to Widgets

Consider the screen on the right. To make its

‘Go’ button widget be responsive to the
user’s pushing of that button, we may add a
listener for the click event.

val btnGo: Button = findViewById(R.id.btnGo)

btnGo.setOnClickListener {
// put some more logic here
}

Note: Other common ‘listeners’ watch for events such as:

textChanged, tap, long-press, select, focus, etc.

38
Basic Widgets: TextViews

• In Android a label or text-box is called

a TextView.
• A TextView is typically used for showing
a caption or a text message.
• TextViews are not editable, therefore
they take no input.
• The text to be shown may include the
\n formatting character (newLine)
• You may also use HTML formatting by
setting the text to:
Html.fromHtml("your html string")

39
Basic Widgets: Example - TextViews

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="6dp" >

<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/holo_blue_bright"
android:text="(Lyrics) 99 Bottles of Beer"
android:textAppearance="?android:attr/textAppearanceLarge" />

<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
android:background="@color/gray_light"
android:text="\n\t99 bottles of beer on the wall, 99 bottles of beer.Take one down and
pass it around, 98 bottles of beer on the wall.\n\n\t98 bottles of beer on the wall, 98 bottles
of beer.Take one down and pass it around, 97 bottles of beer on the wall. \n\n\t97 bottles of
beer on the wall, 97 bottles of beer.Take one down and pass it around, 96 bottles of beer on
the wall... "
android:textSize="14sp" />
</LinearLayout>

40
Basic Widgets: TextViews

* Set up color (text, background)

+ In XML: RGB, ARGB, from resource
+ In Kotlin code: from resource, from Color class
* Get content from strings.xml resource file
+ In XML: @string
+ In Kotlin code: R.string
* Set custom font from file in the assets folder
val textView: TextView = findViewById(R.id.textView)
textView.typeface = Typeface.createFromAsset(assets, "fontname.ttf")

41
Basic Widgets: Buttons
• A Button widget allows the simulation of a GUI clicking action.
• Button is a subclass of TextView. Therefore formatting a button’s face is
similar to the setting of a TextView.
• You may alter the default behavior of a button by providing a custom
drawable.xml specification to be applied as background. In those specs
you indicate the shape, color, border, corners, gradient, and behavior
based on states (pressed, focused). More on this issue in the appendix.

<Button
android:id="@+id/btnClickMeNow"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="5dp“
android:gravity="center"
android:padding="5dp"
android:text="Click Me Now!"
android:textColor="#ffff0000"
android:textSize="20sp"
android:textStyle="bold" />

42
Example: Connecting buttons

class MainActivity : AppCompatActivity() {

lateinit var edtInput: EditText

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

edtInput = findViewById(R.id.edtInput)

val btnConvert: Button = findViewById(R.id.btnConvert)

btnConvert.setOnClickListener {
// put some more logic here
}

val btnClear: Button = findViewById(R.id.btnClear)

btnClear.setOnClickListener {
// put some more logic here
}
}
}

43
Example: Connecting buttons

class MainActivity : AppCompatActivity(), OnClickListener {

lateinit var edtInput: EditText

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

edtInput = findViewById(R.id.edtInput)

val btnConvert: Button = findViewById(R.id.btnConvert)

btnConvert.setOnClickListener(this)

val btnClear: Button = findViewById(R.id.btnClear)

btnClear.setOnClickListener(this)
}

override fun onClick(p0: View?) {

if (p0?.id == R.id.btnConvert) {
// put some more logic here
} else if (p0?.id == R.id.btnClear) {
// put some more logic here
}
}
}

44
Basic Widgets: ImageView & ImageButton

• ImageView and ImageButton allow the embedding

of images in your applications ( gif, jpg, png, etc).
• Analogue to TextView and Button controls
(respectively).
• Each widget takes an
android:src or
android:background
attribute (in an XML layout) to specify what picture
to use.
• Pictures are stored in the res/drawable folder
(optionally a medium, high, x-high, xx-high, and xxx-
high respectively definition version of the same
image could be stored for later usage with different
types of screens). Details available at:
http://developer.android.com/design/style/iconography.html

45
Basic Widgets: ImageView & ImageButton
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="6dp"
android:orientation="vertical" >

<ImageButton
android:id="@+id/imgButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" >
</ImageButton>

<ImageView
android:id="@+id/imgView1"
android:layout_width="200dp"
android:layout_height="150dp"
android:scaleType="fitXY"
android:src="@drawable/flowers1" >
</ImageView>

</LinearLayout>

46
Basic Widgets: Buttons - Combining Images & Text

A common Button widget could display text and

a simple image as shown below
<LinearLayout
. . .

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/ic_launcher"
android:gravity="left|center_vertical"
android:padding="15dp"
android:text="Click me" />

</LinearLayout>

47
Basic Widgets: How icons are used in Android?

Icons are small images used to graphically represent mdpi (761 bytes)
your application and/or parts of it. They may appear 1x = 48 x 48 pixels
BaseLine
in different parts of your app including:
hdpi (1.15KB)
• Home screen 1.5x = 72 x 72 px
• Launcher window.
• Options menu
• Action Bar x-hdpi (1.52KB)
• Status bar 2x = 96 x 96 px
• Multi-tab interface.
• Pop-up dialog boxes
• List view

xx-hdpi (2.47KB)
Detailed information on Android’s iconography is available 3x = 144 x 144 px
at: http://developer.android.com/design/style/iconography.html

48
Basic Widgets: EditText Boxes

• The EditText widget is an extension of

TextView that allows user’s input.

• In addition to plain text, this widget

can display editable text formatted
with HTML-styles such as bold, italics,
underline, etc ). This is done with
Html.fromHtml(html_text)

• Moving data in and out of an EditText

box is usually done in Kotlin through
the following methods:

txtBox.setText(“someValue”)

txtBox.text.toString()

49
Basic Widgets: EditText Boxes

Input Type Formats

An EditText box could be set to accept input strings satisfying
a particular pattern such as: numbers (with and without
decimals or sign), phones, dates, times, uris, etc.

Setting the EditText box to accept a particular choice of data-

type, is done through the XML clause

android:inputType=“choices”

where choices include any of the single values shown in the

figure. You may combine types, for instance:
textCapWords|textAutoCorrect
Accepts text that capitalizes every word, incorrect words are
automatically changed (for instance ‘teh‘ is converted into
‘the’, and so on.

50
Example: Login-Screen
In this example we will create a simple login screen holding a label (TexView), a
textBox (EditText), and a Button. When the EditText box gains focus, the system
provides a virtual keyboard customized to the input-type given to the entry box
(capitals & spelling). Clicking the button displays a Toast-message that echoes the
supplied user-name.

Capitals & Setting

Hint spelling Disable text
button

A brief
message box

51
Example: Login-Screen
LAYOUT 1 of 2
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="6dp" >

<TextView
android:id="@+id/txtLogin"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/holo_blue_light"
android:text="@string/ACME_Login_Screen"
android:textSize="20sp"
android:textStyle="bold" />

<EditText
android:id="@+id/edtUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:hint="@string/Enter_your_First_and_Last_name"
android:inputType="textCapWords|textAutoCorrect"
android:textSize="18sp" >
<requestFocus />
</EditText>

52
Example: Login-Screen

LAYOUT 2 of 2

<Button
android:id="@+id/btnLogin"
android:layout_width="82dp"
android:layout_height="wrap_content"
android:layout_marginTop="2dp"
android:text="@string/login" />
</LinearLayout>

res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- this is the res/values/strings.xml file -->
<resources>

<string name="app_name">GuiDemo</string>
<string name="action_settings">Settings</string>
<string name="login">login</string>
<string name="ACME_Login_Screen">ACME Login Screen</string>
<string name="Enter_your_First_and_Last_name">Enter your First and Last name</string>

</resources>

53
Example: Login-Screen - MainActivity code

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

val context = applicationContext

val duration = Toast.LENGTH_SHORT

val textLogin: TextView = findViewById(R.id.text_login)

val editUsername: EditText = findViewById(R.id.edit_username)

val buttonLogin: Button = findViewById(R.id.button_login)

buttonLogin.setOnClickListener {
val username = editUsername.text.toString()

Log.v("TAG", "duration: $duration")

Log.v used for
Log.v("TAG", "context: $context") debugging, show
Log.v("TAG", "username: $username")
in Logcat window
if (username.equals("Maria Macarena")) {
textLogin.text = "OK, please wait"
Toast.makeText(this, "Welcome $username", duration).show()
buttonLogin.isEnabled = false
} else {
Toast.makeText(this, "$username is not a valid user", duration).show()
}
}
}
}

54
Basic Widgets: CheckBoxes

A checkbox is a special two-states button

which can be either checked or unchecked.

A screen may include any number of mutually

inclusive (independent) CheckBoxes. At any
time, more than one CheckBox in the GUI
could be checked.

In our “CaféApp” example, the screen on the

right displays two CheckBox controls, they are
used for selecting ‘Cream’ and ‘Sugar’ options.
In this image both boxes are ‘checked’.

When the user pushes the ‘Pay’ button a

Toast-message is issue echoing the current
combination of choices held by the
checkboxes.

55
Example: CheckBoxes – CaféApp [Layout 1 of 2]
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="6dp"
android:orientation="vertical" >

<TextView
android:id="@+id/labelCoffee"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ff993300"
android:text="@string/coffee_addons"
android:textColor="@android:color/white"
android:textStyle="bold" />

<CheckBox
android:id="@+id/chkCream"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cream"
android:textStyle="bold" />

56
Example: CheckBoxes – CaféApp [Layout 2 of 2]

<CheckBox
android:id="@+id/chkSugar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/sugar"
android:textStyle="bold" />

<Button
android:id="@+id/btnPay"
android:layout_width="153dp"
android:layout_height="wrap_content"
android:text="@string/pay"
android:textStyle="bold" />

</LinearLayout>

57
Example: CheckBoxes – CaféApp [@string/… ]

Resources: res/values/strings
<?xml version="1.0" encoding="utf-8"?>
<resources>

<string name="app_name">GuiDemo</string>
<string name="action_settings">Settings</string>

<string name="click_me">Click Me</string>

<string name="sugar">Sugar</string>
<string name="cream">Cream</string>
<string name="coffee_addons">What else in your coffee?</string>
<string name="pay">Pay</string>
</resources>

58
Example: CheckBoxes – CaféApp [Code]

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

val chkCream: CheckBox = findViewById(R.id.chkCream)

val chkSugar: CheckBox = findViewById(R.id.chkSugar)

val buttonLogin: Button = findViewById(R.id.btnPay)

buttonLogin.setOnClickListener {
var msg = "Coffee "
if (chkCream.isChecked)
msg += "& cream "
if (chkSugar.isChecked)
msg += "& sugar "
Toast.makeText(applicationContext, msg, Toast.LENGTH_SHORT).show()
}
}
}

59
Basic Widgets: Radio Buttons

• A radio button (like a CheckBox) is a two-states button that

can be either checked or unchecked.

• Logically related radio buttons are normally put together in a RadioGroup

container. The container forces the enclosed radio buttons to behave as
mutually exclusive selectors. That is, the checking of one radio button
unchecks all the others.

• Properties for font face, style, color, etc. are managed in a way similar to
setting a TextView.

• You may call the method isChecked() to see if a specific RadioButton is

selected, or change its state by calling toggle().

60
Example: CheckBoxes – CaféApp [Layout]

Example
We extend the previous
CaféApp example by adding
a RadioGroup control
that allows the user to pick
one type of coffee from RadioGroup
three available options.

Summary of choices

61
Example: CheckBoxes – CaféApp [Layout]
Only new XML and Kotlin code is shown
<TextView
android:id="@+id/textView1" <RadioGroup
android:layout_width="match_parent" android:id="@+id/radioGroupCoffeeType"
android:layout_height="wrap_content" android:layout_width="match_parent"
android:background="#ff993300" android:layout_height="wrap_content" >
android:text="@string/kind_of_coffee"
android:textColor="#ffffff" <RadioButton
android:textStyle="bold" /> android:id="@+id/radDecaf"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/decaf" />

<RadioButton
android:id="@+id/radExpresso"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/expresso" />

<RadioButton
android:id="@+id/radColombian"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:text="@string/colombian" />
</RadioGroup>

62
Example: CheckBoxes – CaféApp [MainActivity]

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)

val chkCream: CheckBox = findViewById(R.id.chkCream)

val chkSugar: CheckBox = findViewById(R.id.chkSugar)

val radCoffeeType: RadioGroup = findViewById(R.id.radioGroupCoffeeType)

val radDecaf: RadioButton = findViewById(R.id.radDecaf)
val radExpresso: RadioButton = findViewById(R.id.radExpresso)
val radColombian: RadioButton = findViewById(R.id.radColombian)

val buttonLogin: Button = findViewById(R.id.btnPay)

buttonLogin.setOnClickListener {
var msg = "Coffee "
if (chkCream.isChecked)
msg = "$msg & cream "
if (chkSugar.isChecked)
msg = "$msg & sugar "

val radioId = radCoffeeType.checkedRadioButtonId

if (radColombian.id == radioId) msg = "Colombian $msg"

if (radExpresso.isChecked) msg = "Expresso $msg"
if (radDecaf.isChecked) msg = "Decaf $msg"

63
Example: CheckBoxes – CaféApp [MainActivity]

// Alternative
when (radioId) {
R.id.radColombian -> msg = "Colombian $msg"
R.id.radExpresso -> msg = "Expresso $msg"
R.id.radDecaf -> msg = "Decaf $msg"
}

Toast.makeText(applicationContext, msg, Toast.LENGTH_SHORT).show()

}
}
}

Alternative you may also

manage a RadioGroup
as follows (this is simpler
because you don’t need
to define the individual
RadioButtons

64
Appendix. Using the @string resource
A good programming practice in Android is NOT to directly enter literal strings as
immediate values for attribute inside xml files.
For example, if you are defining a TextView to show a company headquarter’s
location, a clause such as android:text="Cleveland" should not be used
(observe it produces a Warning [I18N] Hardcoded string “Cleveland”,
should use @string resource )

Instead you should apply a two steps procedure in which

1. You write the literal string –say headquarter – in res/values/string.xml. Enter
<string name="headquarter">Cleveland</string>

2. Whenever the string is needed provide a reference to the string using the
notation @string/headquarter. For instance in our example you should enter
android:text="@string/headquarter"

WHY?
If the string is used in many places and its actual value changes we just update the
resource file entry once. It also provides some support for internationalization -easy to
change a resource string from one language to another.

65
Appendix. Measuring Graphic Elements

Q. What is dpi (also know as dp and ppi) ?

Stands for dots per inch. It suggests a measure of screen quality.
You can compute it using the following formula:

= = widthPixel
dpi dpi s 2 ++ heightPixe
sqrt (width_pixels^2 height_pixels^2) / diagonal_inches
ls 2 / diagonalInches
G1 (base device 320x480) 155.92 dpi (3.7 in diagonally)
Nexus (480x800) 252.15 dpi
HTC One (1080x1920) 468 dpi (4.7 in)
Samsung S4 (1080x1920) 441 dpi (5.5 in)

Q. What is the difference between dp, dip and sp units in Android?

dp Density-independent Pixels – is an abstract unit based on the physical density
of the screen. These units are relative to a 160 dpi screen, so one dp is one pixel
on a 160 dpi screen. Use it for measuring anything but fonts.

sp
Scale-independent Pixels – similar to the relative density dp unit, but used for
font size preference.

66
Appendix. Measuring Graphic Elements
How Android deals with screen resolutions?
Illustration of how the Android platform maps actual screen densities and
sizes to generalized density and size configurations.
A set of four generalized screen sizes
xlarge screens are at least 960dp x 720dp
large screens are at least 640dp x 480dp A set of six generalized densities:
normal screens are at least 470dp x 320dp ldpi ~120dpi (low)
small screens are at least 426dp x 320dp mdpi ~160dpi (medium)
hdpi ~240dpi (high)
xhdpi ~320dpi (extra-high)
xxhdpi ~480dpi (extra-extra-high)
Xxxhdpi ~640dpi (extra-extra-extra-high)

67
Appendix. Measuring Graphic Elements
Q. Give me an example on how to use dp units.
Assume you design your interface for a G1 phone having 320x480 pixels (Abstracted density is
160 – See your AVD entry, the actual pixeling is defined as: [2*160] x [3*160] )

Assume you want a 120dp button to be placed in the middle of the screen.
On portrait mode you could allocate the 320 horizontal pixels as [ 100 + 120 + 100 ].
On Landscape mode you could allocate 480 pixels as [ 180 + 120 + 180 ].

The XML would be

<Button
android:id="@+id/button1" 180 120 180

android:layout_height="wrap_content"
android:layout_width="120dp"
480
android:layout_gravity="center"
android:text="@+id/go_caption" />

If the application is deployed on devices having a higher resolution the button is still
mapped to the middle of the screen.

68
Appendix. Customizing Widgets

1. The appearance of a widget can be adjusted

by the user. For example a button widget
could be modified by changing its shape,
border, color, margins, etc.

2. Basic shapes include: rectangle, oval, line, and

ring.

3. In addition to visual changes, the widget’s

reaction to user interaction could be adjusted
for events such as: Focused, Clicked, etc.

4. The figure shows and EditText and Button

widgets as normally displayed by a device
running SDK4.3 (Ice Cream). The bottom two
widgets (a TextView and a Button) are custom
made versions of those two controls
respectively.

69
Appendix. Customizing Widgets
The image shows visual feedback provided to the user during the clicking of a standard
and a custom Button widget.

Standard
behavior –
buttons turns
blue when it is
pressed.

Custom behavior – buttons turns dark grey with

an orange border when it is pressed.
Appendix. Customizing Widgets
Observe the transient response of the standard and custom made EditText
boxes when the user touches the widgets provoking the ‘Focused’ event.

When focused
the standard box
shows a blue
bottom line

A focused
custom box
shows an orange
all-around frame

71
Appendix. Customizing Widgets
When the user taps on the custom made EditText box a gradient is applied to
the box to flash a visual feedback reassuring the user of her selection.

1. Non-focused custom
EditText widget, grey
3. Focused custom
border
EditText widget showing
2. Clicked EditText widget
an orange border
showing a yellow colored
linear gradient and orange
border

72
Appendix. Customizing Widgets

Organizing the application

Definition of the custom templates for

Button and EditText widgets

Layout referencing standard and custom

made widgets

73
Appendix. Customizing Widgets
Activity Layout 1 of 2
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="5dp" >

<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:ems="10"
android:inputType="text"
android:text="@string/standard_edittext" >

<requestFocus />
</EditText>

<Button
android:id="@+id/button1"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:layout_marginBottom="15dp"
android:text="@string/standard_button" />

4 - 74
74
Appendix. Customizing Widgets
Activity Layout (2 of 2) and Resource: res/values/strings
<EditText
android:id="@+id/editText2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:background="@drawable/custom_edittext"
android:ems="10"
android:inputType="text"
android:text="@string/custom_edittext" />

<Button
android:id="@+id/button2"
android:layout_width="120dp"
android:layout_height="wrap_content"
android:background="@drawable/custom_button"
android:text="@string/custom_button" />

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<resources>
<string name="app_name">GuiDemo</string>
<string name="action_settings">Settings</string>
<string name="standard_button">Standard Button</string>
<string name="standard_edittext">Standard EditText Box</string>
<string name="custom_button">Custom Button</string>
<string name="custom_edittext">Custom EditText Box</string>
</resources>

75
Appendix. Customizing Widgets
Resource: res/drawable/custom_button.xml
The custom Button widget has two faces based on the event state_pressed
(true, false). The Shape attribute specifies its solid color, padding, border
(stroke) and corners (rounded corners have radius > 0 )
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_pressed="true">
<shape android:shape="rectangle">
<corners android:radius="10dp"/>
<solid android:color="#ffc0c0c0" />
<padding android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp"/>
<stroke android:width="1dp" android:color="#ffFF6600"/>
</shape>
</item>
<item android:state_pressed="false">
<shape android:shape="rectangle">
<corners android:radius="10dp"/>
<solid android:color="#ffE0E6FF"/>
<padding android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp"/>
<stroke android:width="2dp" android:color="#ff777B88"/>
</shape>
</item>
</selector>

76
Appendix. Customizing Widgets
Resource: res/drawable/custom_edittext.xml
The rendition of the custom made EditText widget is based on three states:
normal, state_focused, state_pressed.
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_pressed="true">
<shape android:shape="rectangle">
<gradient
android:angle="90"
android:centerColor="#FFffffff"
android:endColor="#FFffcc00"
android:startColor="#FFffffff"
android:type="linear" />

<stroke android:width="2dp"
android:color="#FFff6600" />
<corners android:radius="0dp" />
<padding android:left="10dp"
android:top="6dp"
android:right="10dp"
android:bottom="6dp" />
</shape>
</item>

77
Appendix. Customizing Widgets
Resource: res/drawable/custom_edittext.xml
The rendition of the custom made EditText widget is based on three states:
normal, state focused, state_pressed.
<item android:state_focused="true">
<shape>
<solid android:color="#FFffffff" />
<stroke android:width="2dp" android:color="#FFff6600" />
<corners android:radius="0dp" />
<padding android:left="10dp"
android:top="6dp"
android:right="10dp"
android:bottom="6dp" />
</shape>
</item>

<item>
<!-- state: "normal" not-pressed & not-focused -->
<shape>
<stroke android:width="1dp" android:color="#ff777777" />
<solid android:color="#ffffffff" />
<corners android:radius="0dp" />
<padding android:left="10dp"
android:top="6dp"
android:right="10dp"
android:bottom="6dp" />
</shape>
</item>
</selector>

78