DIRECCIN REGIONAL DE EDUCACIN PUNO

INSTITUTO SUPERIOR DE EDUCACIN PBLICO JOS ANTONIO ENCINAS - PUNO

COMPUTACIN E INFORMTICA
Autorizado por D.S. 022-98-ED Revalidado por R.D. 0122-2006-ED

GUA DE APRENDIZAJE N 02
1) DATOS INFORMATIVOS
1.
2.
3.
4.
5.
6.

Carrera Profesional
Mdulo
Unidad Didctica
Semestre
Semestre Acadmico
Docente

: Computacin e Informtica
: Gestin de aplicaciones para internet y produccin multimedia.
: Aplicaciones Mviles
: 2015 - II
: Sexto
: Ing. Ronald Mamani Mayta

2) CONTENIDO
PRIMERA APLICACIN
REQUERIMIENTOS DE SOFTWARE
Normalmente las aplicaciones Android estn escritas en Java, para el desarrollo de las
aplicaciones vamos a poder utilizar un potente y moderno entorno de desarrollo. Al igual que
Android, todas las herramientas estn basadas en software libre, en la presente unidad didctica
trabajaremos con las siguientes herramientas:
Java Development Kit (JDK) 6 o superior.
Android Studio 1.3.1.
Android SDK (Google)
Java JDK
Java Development Kit (o JDK), es el kit de desarrollo oficial del Lenguaje de
Programacin Java, uno de los ms populares entre los orientados a objetos.
En la actualidad el JDK es uno de los entornos ms populares para Java, no
incluye IDE grfico.
Esta herramienta la podemos descargar de:
http://www.oracle.com/technetwork/java/javase/downloads/java-sejdk-7-download-432154.html
Android Studio
Android Studio es un Entorno de Desarrollo Integrado para la plataforma
Android, es un entorno de software especializado para desarrollar
aplicaciones mviles, utilizando el de programacin Java.
Esta herramienta la podemos descargar de:
http://developer.android.com/intl/es/sdk/index.html
Android SDK
El software Developer Kit, que nos permite compilar aplicaciones en
Android y emularlas (emular el hardware de otro equipo).
El SDK de Android contiene los llamados targets de Android, es decir las
libreras necesarias para desarrollar en cada una de las versiones concretas
de Android, contiene un depurador, un emulador, documentacin, etc.
Esta herramienta la podemos descargar de:
http://developer.android.com/sdk/index.html
Pg. .:: 1 ::.

Aplicaciones Mviles

Ing. Ronald Mamani Mayta

INSTALACIN DE LOS PAQUETES

A continuacin describiremos el proceso a seguir para instalar el software anterior.
1. Descargar e instalar el compilador de Java y la Mquina Virtual Java.

2. Descargar e instalar el Android Studio

3. En la ventana que aparece hacer clic en Next.

4. Seleccionar los componentes que se instalaran (seleccionar todos) y clic en Next

Pg. .:: 2 ::.

Aplicaciones Mviles

Ing. Ronald Mamani Mayta

5. Aceptar los trminos de la licencia haciendo clic en I Agree

6. Indicamos la localizacin de la instalacin del Android Studio y del SDK y clic en Next.

7. Hacer clic en Next y luego clic en Install.

Pg. .:: 3 ::.

Aplicaciones Mviles

Ing. Ronald Mamani Mayta

8. Iniciar el proceso de instalacin.

9. Cuando complete la instalacin, hacer clic en Next.

10. Cuando complete la configuracin del Android Studio, hacer clic en Finish

Pg. .:: 4 ::.

Aplicaciones Mviles

Ing. Ronald Mamani Mayta

11. Seguidamente cargara el programa

12. Para completar la instalacin hacer clic en Ok.

13. Cargara el programa y para la primera ejecucin hacer clic en Cancel.

14. Seguidamente muestra la ventana principal del Android Estudio.

Pg. .:: 5 ::.

Aplicaciones Mviles

Ing. Ronald Mamani Mayta

Pg. .:: 6 ::.

Aplicaciones Mviles

Ing. Ronald Mamani Mayta

CREAR EL PRIMER PROYECTO ANDROID

Objetivo: Desarrollar paso a paso un proyecto simple utilizando las herramientas de desarrollo
de Android.
Para crear el primer proyecto Android realizamos:
1. Ejecutamos el Android Studio

2. La primera vez que ejecutamos puede salir un dilogo para actualizar el Android SDK luego
aparece una ventana de bienvenida donde elegimos Start a new Android Studio project.

3. Damos nombre al proyecto (proyecto001) y la localizacin luego hacemos clic en Next.

4. Elegimos el mnimo SDK para que se pueda ejecutar nuestra aplicacin.

Pg. .:: 7 ::.

Aplicaciones Mviles

Ing. Ronald Mamani Mayta

5. Elegimos una Blank Activity y presionamos Next.

6. Para terminar damos nombre a la actividad y hacemos clic en Finish.

Pg. .:: 8 ::.

Ing. Ronald Mamani Mayta

Aplicaciones Mviles

7. Finalmente podemos ahora ver el entorno del Android Studio para codificar la aplicacin:

8. El Android Studio nos genera todos los directorios y archivos bsicos para iniciar nuestro
proyecto, los podemos ver en el lado izquierdo del entorno de desarrollo:

9. La interfaz visual de nuestro programa para Android se almacena en un archivo XML en la

carpeta res, subcarpeta layout y el archivo se llama activity_main.xml. En esta carpeta
tenemos creada nuestra primera pantalla.
Al seleccionar este archivo el Android Studio nos permite visualizar el contenido en "Design"
o "Text" (es decir en vista de diseo o en vista de cdigo):
Vista de diseo

Vista de cdigo

Pg. .:: 9 ::.

Aplicaciones Mviles

Ing. Ronald Mamani Mayta

10. El Android Studio ya insert un control de tipo RelativeLayout que permite ingresar controles
visuales alineados a los bordes y a otros controles que haya en la ventana.

11. Luego contenido en el control RelativeLayout hay otro control de tipo TextView que es
bsicamente una etiqueta o label que mostrar en pantalla el valor almacenado en la
propiedad text.

12. Podemos modificar directamente el archivo xml o en "vista de diseo" modificar los valores
de las propiedades. Elegimos nuevamente la pestaa "Design" y seleccionamos el TextView
con el mouse y vemos que en la parte derecha de la pantalla aparece una ventana llamada
"properties":

13. Y estando seleccionado el TextView buscamos la propiedad Text y cargamos: "Mi primer
programa para Android" y presionamos Enter, podemos ver que se actualiza la vista:

14. Para ejecutar la aplicacin presionamos el tringulo verde o seleccionamos del men de
opciones Run -> Run app y en este dilogo procedemos a dejar seleccionado el emulador por
defecto que aparece (Android 5 1) y presionamos el botn "OK":

Pg. .:: 10 ::.

Aplicaciones Mviles

Ing. Ronald Mamani Mayta

15. Luego de un rato aparecer el emulador de Android en pantalla (el arranque del emulador
puede llevar ms de un minuto), es IMPORTANTE tener en cuenta que una vez que el emulador
ha arrancado no lo debemos cerrar cada vez que hacemos cambios en nuestra aplicacin o
codificamos otras aplicaciones, sino que volvemos a ejecutar la aplicacin con los cambios y
al estar el emulador corriendo el tiempo que tarda hasta que aparece nuestro programa en el
emulador es muy reducido.
Cuando termin de cargarse el emulador debe aparecer la interfaz del mismo:

16. Procedemos a desbloquear la pantalla de inicio y podremos observar la ejecucin de nuestra

primer aplicacin en Android:
Pg. .:: 11 ::.

Ing. Ronald Mamani Mayta

Aplicaciones Mviles

EJERCICIO N 1: Crear una aplicacin Android que permita mostrar las siguientes lneas de
texto:

ESCRIBIR Y MANIPULAR TEXTO

Objetivo: Modificar el color de fondo, dar formato al texto; modificar y aadir texto utilizando las
herramientas de programacin de Java.
Pg. .:: 12 ::.

Aplicaciones Mviles

Ing. Ronald Mamani Mayta

Para este proyecto realizamos:

1. Desde el men presionamos File>New>New Project y le damos el nombre proyecto002.
2. La cadena de texto que queremos escribir en la pantalla se define en el fichero xml mediante
TextView, en este caso pondremos Hola Android
<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: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">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Hola Android"
android:id="@+id/textView"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>

3. Al ejecutar este proyecto en el emulador de Android (AVD) tenemos.

COLOR DE FONDO Y FORMATO DEL TEXTO

A partir del fichero activity_main.xml podemos aadir otras propiedades para modificar la
presentacin y el formato del texto, estas son:
4. Cambiar el color de fondo a negro aadiendo el modificador:
android:background=#000000

Pg. .:: 13 ::.

Ing. Ronald Mamani Mayta

Aplicaciones Mviles

5. Cambiar el color de texto a blanco aadiendo en TextView el modificador

android:textColor=#ffffff
6. Cambiar el tamao del texto a 24 puntos aadiendo el modificador
android:textSize=24sp
7. Centrar el texto mediante:
android:layout_gravity=center
8. Guardar el archivo, con todos estos cambios el archivo activity_main.xml quedara de la siguiente
manera:
9. Al ejecutar la aplicacin tenemos:

MODIFICAR EL TEXTO DESDE JAVA

Para modificar el texto desde Java realizamos:
10. Aadimos una etiqueta o ID al texto TextView en el archivo xml:
android:id=@+id/tv1 y el texto quedara identificado por tv1
11. En la clase Activity del cdigo java escribimos la siguiente instruccin que define un objeto
TextView asociado a la id tv1.
TextView tv1=(TextView) findViewById(R.id.tv1);
12. El mtodo findViewById() aplicado a la variable R.id.tv1 se encarga de localizar el bloque de
activity_main.xml asociado a TextView. Luego definimos otro texto con el mtodo setText.
tv1.setText(He modificado TextView con un nuevo texto )
13. El resultado se puede ver en la siguiente ventana:

Pg. .:: 14 ::.

Aplicaciones Mviles

Ing. Ronald Mamani Mayta

14. Guardar el archivo, con todos estos cambios el programa Java quedara as:
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//definimos un objeto del tipo TextView
TextView tv1= (TextView) findViewById(R.id.tv1);
tv1.setText("He modificado TextView con un nuevo texto"+"
Utilizando Java");
}

MODIFICAR EL COLOR DESDE JAVA

Para cambiar el color desde Java realizamos:
15. Aadimos la siguiente instruccin para definir el texto rojo:
tv1.setTextColor(Color.argb(255,255,0,0))
El mtodo Color.argb(alpha, red, green, blue) construye el color asociado a los componentes
de transparencia, rojo, verde y azul que son nmeros entre 0 y 255.
16. El resultado se ve en la siguiente ventana:

Pg. .:: 15 ::.

Aplicaciones Mviles

Ing. Ronald Mamani Mayta

AADIR TEXTO ADICIONAL DESDE JAVA

Para aadir nuevo texto a un Layout desde Java realizamos:
17. Aadimos una etiqueta o ID al LinearLayout en el archivo xml:
android:id=@+id/Ll1 y el contenedor quedara identificado por Ll1
18. Definimos un nuevo objeto de tipo TextView mediante:
TextView tv2=new TextView(this);
19. Podemos cambiar tambin sus propiedades color y tamao:
tv2.setTextColor(Color.argb(255,0,0,255);
tv2.setTextSize(40);
20. Ahora digitamos texto a aadir:
tv2.setText(Aadiendo nuevo texto con addView)
21. Finalmente se debe aadir al Layout que debemos definir previamente mediante:
LinearLayout Ll=(LinearLayout) findViewById(R.id.Ll1);
ll.addView(tv2)
22. El cdigo completo para aadir un texto a un Layout queda:
TextView tv2=new TextView(this);
tv2.setTextColor(Color.argb(255,0,255,0));
tv2.setTextSize(40);
tv2.setText("Aadiendo un texto con addView");
LinearLayout Ll=(LinearLayout) findViewById(R.id.Ll1);
ll.addView(tv2);

23. El resultado se muestra en la siguiente ventana:

Pg. .:: 16 ::.

Aplicaciones Mviles

Ing. Ronald Mamani Mayta

DEFINIR UN MTODO print()

El cdigo del ejemplo anterior habr que repetirlo cada vez que queramos aadir un nuevo texto
al Layout, para simplificar la escritura podemos definir un mtodo print(Layout, String) para
aadir un texto a un layout, para ello realizamos:
24. Aadimos el siguiente mtodo a nuestra actividad:
public void print(LinearLayout Ll, String texto){
TextView tv=new TextView(this);
tv.setTextColor(Color.argb(255,0,0,255));
tv.setTextSize(18);
tv.setText(texto);
ll.addView(tv);
}

25. Ahora para aadir un texto al layout llamamos a este mtodo.

LinearLayout Ll=(LinearLayout) findViewById(R.id.Ll1);
print(Ll,"Aadiendo texto al Layout usando el metodo print() "
+"que hemos definido");

26. El resultado se muestra en la siguiente ventana:

Pg. .:: 17 ::.

Aplicaciones Mviles

Ing. Ronald Mamani Mayta

EJERCICIO N 2: Crear una aplicacin Android que permita aadir diversos textos con
diferentes formatos a un layout, el mismo que debe estar definido utilizando un mtodo
imprimir(), la salida debe ser similar a la siguiente ventana:

Pg. .:: 18 ::.