Objetivos: UNIVERSIDAD DE EL SALVADOR FACULTAD DE INGENIERIA Y ARQUITECTURA ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS PROGRAMACION PARA DISPOSITIVOS MOVILES PDM115 Ciclo I-2015 GUIA DE LABORATORIO N 1 PROGRAMACION BASICA SOBRE SMART PHONES ANDROID *Conocer el entorno de programación del IDE Android Studio para programación bajo el sistema Android. *Hacer una nueva aplicación en Android que utilice los controles: TextView, EditText y Button. Interactuando con la interfaz gráfica mediante métodos y eventos. Además de ejecutar un intent de forma implícita. *Ejecutar la aplicación mediante un Dispositivo Virtualizado(AVD) o con un dispositivo activo(smartphone que tenga Sistema operativo android).datos de Sesión en la Asignatura: Entre a la Sesión de PDM115 Busque en el icono de inicio Android Studio y entre.
Contenido Crear el primer proyecto en Android Studio... 1 Crear Dispositivo Móvil Virtualizado y dejarlo corriendo... 4 Creación de una segunda aplicación y reconocimiento del entorno del IDE... 9 Escoger emulador... 11 Creacion de Interfaz Grafica... 12 Agregar recursos(variables string)... 13 Asociar controles con los recursos... 15 Modificación de Aplicación... 17 Corra su aplicación en el Dispositivo Virtualizado que creamos al inicio... 22 Correrlo en su Dispositivo... 22 Anexo1:Teclas Rápidas para el emulador Android... 24 Anexo 2 código fuente del MainActivity.java... 25 Anexo 3 Código del archivo layout activity_main.xml... 29 Anexo 4 código fuente del archivo de recursos string.xml... 33
Crear el primer proyecto en Android Studio Entre al Entorno Integrado de Desarrollo(IDE) Android Studio(Boton de inicio, Android Studio ) y presione clic en Start a new Android Studio Project Presionamos Next y definimos el nombre de la aplicación del Proyecto y del Paquete (Como su carnet on 01 al final), como se muestra a continuación. Presionamos Next 1
Seleccionamos el SDK(API8) mínimo al que correrá nuestra aplicación Presionamos Next Seleccionamos Blank Activity(Activity en Blanco) 2
Cambiamos el titulo por Hola Mundo Y presionamos Finish Con lo anterior se cargara el IDE con una ventana de tips como la siguiente Si no deseamos ver tips cada vez que se cargue el entorno, desmarcamos el botón de chequeo que se muestra y presionamos close. 3
Crear Dispositivo Móvil Virtualizado y dejarlo corriendo (esto demora mucho tiempo, por eso se recomienda hacerlo en guías posteriores al inicio). Requisitos: 3.7pulgadas, resolución 480 X 800 Presionar clic en el AVD Manager 4
Ponerle por nombre su carnet y API_8(carnet_API_8) Presionar el botón de play para ejecutar el dispositivo 5
Este proceso puede durar hasta 5 minutos dependiendo de su equipo Si le aparece esta imagen, arrastre el candado hacia arriba Luego presione clic en ok 6
Al finalizar aparecerá un dispositivo como el que se muestra, arrastre el mouse como se muestra para ver los otros apps Con lo anterior aparecerá la siguiente pantalla Mantenga esta ventana abierta y pase al IDE Android Studio Correr la aplicación Hola mundo en el dispositivo emulado Presione clic en Run app 7
Presionar clic en OK ya que el dispositivo esta corriendo Nota: Podemos chequear la opción de Usar el mismo dispositivo para futuros lanzamientos de aplicaciones Aparecerá como se muestra 8
Creación de una segunda aplicación y reconocimiento del entorno del IDE Cree otro proyecto con el nombre carnet02 Con título del activity: Primera app Luego de crear la app, vamos a tener los siguientes objetos en el IDE Reconocimiento del Entorno Arbol de objetos de proyecto en Android Descripcion Se trabajara en esta guia tres elementos, Programa(archivo con extension java) en MainActivity.java(1), Interfaz grafica activity_main.xml(2) y un archivo de configuracion de algunos permisos(de ser necesario) llamado AndroidManifest.xml(3) Se utilizara ademas un archivo de recursos llamado string.xml(4) para definir variables utiles para su interfaz grafica. 9
Otros elementos Descripcion Se trabajara el diseño de las interfaces graficas mediante el arrastre de elementos de la paleta(1) hacia la pantalla de diseño(2) Para tener una mejor vista de la pantalla de diseño, podemos presionar el icono zoom in 10
Escoger emulador 11
Creacion de Interfaz Grafica Indicaciones: Hacer una interfaz que contenga ademas del textview de hello world(etiqueta), cuatro botones y editview como se muestran Nota: use la paleta para arrastrar los widgets(controles) Como se puede ver aparece un foco amarillo en los controles de botón de comando indicando que hay una advertencia, esta es debido a que no existe una variable de recursos asociada a la propiedad text de los objetos. Si se desea que el primer botón diga intento, los tres editview digan sumando1, sumando2 y sumando3. Tendremos que modificar el archivo de recursos string.xml y luego cambiar la propiedad text para direccionar el contenido hacia esos recursos. 12
Agregar recursos(variables string) Primera forma Agregue los recursos, ir a carpeta res, values, string.xml(a la izquierda) luego presione open editor. Utilizando el signo + agregue las variables que se le muestran Póngale en name boton1 y en default value Intent Repita lo anterior para los siguientes valores name Value boton1 Intent boton2 Sum1 boton3 Sum2 boton4 Sum3 parametro1 Sumando 1 parametro2 Sumando 2 parametro3 Sumando 3 13
En modo visual usted vera que le queda una lista como sigue: Segunda Forma Presione doble clic en la pestaña interior string.xml y digite lo que está en la imagen: De cualquiera de las formas que la haya hecho, se recomienda que guarde su archivo en este momento. 14
Asociar controles con los recursos Seleccione el activiti_main.xml y Presione clic en button1(1) luego presione clic en los puntos suspensivos de la propiedad text(2) Seleccione el recurso boton1(button1) y clic en OK 15
Vera como cambia la interfaz grafica y la propiedad text: @string/boton1 Repita lo anterior para las propiedades hint y text de los siguientes controles Objeto(interfaz) propiedad Valor button2 text @string/boton2 button3 text @string/boton3 button4 text @string/boton4 TextField1 hint @string/parametro1 TextField2 hint @string/parametro2 TextField3 hint @string/parametro3 Si no lo quiere hacer de manera visual, hágalo directamente digitando el nombre del recurso en la propiedad requerida. 16
Al finalizar vera su interfaz grafica similar a esta:. Modificación de Aplicación Entre a la aplicación MainActivity.java y vera algo como lo siguiente: 17
Modifique el código hasta que aparezca como el siguiente. Nota: Presione click en la opción del foco rojo que sugiere que se implementen los métodos. 18
Con esto el ide Eclipse debe de haber generado el método onclic pada sobreescribirlo. Preguntas: Por qué tiene punto y coma la última línea de comando? Es un error? Agregue la definición del método de ejecución para todos los botones al click 19
Creación de Código para ejecutar desde los botones Bajo el mismo paquete que esta el MainActivity, agregue una nueva clase(clic derecho en el paquete, new, class ) que se llame Métodos. Y digítele el código siguiente: 20
A continuación vuelva al MainActivity.java y digite el código siguiente; 21
Corra su aplicación en el Dispositivo Virtualizado que creamos al inicio Correrlo en su Dispositivo Si desea correrlo en su dispositivo directamente, deberá seguir las siguientes indicaciones: a- Entre a opción Run.. b- Edit Configurations c- Conecte su dispositivo a la Pc d- Seleccione El dispositivo destino(target device) como USB 22
e- y Run 23
Anexo1:Teclas Rápidas para el emulador Android Emulated Device Key Keyboard Key Home HOME Menu (left softkey) F2 or Page-up button Star (right softkey) Back Call/dial button Hangup/end call button Search Power button Audio volume up button Audio volume down button Camera button Switch to previous layout orientation (for example, portrait, landscape) Switch to next layout orientation (for example, portrait, landscape) Toggle cell networking on/off Toggle code profiling Toggle fullscreen mode Toggle trackball mode Enter trackball mode temporarily (while key is pressed) DPad left/up/right/down Shift-F2 or Page Down ESC F3 F4 F5 F7 KEYPAD_PLUS, Ctrl-F5 KEYPAD_MINUS, Ctrl-F6 Ctrl-KEYPAD_5, Ctrl-F3 KEYPAD_7, Ctrl-F11 KEYPAD_9, Ctrl-F12 F8 F9 (only with -trace startup option) Alt-Enter F6 Delete KEYPAD_4/8/6/2 24
DPad center click KEYPAD_5 Onion alpha increase/decrease KEYPAD_MULTIPLY(*) / KEYPAD_DIVIDE(/) Anexo 2 código fuente del MainActivity.java import android.content.intent; import android.support.v7.app.actionbaractivity; import android.os.bundle; import android.view.menu; import android.view.menuitem; import android.view.view; import android.widget.button; import android.widget.edittext; import android.widget.textview; public class MainActivity extends ActionBarActivity { Button btnejecutaractividad; Button btnejecutarmetodo1; Button btnejecutarmetodo2; Button btnejecutarmetodo3; TextView lbletiqueta; EditText edtparametro1; EditText edtparametro2; EditText edtparametro3; 25
String sumastr; @Override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); btnejecutaractividad= (Button) findviewbyid(r.id.button1); btnejecutarmetodo1= (Button) findviewbyid(r.id.button2); btnejecutarmetodo2= (Button) findviewbyid(r.id.button3); btnejecutarmetodo3= (Button) findviewbyid(r.id.button4); lbletiqueta=(textview) findviewbyid(r.id.textview); edtparametro1=(edittext) findviewbyid(r.id.edittext); edtparametro2=(edittext) findviewbyid(r.id.edittext2); edtparametro3=(edittext) findviewbyid(r.id.edittext3); View.OnClickListener onclick = new View.OnClickListener() { @Override public void onclick(view v) { int numint1,numint2,numint3; float numfloat1,numfloat2,numfloat3; switch(v.getid()){ case R.id.button1: Intent intent=new Intent(Intent.ACTION_SEND); intent.putextra(intent.extra_text,"this is my text to send."); intent.settype("text/plain"); 26
startactivity(intent); break; case R.id.button2: //dos parametros flotantes numfloat1=(float)float.valueof(edtparametro1.gettext().tostring()); numfloat2=(float)float.valueof(edtparametro2.gettext().tostring()); sumastr=metodos.suma(numfloat1,numfloat2); lbletiqueta.settext(sumastr); break; case R.id.button3: //tres parametros flotantes numfloat1=(float)float.valueof(edtparametro1.gettext().tostring()); numfloat2=(float)float.valueof(edtparametro2.gettext().tostring()); numfloat3=(float)float.valueof(edtparametro3.gettext().tostring()); sumastr=metodos.suma(numfloat1,numfloat2,numfloat3); lbletiqueta.settext(sumastr); break; case R.id.button4: //tres parametros enteros numint1=(int)integer.valueof(edtparametro1.gettext().tostring()); numint2=(int)integer.valueof(edtparametro2.gettext().tostring()); numint3=(int)integer.valueof(edtparametro3.gettext().tostring()); sumastr=metodos.suma(numint1,numint2,numint3); 27
lbletiqueta.settext(sumastr); break; } } }; btnejecutaractividad.setonclicklistener(onclick); btnejecutarmetodo1.setonclicklistener(onclick); btnejecutarmetodo2.setonclicklistener(onclick); btnejecutarmetodo3.setonclicklistener(onclick); } @Override public boolean oncreateoptionsmenu(menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getmenuinflater().inflate(r.menu.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(); 28
//noinspection SimplifiableIfStatement if (id == R.id.action_settings) { return true; } return super.onoptionsitemselected(item); } } Anexo 3 Código del archivo layout 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: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:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/textview" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" 29
android:inputtype="number" android:ems="10" android:id="@+id/edittext" android:layout_margintop="88dp" android:layout_below="@+id/textview" android:layout_alignleft="@+id/edittext2" android:layout_alignstart="@+id/edittext2" android:hint="@string/parametro1" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" android:inputtype="number" android:ems="10" android:id="@+id/edittext2" android:layout_below="@+id/edittext" android:layout_torightof="@+id/textview" android:layout_toendof="@+id/textview" android:hint="@string/parametro2" /> <EditText android:layout_width="wrap_content" android:layout_height="wrap_content" 30
android:inputtype="number" android:ems="10" android:id="@+id/edittext3" android:layout_below="@+id/edittext2" android:layout_alignleft="@+id/edittext2" android:layout_alignstart="@+id/edittext2" android:hint="@string/parametro3" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/boton1" android:id="@+id/button1" android:layout_margintop="19dp" android:layout_below="@+id/textview" android:layout_centerhorizontal="true" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/boton2" android:id="@+id/button2" android:layout_below="@+id/edittext3" 31
android:layout_toleftof="@+id/button3" android:layout_tostartof="@+id/button3" android:layout_margintop="43dp" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/boton3" android:id="@+id/button3" android:layout_aligntop="@+id/button2" android:layout_alignleft="@+id/button1" android:layout_alignstart="@+id/button1" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/boton4" android:id="@+id/button4" android:layout_aligntop="@+id/button3" android:layout_torightof="@+id/button3" android:layout_toendof="@+id/button3" /> </RelativeLayout> 32
Anexo 4 código fuente del archivo de recursos string.xml <resources> <string name="app_name">carnet02</string> <string name="hello_world">hello world!</string> <string name="action_settings">settings</string> <string name="boton1">intent</string> <string name="boton2">sum1</string> <string name="boton4">sum3</string> <string name="boton3">sum2</string> <string name="parametro1">sumando 1</string> <string name="parametro2">sumando 2</string> <string name="parametro3">sumando 1</string> </resources> 33