GUA DE LABORATORIO 1

Entorno de desarrollo para Android

Tecsup

LABORATORIO

Objetivos:

Instalar y configurar el entorno para desarrollar aplicaciones mviles en Android.

Identificar la estructura de un proyecto Android en Eclipse.
Desarrollar una aplicacin en Android utilizando las clases principales de la librera.

Equipos, Materiales, Programas y Recursos:

PC con Sistema Operativo Windows o Linux

Eclipse IDE
Android Development Tool para Eclipse
Android SDK

Introduccin:
En la presente sesin se detalla los fundamentos para el diseo de interfaces Web para
mviles.
Seguridad:

Ubicar maletines y/o mochilas en el gabinete al final de aula de laboratorio.

No ingresar con lquidos ni comida al aula de laboratorio.
Al culminar la sesin de laboratorio, apagar correctamente la computadora y el
monitor.

Preparacin:
Durante el desarrollo de los temas de clase se tendrn ejercicios explicativos en cada uno de
los puntos, ello le dar a la sesin una interaccin de la teora y la parte prctica, ya que en
todo el momento el alumno podr comprobar en su propia PC, todos los tems del manual.
Procedimiento y Resultados:

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 1

Tecsup

PUESTA EN MARCHA
1) Configuraciones iniciales del proyecto Android

En el AndroidManifest.xml configurar la aplicacin:

<application
android:allowBackup="false"
android:icon="@drawable/ic_launcher"
android:label="AplicacinMvil1"

android:theme="@style/AppTheme">

allowBackup: Por defecto est en true. Cuando est en true los datos de la aplicacin
pueden ser copiados para seguridad y luego restaurados. Esto puede traer
consecuencias de seguridad porque si el Smartphone tiene habilitado el USB
Debugging entonces se podr copiar esos datos fuera del dispositivo.

icon: Puede cambiar el cono de la aplicacin que aparece en el escritorio cambiando

la imagen en la carpeta /res/drawable. Puede configurar diversos conos que se
mostrarn dependiendo del tamao de la pantalla.

label: Determina el ttulo de la aplicacin

theme: Es posible personalizar configuraciones de diseo para toda la aplicacin en el

archivo /res/values/styles.xml :

<resources>

<stylename="AppBaseTheme"parent="android:Theme.Light">
<!
ThemecustomizationsavailableinnewerAPIlevelscangoin
res/valuesvXX/styles.xml,whilecustomizationsrelatedto
backwardcompatibilitycangohere.
>
</style>

<!Applicationtheme.>
<stylename="AppTheme"parent="AppBaseTheme">

<!AllcustomizationsthatareNOTspecifictoaparticularAPIlevel
cangohere.>
<itemname="android:layout_width">match_parent</item>
<itemname="android:layout_height">wrap_content</item>
<itemname="android:textColor">#ff0000</item>
<itemname="android:typeface">serif</item>
</style>

</resources>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 2

Tecsup

2) Configuraciones del Activity

En el AndroidManifest.xml tenemos la etiqueta <application>. Esta etiqueta lleva

dentro al conjunto de <activity> de la aplicacin.

<activity
android:name=".MainActivity"
android:label="Bienvenido">
<intentfilter>
<actionandroid:name="android.intent.action.MAIN"/>
<categoryandroid:name="android.intent.category.LAUNCHER"/>
</intentfilter>
</activity>

name: Determina la clase Java del Activity.

label: Determina el nombre del Activity

intent-filter: El ACTION MAIN indica que el Activity va a ser el primero en

iniciarse en el proyecto, sin ninguna data de entrada y no retorna nada. El
CATEGORY LAUNCHER tambin indica que el activity ser el primero en
iniciarse. Fuente: http://developer.android.com/guide/components/intents-filters.html

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 3

Tecsup

3) Clase Activity
El Activity es una Clase de Java subclase de Activity y que controla el ciclo de vida
de la aplicacin.
MainActivity.java
package mod1.lab1;
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;

public class MainActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it
is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so
long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

Desde el Activity se llaman a dos XML:

/res/layout/activity_main.xml
/res/menu/main.xml : Contiene al men de la aplicacin

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 4

Tecsup

4) Archivo /res/layout/activity_main.xml

activity_main.xml
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="mod1.lab1.MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
</RelativeLayout>

5) Archivo /res/menu/activity_main.xml
<menuxmlns:android="http://schemas.android.com/apk/res/android">

<item
android:id="@+id/menu_settings"
android:orderInCategory="100"
android:showAsAction="never"
android:title="@string/menu_settings"/>
</menu>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 5

Tecsup

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 6

Tecsup

LAYOUTS
En el material terico se detallan los tipos de Layouts:
a)
b)
c)
d)
e)
f)

GridLayout
LinearLayout (vertical y horizontal)
RelativeLayout (Layout usado por defecto en Eclipse)
FrameLayout (Layout contenedor usado por defecto en Eclipse)
TableLayout
Fragment

Para modificar el tipo de Layout le damos click derecho en la siguiente opcin:

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 7

Tecsup

GridLayout
GridLayoutActivity.java
package mod1.lab1;
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;

public class GridLayoutActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_grid_layout);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.grid_layout, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
will
// automatically handle clicks on the Home/Up button, so
long
// as you specify a parent activity in
AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 8

Tecsup

activity_grid_layout.xml
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/GridLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="3"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="mod1.lab1.GridLayoutActivity">
<ImageView
android:id="@+id/imageView1"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/baladas" />
<ImageView
android:id="@+id/imageView2"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/espiritual" />
<ImageView
android:id="@+id/imageView3"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/pop_rock" />
<ImageView
android:id="@+id/imageView4"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/pop" />
<ImageView
android:id="@+id/imageView5"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/rb" />
<ImageView
android:id="@+id/imageView6"
android:layout_width="80dp"
android:layout_height="80dp"
android:src="@drawable/reggae" />

</GridLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 9

Tecsup

EJERCICIO
Disear la siguiente pantalla con GridLayout:

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 10

Tecsup

LinearLayout
Disear una pantalla que permita buscar canciones. Configurar los valores de
orientation: vertical y horizontal.
Programar el mtodo de ejecucin del botn.

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 11

Tecsup

LinearLayoutActivity.java
package mod1.lab1;
import
import
import
import
import

android.app.Activity;
android.content.pm.ActivityInfo;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;

public class LinearLayoutActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSO
R);
setContentView(R.layout.activity_linear_layout);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.linear_layout, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
will
// automatically handle clicks on the Home/Up button, so
long
// as you specify a parent activity in
AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 12

Tecsup

activity_linear_layout.xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="mod1.lab1.LinearLayoutActivity" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Buscar cancin"
android:textAppearance="?android:attr/textAppearanceMedium"
/>
<EditText
android:id="@+id/editText1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10" >
<requestFocus />
</EditText>
<Button
android:id="@+id/button1"
android:layout_width="285dp"
android:layout_height="wrap_content"
android:onClick="buscar"
android:text="Buscar" />
</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 13

Tecsup

EJERCICIO
Disear las siguientes pantallas:

Para iniciar otro Activiy, colocar en el mtodo del botn:

Intent intent = new Intent(this, BienvenidaActivity.class);
startActivity(intent);

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 14

Tecsup

TableLayout
TableLayoutActivity.java
package mod1.lab1;
import
import
import
import

android.app.Activity;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;

public class TableLayoutActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_table_layout);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if
it is present.
getMenuInflater().inflate(R.menu.table_layout, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
will
// automatically handle clicks on the Home/Up button, so
long
// as you specify a parent activity in
AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 15

Tecsup

activity_table_layout.xml
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/TableLayout1"
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"
tools:context="mod1.lab1.TableLayoutActivity" >
<TableRow>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Usuario: " />
<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10" >
<requestFocus />
</EditText>
</TableRow>
<TableRow>
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Clave: " />
<EditText
android:id="@+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="textPassword" >
<requestFocus />
</EditText>
</TableRow>
<TableRow>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 16

Tecsup

android:layout_span="2"
android:text="Ingresar" />
</TableRow>
</TableLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 17

Tecsup

EJERCICIO
Disear la siguiente pantalla:

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 18

Tecsup

Fragment

FragmentsActivity.java
package mod1.lab1;
import
import
import
import
import
import
import
import

android.app.Activity;
android.app.Fragment;
android.app.FragmentManager;
android.app.FragmentTransaction;
android.os.Bundle;
android.view.Menu;
android.view.MenuItem;
android.view.View;

public class FragmentsActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fragments);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 19

Tecsup

// Inflate the menu; this adds items to the action bar if

it is present.
getMenuInflater().inflate(R.menu.fragments, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
will
// automatically handle clicks on the Home/Up button, so
long
// as you specify a parent activity in
AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
public void cambiarFragmento(View view) {
Fragment fr;
if(view == findViewById(R.id.button2)) {
fr = new FragmentoDos();
}else {
fr = new FragmentoUno();
}
FragmentManager fm = getFragmentManager();
FragmentTransaction fragmentTransaction =
fm.beginTransaction();
fragmentTransaction.replace(R.id.fragmento_principal, fr);
fragmentTransaction.commit();
}

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 20

Tecsup

activity_fragments.xml
<?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" >
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Fragmento 1"
android:onClick="cambiarFragmento" />
<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:onClick="cambiarFragmento"
android:text="Fragmento 2" />
<fragment
android:name="mod1.lab1.FragmentoUno"
android:id="@+id/fragmento_principal"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 21

Tecsup

Crear las siguientes dos clases Java:

packagecurso.android.layouts.fragments;

importandroid.app.Fragment;
importandroid.os.Bundle;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importcurso.android.R;

publicclassFragmentoUnoextendsFragment{

@Override

publicViewonCreateView(LayoutInflaterinflater,ViewGroup
container,

BundlesavedInstanceState){

returninflater.inflate(R.layout.fragmento_uno,container,
false);

}
}

packagecurso.android.layouts.fragments;

importandroid.app.Fragment;
importandroid.os.Bundle;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importcurso.android.R;

publicclassFragmentoDosextendsFragment{

@Override

publicViewonCreateView(LayoutInflaterinflater,ViewGroup
container,

BundlesavedInstanceState){

returninflater.inflate(R.layout.fragmento_dos,container,
false);

}
}

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 22

Tecsup

Crear los siguientes dos XML:

fragmento_uno.xml
<?xmlversion="1.0"encoding="utf8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="EsteeselFragmento1"
android:textStyle="bold"/>

</LinearLayout>

fragmento_dos.xml
<?xmlversion="1.0"encoding="utf8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:id="@+id/textView2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Esteeselfragmento2"
android:textStyle="bold"/>

</LinearLayout>

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 23

Tecsup

Conclusiones:
En la presente sesin, se detall el entorno para el desarrollo de aplicaciones mviles en
Android.

Dpto. de Informtica David Rodrguez - rcondezo@gmail.com

Pg. 24