GUÍA DE LABORATORIO 1

“Entorno de desarrollo para Android”

Tecsup

LABORATORIO

Objetivos:


Instalar y configurar el entorno para desarrollar aplicaciones móviles en Android.
Identificar la estructura de un proyecto Android en Eclipse.
Desarrollar una aplicación en Android utilizando las clases principales de la librería.

Equipos, Materiales, Programas y Recursos:



PC con Sistema Operativo Windows o Linux
Eclipse IDE
Android Development Tool para Eclipse
Android SDK

Introducción:
En la presente sesión se detalla los fundamentos para el diseño de interfaces Web para
móviles.
Seguridad:


Ubicar maletines y/o mochilas en el gabinete al final de aula de laboratorio.
No ingresar con líquidos ni comida al aula de laboratorio.
Al culminar la sesión de laboratorio, apagar correctamente la computadora y el
monitor.

Preparación:
Durante el desarrollo de los temas de clase se tendrán ejercicios explicativos en cada uno de
los puntos, ello le dará a la sesión una interacción de la teoría y la parte práctica, ya que en
todo el momento el alumno podrá comprobar en su propia PC, todos los ítems del manual.
Procedimiento y Resultados:

Dpto. de Informática – David Rodríguez - rcondezo@gmail.com

Pág. 1

Cuando está en true los datos de la aplicación pueden ser copiados para seguridad y luego restaurados.rcondezo@gmail. de Informática – David Rodríguez .xml configurar la aplicación:     <application          android:allowBackup="false"          android:icon="@drawable/ic_launcher"          android:label="Aplicación Móvil 1"      android:theme="@style/AppTheme" >   allowBackup: Por defecto está en true.xml : <resources>        <style name="AppBaseTheme" parent="android:Theme. Puede configurar diversos íconos que se mostrarán dependiendo del tamaño de la pantalla.  label: Determina el título de la aplicación  theme: Es posible personalizar configuraciones de diseño para toda la aplicación en el archivo /res/values/styles.com Pág.xml. while customizations related to              backward‐compatibility can go here.Tecsup PUESTA EN MARCHA 1) Configuraciones iniciales del proyecto Android En el AndroidManifest.  icon: Puede cambiar el ícono de la aplicación que aparece en el escritorio cambiando la imagen en la carpeta /res/drawable. ‐‐>      <style name="AppTheme" parent="AppBaseTheme">            <!‐‐ All customizations that are NOT specific to a particular API‐level  can go here. 2 .Light">          <!‐‐              Theme customizations available in newer API levels can go in              res/values‐vXX/styles.          ‐‐>      </style>        <!‐‐ Application theme. Esto puede traer consecuencias de seguridad porque si el Smartphone tiene habilitado el “USB Debugging” entonces se podrá copiar esos datos fuera del dispositivo. ‐‐>          <item name="android:layout_width">match_parent</item>          <item name="android:layout_height">wrap_content</item>          <item name="android:textColor">#ff0000</item>          <item name="android:typeface">serif</item>       </style>    </resources>  Dpto.

intent.action.android.xml tenemos la etiqueta <application>.com Pág. <activity              android:name=".MainActivity"              android:label="Bienvenido" >             <intent‐filter>                  <action android:name="android.com/guide/components/intents-filters. sin ninguna data de entrada y no retorna nada.category.rcondezo@gmail. Esta etiqueta lleva dentro al conjunto de <activity> de la aplicación.intent. El CATEGORY LAUNCHER también indica que el activity será el primero en iniciarse.  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. de Informática – David Rodríguez .html Dpto. Fuente: http://developer.LAUNCHER" />              </intent‐filter>  </activity>   name: Determina la clase Java del Activity.MAIN" />                  <category android:name="android.Tecsup 2) Configuraciones del Activity En el AndroidManifest. 3 .

public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.xml. de Informática – David Rodríguez .view.xml : Contiene al menú de la aplicación Dpto. } } Desde el Activity se llaman a dos XML:  /res/layout/activity_main. android. if (id == R.menu. } return super. this adds items to the action bar if it is present.inflate(R.com Pág. android. getMenuInflater().onOptionsItemSelected(item).layout.Menu.Tecsup 3) Clase Activity El Activity es una Clase de Java subclase de Activity y que controla el ciclo de vida de la aplicación. The action bar will // automatically handle clicks on the Home/Up button.main.action_settings) { return true. so long // as you specify a parent activity in AndroidManifest.os. } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu.id. android.activity_main). } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here.rcondezo@gmail.Bundle. import import import import android. int id = item.view. 4 .Activity. setContentView(R. menu).lab1. return true.MenuItem.app.xml  /res/menu/main.getItemId().onCreate(savedInstanceState). MainActivity.java package mod1.

android.xml <RelativeLayout xmlns:android="http://schemas.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 activity_main.com/apk/res/android" >        <item          android:id="@+id/menu_settings"          android:orderInCategory="100"          android:showAsAction="never"          android:title="@string/menu_settings"/>  </menu>  Dpto.rcondezo@gmail.Tecsup 4) Archivo /res/layout/activity_main.com/apk/res/android" xmlns:tools="http://schemas.lab1.com Pág.xml <menu xmlns:android="http://schemas.android. 5 .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. de Informática – David Rodríguez .

6 .rcondezo@gmail.com Pág. de Informática – David Rodríguez .Tecsup Dpto.

Tecsup LAYOUTS En el material teórico 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 opción: Dpto. de Informática – David Rodríguez .rcondezo@gmail.com Pág. 7 .

Tecsup GridLayout GridLayoutActivity.activity_grid_layout). android. public class GridLayoutActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.id.java package mod1. } } Dpto.com Pág. setContentView(R.rcondezo@gmail. so long // as you specify a parent activity in AndroidManifest.getItemId().lab1.view. android. if (id == R. de Informática – David Rodríguez .xml.app. The action bar will // automatically handle clicks on the Home/Up button.MenuItem. int id = item. menu).onOptionsItemSelected(item).onCreate(savedInstanceState). } return super. 8 . getMenuInflater().Menu. android.action_settings) { return true.Bundle.Activity. } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu. this adds items to the action bar if it is present. import import import import android. return true.inflate(R.menu.layout.grid_layout. } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here.view.os.

Tecsup activity_grid_layout.com/apk/res/android" xmlns:tools="http://schemas. de Informática – David Rodríguez .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.com Pág. 9 .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.android.xml <GridLayout xmlns:android="http://schemas.rcondezo@gmail.

Tecsup EJERCICIO Diseñar la siguiente pantalla con GridLayout:     Dpto. 10 .rcondezo@gmail. de Informática – David Rodríguez .com Pág.

Programar el método de ejecución del botón. de Informática – David Rodríguez .rcondezo@gmail. 11 .Tecsup LinearLayout Diseñar una pantalla que permita buscar canciones. Dpto.com Pág. Configurar los valores de “orientation”: vertical y horizontal.

activity_linear_layout). android. //setRequestedOrientation(ActivityInfo. android. de Informática – David Rodríguez .app.getItemId().content.Menu. android. } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here. this adds items to the action bar if it is present.linear_layout.view.SCREEN_ORIENTATION_SENSO R).pm. if (id == R.rcondezo@gmail.xml. int id = item. } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu.onCreate(savedInstanceState).menu. } }     Dpto. menu).Bundle.Activity. } return super. public class LinearLayoutActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.java package mod1. android. The action bar will // automatically handle clicks on the Home/Up button.Tecsup LinearLayoutActivity.id.MenuItem.com Pág. 12 . so long // as you specify a parent activity in AndroidManifest. getMenuInflater().layout.lab1.inflate(R.view. setContentView(R. import import import import import android.os. return true.onOptionsItemSelected(item).ActivityInfo.action_settings) { return true.

com/apk/res/android" xmlns:tools="http://schemas.rcondezo@gmail.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.android.Tecsup activity_linear_layout.android.xml <LinearLayout xmlns:android="http://schemas.LinearLayoutActivity" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Buscar canción" 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.com Pág. de Informática – David Rodríguez . 13 .lab1.

class). Dpto.com Pág. 14 . startActivity(intent).rcondezo@gmail. de Informática – David Rodríguez . colocar en el método del botón: Intent intent = new Intent(this. BienvenidaActivity.Tecsup EJERCICIO Diseñar las siguientes pantallas: Para iniciar otro Activiy.

table_layout.Bundle.view.lab1. android. getMenuInflater().activity_table_layout).action_settings) { return true.java package mod1. android.view.onCreate(savedInstanceState).onOptionsItemSelected(item). de Informática – David Rodríguez . so long // as you specify a parent activity in AndroidManifest. return true. if (id == R.menu. import import import import android.id. } @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here.layout. int id = item.inflate(R. } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu. 15 .Menu.rcondezo@gmail.os. } } Dpto.app. } return super. menu). this adds items to the action bar if it is present.Tecsup TableLayout TableLayoutActivity. public class TableLayoutActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.xml. setContentView(R. The action bar will // automatically handle clicks on the Home/Up button.Activity. android.MenuItem.com Pág.getItemId().

16 .lab1.android.com Pág.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.android.Tecsup activity_table_layout.com/apk/res/android" xmlns:tools="http://schemas.xml <TableLayout xmlns:android="http://schemas.rcondezo@gmail. de Informática – David Rodríguez .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.

17 .Tecsup android:layout_span="2" android:text="Ingresar" /> </TableRow> </TableLayout>   Dpto.rcondezo@gmail.com Pág. de Informática – David Rodríguez .

com Pág. de Informática – David Rodríguez . 18 .Tecsup   EJERCICIO Diseñar la siguiente pantalla: Dpto.rcondezo@gmail.

layout.Tecsup Fragment FragmentsActivity.rcondezo@gmail.view. android.Bundle. de Informática – David Rodríguez . android. import import import import import import import import android. android. public class FragmentsActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super. android.os.app.onCreate(savedInstanceState).Fragment.app. 19 .View.lab1. android. android.MenuItem.Menu.FragmentManager.app.app.view.activity_fragments).Activity. android.FragmentTransaction. setContentView(R.com Pág. } @Override public boolean onCreateOptionsMenu(Menu menu) { Dpto.java package mod1.view.

} @Override public boolean onOptionsItemSelected(MenuItem item) { // Handle action bar item clicks here.replace(R.button2)) { fr = new FragmentoDos().getItemId(). int id = item.id.onOptionsItemSelected(item). 20 .menu. if(view == findViewById(R.commit(). return true.inflate(R. } } Dpto.id.xml.fragments. } return super.com Pág.id.fragmento_principal.rcondezo@gmail. fr). fragmentTransaction. fragmentTransaction. if (id == R. getMenuInflater(). The action bar will // automatically handle clicks on the Home/Up button. menu). de Informática – David Rodríguez .action_settings) { return true. this adds items to the action bar if it is present.Tecsup // Inflate the menu. } public void cambiarFragmento(View view) { Fragment fr. FragmentTransaction fragmentTransaction = fm. so long // as you specify a parent activity in AndroidManifest. }else { fr = new FragmentoUno(). } FragmentManager fm = getFragmentManager().beginTransaction().

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.com Pág.rcondezo@gmail. 21 .xml <?xml version="1.Tecsup activity_fragments.FragmentoUno" android:id="@+id/fragmento_principal" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>     Dpto.android. de Informática – David Rodríguez .0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.

 container.ViewGroup.Bundle.app.fragments.  import android.    public class FragmentoUno extends Fragment {      @Override    public View onCreateView(LayoutInflater inflater.android.  import curso.view.layout.  import android.    import android. ViewGroup  container.fragmento_uno.  false).view.os.        Bundle savedInstanceState) {        return inflater.view.Fragment.inflate(R.inflate(R.    }  }  package curso.    import android.  import android.Fragment.Bundle.view. 22 .    }  }  Dpto.android.R.  import curso.View.os.com Pág.View.layout.fragments.layouts.fragmento_dos.view.Tecsup Crear las siguientes dos clases Java: package curso.  import android.  import android.  false).android.    public class FragmentoDos extends Fragment {      @Override    public View onCreateView(LayoutInflater inflater.android.        Bundle savedInstanceState) {        return inflater. de Informática – David Rodríguez .LayoutInflater. ViewGroup  container.view. container.app.ViewGroup.  import android.rcondezo@gmail.  import android.LayoutInflater.  import android.layouts.R.

Tecsup Crear los siguientes dos XML: fragmento_uno. de Informática – David Rodríguez .0" encoding="utf‐8"?>  <LinearLayout     xmlns:android="http://schemas.xml  <?xml version="1.android.rcondezo@gmail. 23 .0" encoding="utf‐8"?>  <LinearLayout     xmlns:android="http://schemas.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="Este es el Fragmento 1"             android:textStyle="bold" />    </LinearLayout>      fragmento_dos.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="Este es el fragmento 2"             android:textStyle="bold" />    </LinearLayout>  Dpto.xml <?xml version="1.android.com Pág.

de Informática – David Rodríguez . Dpto.rcondezo@gmail. 24 .com Pág.Tecsup Conclusiones: En la presente sesión. se detalló el entorno para el desarrollo de aplicaciones móviles en Android.