Programming for

Mobile Devices
 Theoretical Material
Introduction to Android development
Tools for Android SDK development
Basic packages and classes for development and layouts

Responsável pelo Conteúdo:

Prof. Ms. Luis Carlos Reis

Text Review:
Prof. Ms. Douglas Almendro

Textual Review:
Professor Ms. Luciene Oliveira da Costa Santos
 Introduction to Android development
Tools for Android SDK development
Basic packages and classes for development and layouts

Introduction
• Android Architecture
Google Play
Play Store
The evolution of the Android platform
• Criando um projeto no Android Studio.
Understanding the [Link] class
The tags of .xml files of Android
References

LEARNING OBJECTIVE
Introduce development for Android;
Explain and demonstrate the ways to create a mobile app;

GUIDELINES
Dear student,

We are starting our studies on mobile development, more

Specifically, we are referring to Android.

The purpose of this unit is to install and configure Android Studio and the study
of creating a program for mobile devices using the concepts
initial layout and some basic classes to perform the proposed tasks
in this unit.

Don't forget to also watch the narrated presentation of the content and of
some solved exercises.

Finally, and most importantly, pay attention to the evaluative activities.

proposals and the deadline for completion and submission.

Good study!
 Introduction to Android development
UNIT Tools for Android development SDK
Basic packages and classes for development and layouts

Contextualization
Why develop for Android?

First of all, because it is completely free, that is, you do not need
buy tools, APIs or any types of software to develop for
Android, neither a specific platform nor even a phone or gadget with
Android. Just download the SDK, an IDE and start developing.

Basically, EVERYTHING can be done on Android! We can use all the

available resources on the mobile devices or gadgets you own.

Need more information? Just check the Android Market and see the variety of
Apps that exist out there and imagine that your Apps could be there too and still
with the possibility of earnings!

Anyway...

Are you curious? Let's roll up our sleeves and see what to develop for
mobile is not a seven-headed beast.

Good study!

6
Introduction
The processing power of mobile phones and other mobile devices today is
they are quite advanced and with this advancement, there are also noticeable improvements in
fabrics and the usability of these devices.

For these reasons, mobile platforms like Blackberry, iOS, and Android are
increasingly in evidence and the market is rising. The explosion of Android is the
the most recent among these platforms, and its increasingly larger growth.

Thinking this way, we will use the operating system

Android for development in our classes by
the fact that it is an open platform. You do not need to
buy tools, APIs or any type of software
to develop for Android, not a platform-
my specific or not even a cell phone or gadget
with Android. Just download the SDK and a
IDE is ready. Figure 1
Android is an operating system that runs on the Linux kernel, where
it was initially developed by Android Inc., and then passed to Google
where it was purchased in 2005 and later by the Open Handset Alliance.

Android is the first completely free platform for mobile applications.

and open source, being a development platform for
cell phones and other mobile devices.

On Android, each application runs in a single process and each process

has a dedicated thread.

This operating system is based on the 2.6 kernel of Linux, and is

responsible for managing memory, processes, threads, and security of
files and folders, as well as networks and drivers.

The Open Handset Alliance (OHA), a group of leading telecommunications companies

mobile, led by Google, is linked to this project. Motorola, HTC, Sony
Ericsson, LG, Samsung, Sprint Nextel, Toshiba etc. are some of the companies.
participants.

More information about the OHA can be found on the website:

[Link]

The most used language to create apps for the little robot is Java and
we will adopt it in our classes, where we will be able to control the device via
libraries developed by Google.

7
 Introduction to Android development
UNIT Tools for Android SDK development
Packages and basic classes for development and layouts

The Java language is used to build applications for Android. But not
existe uma máquina virtual Java (JVM). Na realidade, o que existe é uma máquina
Dalvik virtual call that is optimized for execution on available mobile devices.

After the bytecode (class) is compiled, it is converted to the format

.dex (Dalvik Executable) which represents the compiled Android application. After
the files, and other resources like images are compressed into a single
file with the extension .apk (Android Package File) that represents the application
final, ready to be distributed and installed.

Diagram that represents the architecture of Android (extracted from[Link]

Android has been available as open source since October 21, 2008.
Google published all the code under the ASF (Apache Software Foundation) license.
that allows changes to be made to the source code to create products
customized without needing to share the changes with anyone. However,
it depends on an authorization from Google itself to be able to access the library
from applications, Play Store.

Android Studio has a plugin called ADT (Android Development Tools)

to facilitate the development, testing, and compilation of the project.

Android architecture
The architecture of Android is composed of several layers and components, such as
it is possible to visualize in the figure below:

Figure 2

8
 In the Linux Kernel layer, the platform's operating system is located,
which is based on Linux. It is responsible for lower-level services of the
platform, such as memory and process management, security, etc.

In the Libraries layer, there are native libraries written in C/C++ that
are part of the platform. APIs such as OpenGL ES (for
3D rendering), SQLite (database manager) and support for various
audio and video formats.
The Android Runtime layer provides conditions for applications based on the
platforms are executed. One of the components of this layer is the core
libraries that provide a Java API used for programming (largely
the functionalities found in Java SE are available for Android). Already
the other component is the Dalvik Virtual Machine, which is a virtual machine for
support for the execution of applications.

The Application Framework layer contains the Android APIs that are
normally used by the applications running on the platform.
The managers of telephone services, location, and notification are some
examples of what this framework provides.

Finally, the Applications layer represents the applications that run on

the platform. They can be both native applications – like the manager of
contacts, browser, calendar etc. – as applications created by third parties.
In fact, for Android there is no distinction between native applications and applications
developed by other people, and it is this characteristic that ensures its high
degree of flexibility and extensibility of the platform.

Google Play
Applications developed for Android can be made available by
through a personal server, being the most common and professional done by
Google Play.

Available at: [Link]

Google Play is Google's online store for distributing applications, games,

movies, music, and books. Previously, the store was called Android Market.

This name change to Google Play occurred so that Google could

unify the Android Market with the music, movies, and books store and thus distribute
all your digital content in one place.

Google Play applications are available for free or at a cost, for the
Android operating system, and can be downloaded directly to a device
mobile or on a personal computer through your website.

9
 Introduction to Android development
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

These applications are generally aimed at users based on a

particular hardware attribute of your device, such as a motion sensor
(for game-dependent movement) or a front camera (for calls)
of online video).

Figure 3

Play Store
The application for the Android system that allows access to the content is called
Play Store.

Available at: [Link]

The Google Play apps are available in various countries, potentially being
downloaded through the Google Play website or the Android app.

Figure 4

10
The evolution of the Android platform

Figure 5

Each platform has an identifier code (API Level) and some have names.
of code.
• API Level 1 = Android 1.0
• API Level 2 = Android 1.1
• API Level 3 = Android 1.5 (Cupcake)
• API Level 4 = Android 1.6 (Donut)
• API Level 5 = Android 2.0
• API Level 6 = Android 2.01
• API Level 7 = Android 2.1 (Eclair)
• API Level 8 = Android 2.2 (Froyo)
• API Level 9 = Android 2.3 (Gingerbread)
• API Level 10 = Android 2.3.3
• API Level 11 = Android 3.0 (Honeycomb)
• API Level 12 = Android 3.1 (Honeycomb)
• API Level 13 = Android 3.2 (Honeycomb)
• API Level 14 = Android 4.0 (Ice Cream Sandwich)
• API Level 15 = Android 4.03
• API Level 16 = Android 4.1 (Jelly Bean)
• API Level 17 = Android 4.2 (Jelly Bean)
• API Level 18 = Android 4.3 (Jelly Bean)
• API Level 19 = Android 4.4 (KitKat)
• API Level 20 = Android 4.4W
• API Level 21 = Android 5.0 (LOLLIPOP)

11
 Introdução ao desenvolvimento para Android
UNIT Tools for Android development SDK
Basic packages and classes for development and layouts

Currently, the version of Android is 5.1:

Figure 6

Version of the Android platform distributed by API:

Figure 7
Data: May 2015. Source:[Link]

Where to find a complete technical reference for Android?

Documentation of the class packages of the Android APIs

[Link]
Documentation of the classes of the Android APIs
[Link]
Download the versions of the Android SDK, plugins, drivers
[Link]

Support and installation of software for Android

For Android development, we will use the free tool Android
Studio e, currently, is part of the recommended software development kit.
for Android developers.

12
 To install the tool along with Android, follow the following
procedures:
• Accessthewebsite[Link] and download theAndroid Studio package.

Figure 8

Before configuring Android Studio, make sure you have installed JDK 6 or higher.
(only the JRE is not sufficient).
JDK 7 is required to develop for Android version 5.0 and above.
The same can be obtained at the address: (Check if your operating system is for
32 or 64 bits.
[Link]

Figure 9

13
 Introduction to Android development
UNIT Tools for Android development SDK
Basic packages and classes for development and layouts

• As a suggestion, create a folder in C: named Android and save the file.

for this folder.
• The download file will be named [Link]-
[Link]

Figure 10

• In this file, the module for development (Android Studio) already exists and the
Android SDK, but only the latest Android API is installed.
• After installation, run Android Studio, where we will install the others.
Android packages.

Figure 11

Select SDK Manager.

Figure 12

14
 When running the SDK Manager, add everything from Android and install the updates.

Figure 13

Figure 14

It is necessary to be connected to the Internet to install these packages.

Select all items and accept the license and select Install.

In the future, you will be able to add more packages if needed, using the
menu Tools – Android – SDK Manager.

15
 Introduction to Android development
UNIT Tools for Android SDK development
Packages and basic classes for development and layouts

Figure 15

Creating a project in Android Studio.

Figure 16

Run the application:

Figure 17

An Android project contains all the files that make up the source code.
from your Android application. The tools in Android Studio make it easier
start a new Android project with a set of 'standard directories' from
project and files.

In this lesson, we will create a new project using Android Studio. We will
set up the location where our projects will be created and the name of our project.
For this first example, we will name it HelloWorld.

16
To create a project, follow the instructions below:
1. Select Start a new Android Studio project.

Figure 18

2. In the window that appears, type the project location and the name of the
application as below:

Figure 19

• Application Name: it is the name of the application that appears to users.

this project, use "AloMundo".

17
 Introduction to Android development
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

• Project Location: it is the name of the project directory.

• Company Domain: it's the package namespace for your application (following
the same package rules in the Java programming language). Your
package name must be unique among all installed packages in the system
Android. For this reason, it is generally better if you use a name that
start with the reverse domain name of your organization or entity
editor. For this project, you can use something like '[Link]'.
However, you cannot publish your app on Google Play using the
[Link] namespace.
3. Select project for Phone and the minimum SDK version.

Figure 20

Minimum Required SDK is the lowest version of Android that the application supports, indicated
using the level API. To support as a possible device, you must define this to
the smallest available version that allows your application to provide its set
of resources from the core. If any resource of your application is only possible in versions
most recent of Android and that is not fundamental for the application of the set of
core resources, you can enable the feature only when running on versions
that support (as discussed in support for different platform versions). Leave this
set for the default value for this project.

18
4. Now, you can select an activity template to get started.
to build your application. For this project, select BlankActivity and
click Next.

Figure 21

5. Leave all details in their default state and click Finish.

Figure 22

19
 Introduction to Android development
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

Understanding what was generated

Many files were generated automatically when we created a project.
Android. To start understanding what happens in our application, let's
explore a little the structure of this project using the Project window.

Figure 23

The class MainActivity:

Open the file [Link] (in src, in the package [Link].
world). You will see something like:

Figure 24

20
The project's structure can be viewed using Project.

Figure 25

• java - contains the Java classes. It contains the MainActivity class.

• app/manifests/[Link] - app descriptor containing the per-

missions, declaration of components (activity, service, broadcast receiver, etc.).
• res - contains the application's resources such as images, screen layouts and
internationalization files.
• drawable - contains the application's images in 4 resolutions: ldpi (low dots
per inch), mdpi (medium dots per inch), hdpi (high dots per inch) and xdpi (extra
high dots per inch).
• We often need images to complement our application.
Meanwhile, when we think of small devices, it is necessary
consider the screen resolution capabilities.
• Thus, an Android project gains images in the res/drawable-[hlm]dpi/ folders.
where ldpi corresponds to low resolution, mdpi to medium and hdpi to high resolution.
• layout - it contains XML files of layouts to build the application's screens.
• menu - contains the XML files of the application's menus.
• values - contains the XML files used for internationalization of the
application, theme configuration and other settings.

21
 Introdução ao desenvolvimento para Android
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

Understanding the [Link] class

Figure 26

There is also a central class that is automatically generated and is responsible

by mapping the elements of the view with the model and the controller. Note that
Everything that is created or declared in the res folder gains a representation in Java.
that we will use a lot to use values and reference items.

Note, however, that this class should not be manually altered. It is just
a resource that Android provides to facilitate the reference to visual objects,
images, strings etc.

Note also that our Java classes, to access any declared resource
in the res/ folder, we refer to the public attributes of this strange class
R. For example:

Images:
• [Link]

Access to screen items declared in layout XMLs:

• [Link]
• [Link]

Access to files:
• [Link]
• [Link]

Access to strings:
• [Link].app_name
• hello

We will often see code that takes these components, strings, ima-
People through the findViewById method, to then use them, define listeners, etc.
This R class is generated by the Android Studio plugin and should not be modified.
altered values. It will be used as a reference to access the various
components of our inter4face. It's like a large collection of identifiers,
that the platform will know how to use to locate its values and properties of
optimized way.

22
 The [Link] is generated according to the various files used for
configuration of your application. If there is any error in these files, it is likely
that the plugin cannot control it, thus propagating an error in
that all your source files. We should then be careful to look for the error
what is preventing your generation, and be careful not to import the class
android.R, which is not from your application, but rather an internal one used by Android.

Layouts
The shape and arrangement with which the elements are presented on the screen are of
responsibility of the Layouts.

A layout is a strategy or arrangement for placing components inside.

of an Activity. An Activity can be designed as a layout described
for one or several layouts.

A layout can be created in an XML file (which is the most common) or

during the execution of the program.

The most common layouts for organizing interface elements on the screen are:
LinearLayout, RelativeLayout, and TableLayout. We will talk more about these types
of the layouts further ahead.

See the file activity_main.xml in the layout resources of the project.

Figure 27

Let's replace the TextView above with the data below to understand the
use of strings:

<RelativeLayout xmlns:android=[Link]
apk/res/android
xmlns:tools="[Link]
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context=".MainActivity">

23
23
 Introduction to development for Android
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

TextView
android:layout_width="fill_parent"
android:layout_height=”wrap_content”
android:text=”@string/hello_world”
/>
</RelativeLayout>

The TextView tag has a height determined only as necessary to display its.
content, set as wrap_content.

Now, notice the highlighted line: @string/hello_world. It defines the text

what will appear on the screen when the application is executed. Note that it is just
a key for some text. This text is defined in res/values within the
[Link].

Figure 28

This is a simple idea, but it makes the internationalization of your application easier.
thus being able to be introduced to other languages, just by creating other files
devalues translations.

Selecting the graphic mode, we will notice how the layout looks.

Figure 29

24
Emulator configuration
After installing the platform and the image for each version of Android, the
The next step is to create the emulator(s) to test our applications.

Now access the menu Tools – Android – AVD Manager.

Figure 30

Click the Create a virtual device button to add a new Emulator.

Figure 31

On the new AVD selection screen, we can use various resolutions, and for
In our classes, we will use the Nexus 4 with a resolution of 768 x 1280 pixels, as per
below screen.

25
 Introduction to Android development
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

Select the Next button.

Figure 32

Our next setup is the version of Android, and for our class we will
use the KitKat version, that is, Android 4.4.2. If it is not installed,
Select the Download so that it can be part of our project.

Figure 33

26
 Após o Download, selecione a versão do Android 4.4.2 (KitKat) e selecione o
Next button.

Figure 34

On the next screen, we will finalize our setup.

Figure 35

27
 Introduction to Android development
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

Soon, our emulator can already be run.

Figure 36

Soon, our emulator is already operating and can now receive our first
application.

Figure 37

28
 Now, we will run our AloMundo application. Select the figure below.
para executar nossa aplicação.

Figure 38

Or if you prefer, use the Run menu, Run 'app'.

Figure 39

In this next window, the emulator we started will be presented. Therefore,

select the OK button.

Figure 40

29
 Introduction to Android Development
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

The system will compile the application and, after a few seconds, our will be opened.
application in the emulator that we had started.

Figure 41

If you want to stop the application, select the item below Android and the item
Terminate Application.

Figure 42

Fundamental concepts
Let's understand now the components and their life cycles so that we can
build a robust, expandable system with acceptable performance for
the user.

30
Components of an Android Application
Developing applications for Android means composing a series of components.
so that the final objective of the application is achieved. The figure below shows these
components.

Figure 43

Activities are the representatives of the application screens. Associated with an activity
there is normally a view that defines how the visual display will be made for the
User. The activities are responsible for managing screen events and also
coordinate the application's flow.

An Activity is an individual object that can receive focus and that

it can be a full-screen window (which is the most common), a floating window or
a window embedded within another window. Activity is like the executable
from your application, where you should extend the Activity class, as this will be the way to
framework know what to call in your executable.

The onCreate method is called when an Activity is executed and it does

the call in the system. The classes that extend Activity, in a more
comprehensive, interacting with both users and services or intentions.

Every Activity has a life cycle represented in the figure below. The methods
called will be the methods that we will override when we create our
own Activities.

31
 Introduction to Android development
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

Figure 44

onCreate()
It is the first function to be executed in an Activity. Generally, it is responsible
for loading the XML layouts and other initialization operations. It is executed
only once.

onStart()
It is called immediately after onCreate() - and also when an Activity
what was in the background regains focus.

onResume()
Just like onStart(), it is called during the initialization of the Activity and also
when an Activity regains focus. What is the difference between the two? The onStart()
is only called when the Activity was no longer visible and returns to having focus, the
onResume() is called on 'focus resumption'.

32
 onPause()
It is the first function to be invoked when the Activity loses focus (this happens
when a new Activity is started).

onStop()
It is only called when the Activity is completely covered by another
Activity.

onDestroy()
The last function to be executed. After that, the Activity is considered 'dead' -
that is, it can no longer be relaunched. If the user requests this Activity again,
a new object will be built.

Services are codes that run in the background. They are typically used
for tasks that require a long execution time.
Content Providers are the way used by
platform for sharing data between the applications running on the device.
A clear example of this is the Android contact management application.
what is native. Third-party applications can use a content
provider to read the contacts stored on the device simply.
Broadcast Receivers are components that 'listen' for the occurrence of
certain events, which can be native or triggered by applications. A
the application can, for example, use a broadcast receiver to be notified when
the device is receiving a call and, based on this information, perform
some type of processing.

Alongside these components, there is the manifest file [Link].

It is mandatory and unique for each application. It is where the configurations are made.
general about the application and the components that are part of it. And, putting everything together

Yes, there is the figure of Android Core, which is actually not a component.
specific, but rather the Android platform itself.
He is the one who provides the interaction between the components and the applications.
makes it possible to execute the code.

Screen components:
All Android screens are made in an XML file, which is located within
res/layout, where the details of each component are configured. A component
it is a graphic item.

33
33
 Introduction to Android development
UNIT Tools for Android SDK development
Packages and basic classes for development and layouts

Within the XML, each declared component can be manipulated in code

Java. All these components are children of [Link]. These Views will be
futuramente agrupados dentro de ViewGroup. Não coincidentemente, ViewGroup
is a daughter of View, forming the composite pattern, which also appears in Swing,
where Container is a subclass of Component.

View is the basic class that allows you to build interface components. A
View occupies a rectangular area on the screen and is responsible for drawing and serving
events, if necessary.

When necessary, we can define a derived class from View, which

implement the method (event) OnDraw (with header @Override protected
void onDraw(Canvas c)) to draw on the view. The invalidate() method will trigger the
execution of the mentioned event. This view may occupy a part of the screen of
device, sharing the screen with other elements.

A ViewGroup can contain Views and even ViewGroups as well.

gura below:

Figure 45

Some people will call these components widgets, but there is another
concept in android, which is a small application that can run within the home
of the mobile device, also called a widget.

The most common interface components are created with the classes
TextView, EditText, Button, RadioButton, RadioGroup, CheckBox, etc., all
derived directly or indirectly from the View class.

["LinearLayout classes of layouts, RelativeLayout, AbsoluteLayout, TableLayout"]

The FrameLayout is indirectly derived from the View class.

34
 Below are some of the most commonly used components, their properties and al-
guns listeners:

TextView
It is used to write a text on the Android screen, like a label.

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

<LinearLayout
xmlns:android="[Link]
android
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView android:id="@+id/textView">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=”Hello Views!”
android:textSize="28px"
android:textColor=”#12FF88”
android:textStyle="italic|bold"
/>
</LinearLayout>

The TextView is used to display text to the user, just like the JLabel does.
Swing. We can control its appearance and size via XML, just modify the
attributes in the TextView tag, some of these attributes are:
• android:text:value will be the text of the component;

• android:textColor: the color value in the format '#RRGGBB' in hexadecimal,

it is the color of the text;

• android:textSize:tamanho da fonte, deve ser indicado em px, ex: ’12px’;

• android:textStyle: text style (bold, italic);
• android:background: a color in the format #RRGGBB or a drawable.

Some attributes are predefined values like those of android:textStyle, even

thus, it is still possible to use more than one value in the attribute, this is where the
pipe operator "|".

For example, if we want the text in bold we use 'bold', in italics we use
the value "italic", but if we want the text to be bold+italic, we can use the
pipe joining the two: "bold|italic".

Figure 46

35
 Introduction to Android development
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

EditText
WhiletheTextViewdisplaystextlikeaJLabel,whoprovidestheuserwithacam-
TheplaceforhimtoentertextistheEditText(justliketheJTextField)whichisachildofTextView.

This component does not declare any new XML attributes, but uses those from
TextView, the difference is that it actually allows editing.

To make it editable or not, we use the android:editable attribute with true or

false (true is the default). The TextView does not allow editing even with true.

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

<LinearLayout
xmlns:android="[Link]
android
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView android:id=”@+id/textView”
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=”Hello Views!”
android:textSize="28px"
android:textColor=”#12FF88”
android:textStyle="italic|bold" />
<EditText android:id="@+id/editView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=”...”
android:textSize="28px"
android:textColor=”#12FF88”
android:textStyle="italic|bold" />
</LinearLayout>

Figure 47

Button
It is a simple button with something written just like the JButton. It is through it
that the user knows that some action will be taken when clicking.

36
 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android=[Link]
android
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView android:id="@+id/textView">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=”Hello Views!”
android:textSize="28px"
android:textColor=”#12FF88”
android:textStyle="italic|bold" />
<EditText android:id="@+id/editView">
android:layout_width="match_parent"
android:layout_height=”wrap_content”
android:text=”...”
android:textSize=”28px”
android:textColor=”#12FF88”
android:textStyle=”italic|bold” />
<Button android:id="@+id/button">
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=”Click!”
android:textSize="28px"
android:textColor=”#12FF88”
android:textStyle=”italic|bold” />
</LinearLayout>

Figure 48

CheckBox
It is a button that allows the user to toggle between the checked/unchecked options.
unchecked.

It also extends TextView, and the value assigned in 'android:text' is the text
visible next to the CheckBox.

37
 Introduction to development for Android
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

ToggleButton
ToggleButtons are buttons like CheckBoxes, but indicate checked/unchecked
with a 'light' instead of the drawing effect of a 'tick'. The 'android:text' attribute
it has no effect on this component, by default the text is alternated between ON and
OFF, making it possible to use attributes such as color, style, size, etc. to modify
the appearance of this text.

This component has two additional attributes for its tag.

• android:textOn:o texto que será exibido quando estado for ON;
• android:textOff:o texto que será exibido quando estado for OFF.

RadioButton
They are buttons like the CheckBox that allow you to mark it, but it is not possible.
uncheck it. To achieve the effect of single selection, it is necessary to add them to
a RadioGroup.

And our final XML:

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

<LinearLayout android:orientation="vertical">
xmlns:android="[Link]
android
android:layout_width="match_parent" android:layout_
height="match_parent">
<TextView android:id="@+id/listView" android:layout_
width="match_parent"
android:layout_height="wrap_content" android:-
Hello Views!
android:textSize="28px" android:textCol-
or="#12FF88" android:textStyle="italic|bold" />
<EditText android:id="@+id/textView" android:layout_
width="match_parent"
android:layout_height="wrap_content" android:-
...
android:textSize=”28px” android:textCol-
or="#12FF88" android:textStyle="italic|bold" />
<Button android:id="@+id/button" android:layout_
width="match_parent"
android:layout_height="wrap_content" android:-
Click!
android:textSize="28px" android:textCol-
or="#12FF88" android:textStyle="italic|bold" />
<CheckBox android:id="@+id/check" android:layout_
width="match_parent"
android:layout_height="wrap_content" android:-
Check it!

38
 android:textSize="28px" android:textCol-
or="#12FF88" android:textStyle="italic|bold" />
<ToggleButton android:id="@+id/tbutton"
android:layout_width="match_parent" android:lay-
out_height=”wrap_content”
android:textOn=”Ligado” android:textOff=”De-
sligado" android:textSize="28px"
android:textColor="#12FF88" android:text-
Style="italic|bold" />
<RadioGroup android:layout_width="match_parent"
android:layout_height="wrap_content">
<RadioButtonandroid:id=”@+id/r1button”
android:layout_width="match_parent" an-
droid:layout_height="wrap_content"
Option 1
Size=”28px” android:textColor=”#12FF88”
android:textStyle="italic|bold" />
<RadioButton android:id="@+id/r2button"
android:layout_width="match_parent" an-
droid:layout_height="wrap_content"
Option 2
Size=”28px” android:textColor=”#12FF88”
android:textStyle="italic|bold" />
</RadioGroup>
</LinearLayout>

Note that all of them have the attributes of TextView, making it easy to customize them.

And the final result of our application is as follows:

Figure 49

ImageView
The ImageView, as the name suggests, is a component that allows us to
working with images.

39
 Introduction to Android development
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

Putting images in Android becomes very simple with your drawable folder, because
If it does not exist, it simply does not map in [Link].

ImageView
android:id="@+id/imageView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:src=”@drawable/ic_launcher” />

As we have seen, there must be the image within res/drawable, and from the
Android 1.6, this folder allows for 3 different resolution versions.

Getting to know the types of layout better

When we define a layout file, we throw everything into it
components that we would like to have on the screen, as studied earlier.
One question that remains is: how will these components be arranged on the screen of the
device? Although they have directives regarding their height and width,
Who comes first? Who will be close to the other? How to define with more
accuracy of this positioning?

Android has child classes of ViewGroup, some of which act

as layout managers. They will define how your layout will be applied to the various
components (Views) contained in it. It is common to mix different layouts in a
same screen to achieve a more visually pleasing result.

Let's study now the various types of layout.

Figure 50

LinearLayout
LinearLayout is one of the simplest layouts. It arranges the elements inside
delete in a linear way, either horizontally or vertically.

To assist with our examples, we will create another layout file. With the
right-click on layout, select New - XML - Layout XML File.

40
 Figure 51

Now, we will give a name to our new layout. We will name it

linear_layout.

Figure 52

41
 Introduction to Android development
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

Below, the generated code:

Figure 53

Now, we will replace the generated code with the one described below:

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

<LinearLayout xmlns:android=[Link]
apk/res/android
android:layout_width="fill_parent"
android:layout_height="fill_parent"
Guidance
android:orientation="vertical"> it can be
vertical or
<TextView horizontal
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=”LinearLayout Vertical”
android:textSize=”20sp”/>

<TextView
android:id=”@+id/textView2”
android:layout_width="wrap_content"
android:layout_height="wrap_content"
I am
android:textSize=”20sp”/>

<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Learning
android:textSize=”20sp”/> Screen components

<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Android
android:textSize=”20sp”/>

<ImageView
android:id=”@+id/imageView1”
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src=”@mipmap/ic_launcher”/>

42
 <ImageView
android:id="@+id/imageView2"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:src=”@mipmap/ic_launcher”/>
</LinearLayout>

Switch to graphic mode and see how it turned out:

Figure 54

Figure 55

If you want to practice more, use the Widgets in the window next to you and drag.
for the device to check how it will look.

Also change the layout orientation to horizontal and see how it will look.
arrangement of objects. We can also define the strategy for width and height
of items: fill_parent or wrap_content (fill-fill; wrap-wrap, roll).

We can also change an interesting setting of each component:

it is the android:layout_gravity, which allows configuring components in various
screen locations, right, left and center.

43
 Introduction to Android development
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

Replace the layout above with the one below and see the result:

Figure 56

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

<LinearLayout xmlns:android=[Link]
res/android
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"

TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
I am
TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text=”Aprendendo”android:textSize=”22sp”/>
TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:text=”Android”android:textSize=”22sp”/>

<ImageView
android:id=”@+id/imageView1”
android:layout_width="wrap_content"

44
 android:layout_height="wrap_content"
android:layout_gravity="right"
android:src="@mipmap/ic_launcher"/>
<ImageView
android:id=”@+id/imageView2”
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
@mipmap/ic_launcher

<ImageView
android:id="@+id/imageView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:src="@mipmap/ic_launcher"/>

</LinearLayout>

Table Layout
In this type of layout, we place items in rows and columns. Attributes
Common ones are: padding (cell spacing) and gravity (alignment). See
android:stretchColumns="0,1" (columns to be "stretched"; use * for all).

The unit used is dip (Density-independent pixel), see more details at:
[Link]
[Link]

Example of TableLayout:

Figure 57

45
 Introduction to Android development
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

To test this layout, add another layout file, as seen before-

mind, and name it layout_table. Replace the generated code with the described below:

Figure 58

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

<TableLayout xmlns:android=[Link]
res/android
android:layout_width="match_parent"
android:layout_height="match_parent"
android:stretchColumns="1">
<TableRow>
TextView
Line 1 - Column 1
android:padding="3dip"/>
TextView
Line 1 - Column 2
android:gravity="right"
android:padding="3dip"/>
</TableRow>

<TableRow>
TextView
Line 2 - Column 1
android:padding="3dip"/>
TextView
Line 2 - Column 2
android:gravity="right"
android:padding="3dip"/>
</TableRow>
</TableLayout>

46
 Units that can be used for the dimensions:

Figure 59

RelativeLayout
As the name itself says, the Relative Layout is relative. But what does this mean?
What does it mean? Unlike the Linear Layout, which always specifies a direction.
horizontal or vertical, in the relative layout, we position the elements by reference
to other elements. For example, we say if the button will be below a field
of text, on the right side or even above it.

In this type of layout, we place items in positions relative to other items.

As tags android:layout_toRightOf, android:layout_toLeftOf, android:layout_below,
android:layout_above allows you to decide the relative positioning of components.

47
 Introduction to Android Development
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

To test this layout, add another layout file, as seen.

previously and name it layout_relative. Replace the generated code with
described below:

Figure 60

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

<RelativeLayoutxmlns:android=[Link]
apk/res/android
android:layout_width=”fill_parent”
android:layout_height="fill_parent">
TextView
android:id="@+id/label"
android:layout_width=”fill_parent”
android:layout_height="wrap_content"
Type here:
<EditText
android:id=”@+id/entry”
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@android:drawable/editbox_back
ground
android:layout_below="@id/label"/>
<Button
android:id="@+id/ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/entry"
android:layout_alignParentRight="true"
android:layout_marginLeft="10dip"
android:text=”OK”/>
<Button
android:layout_width="wrap_content"

48
 android:layout_height="wrap_content"
android:layout_toLeftOf="@id/ok"
android:layout_alignTop="@id/ok"
android:text=”Cancel”/>
</RelativeLayout>

Also, observe the tags for margin such asandroid:layout_marginLefte

android:layout_marginTop

See more details at:[Link]

Other android: tags within the XML description

We can also better configure our components through
other parameters:android:textSize=“18dip”, android:width=“150px”,
android:height=“60px” android:textStyle=“bold”. Observe the tags that define
cores (android:backgroundeandroid:textColor).

For this example, we will split the layouts into 2 files. Firstly,
we will create a layout file below with the name: listview_item.

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

<RelativeLayout xmlns:android=[Link]
apk/res/android
android:layout_width="fill_parent"
android:layout_height=”50dp”
android:background="@mipmap/ic_launcher">

<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_alignParentBottom="true"
android:orientation="vertical"
android:padding="5dip"
TextView
android:id="@+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:singleLine=”true”
android:textSize="28sp"
android:textStyle="bold"
android:textColor=”#0000ff”/>

</LinearLayout>
TextView
android:id="@+id/tvMsg"
android:layout_width="wrap_content"

49
 Introduction to Android development
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_marginRight="10dp"
android:textColor=”#ebebeb”
android:textSize=”20sp”
android:textStyle=”bold”/>

</RelativeLayout>

We will create the second layout file named layout_linear2 and we will
reference within it the file created above, as per the example below:

<LinearLayout xmlns:android=[Link]
apk/res/android
xmlns:tools=”[Link]
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background=”#ebebeb”
android:orientation="vertical">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="15dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop=”15dp”
android:background=”#990000”
android:orientation=”vertical”>

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:background=”#990000”
android:orientation="vertical">

<TextView
android:id="@+id/textView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:text=”Menu”
android:textAppearance="?android:attr/
textAppearanceLarge
android:textColor=”#00ff00”
android:textSize=”25sp”
android:textStyle=”bold”/>
<Button

50
 android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18dip"
android:width="150px"
android:height=”60px”
android:textStyle="bold"
Button/>

</LinearLayout>

<ListView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom=”10dp”
tools:listitem=”@layout/listview_item”>

</ListView> Reference
</LinearLayout> to the file
generated above
</LinearLayout

Perceba que podemos ter vários tipos de layouts, inclusive um dentro do outro.
We can also create separate layout files and perform the reference within.
from another layout file. The result will be the layout below:

Figure 61

If you want to better organize the colors, we can create an xml file of
colors and make the reference within the files created above. To do this, create a
XML file named "mycolor" will be available in the values folder.
as below and set your colors:

51
 Introduction to Android development
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

Figure 62

Nele, we will add the settings below:

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

<resources>
<colorname=”red”>#ff0000</color>
<colorname=”green”>#00ff00</color>
<colorname=”blue”>#0000ff</color>
</resources>

Now, we can replace the hexadecimal color code with the nomenclature
created above, as per the example below:

Replaceandroid:textColor=”#0000ff”forandroid:textColor="@color/
blue

How to test the layouts of the previous examples?

To execute using the new layout, we need to change in the programming the
selection of this new layout, as below:

Figure 63

52
 In the [Link] program, change the call to the new in the onCreate method.
layout, as below:

Figure 64

Now, run the project again and see how it will look on the emulator screen.
device.
If you have closed the emulator, when you run it, the screen below will open, but since you have already

we configured the emulator earlier, just select the Android virtual device
and the OK button.

Figure 65

53
 Introduction to Android development
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

When executing, the result will be as shown below:

Figure 66

Remember that we have created all the layouts below and, if you wish, we can
change to any of these created and run the project again.

Figure 67

The tags of the .xml files for Android

Although a basic knowledge of XML will make it easier to understand better the
syntax used in .xml files that describe the visual layout of a program screen
Android, the environment or IDE Android Studio will help in this development. In the figure,
we show how the Android Studio IDE guides us in the creation of a file
.xml. For the TextView interface component shown, a list appears of
tags that define the characteristics of this object.

54
 Figure 68

The options will be consulted for detailed help from a component class.
of the interface (again we use TextView as an example). Note, in the part
below the figure, the list of XML attributes, their names and related methods.

Figure 69

55
 Introduction to Android development
UNIT Tools for Android SDK development
Packages and basic classes for development and layouts

It's worth remembering that we can generate various types of layouts, and it depends on creativity.
the need of each one in order to develop a more improved layout.
Below, some examples of more sophisticated layouts:

Figure 70

Figure 71

56
Figure 72

57
 Introduction to Android development
UNIT Tools for Android SDK development
Basic packages and classes for development and layouts

Complementary Material
Indications to learn more about the topics covered in this Unit:

Sites
Layouts
[Link]
Table
[Link]
Compatibility with multiple screens
[Link]

Relative Layout
[Link]

58
References
[Link] DevelopersAvailable at [Link]

LECHETA, R. R. Google Android, Learn to create applications for devices

Mobile with the Android SDK. São Paulo: Novatec, 2010.

MEDNIEKS, Z. et al. Development of Android Applications. São Paulo:

Novatec, 2009.

LEE, W. M. Introduction to Android Application Development.

Rio de Janeiro: Modern Science, 2011.

59