Contenido PRIMER PROYECTO ANDROID. CAPT URA DE BOTON, CONTROLES RADIOGROUP Y RADIOBUTTON. .......ecssosssnuestinnasiiamsensins 2h CONTROL CHECKBOX......csnecssnssnsernsensminanenasernsiasonimssensaniierasensniasernienssee 3B CONTROL SPINNER jissrniniesiviininstineimnnnieinniniieanninnsiinnninnen ABINTRODUCCION En el siguiente trabajo se podra encontrar una guia en la cual se presentan diversos ejemplos de uplicaciones que fueron creadas durante ests unidad, es importante mencionar que se programaron para dispositivos méviles de un sistema operative android en donde utilizamos todos los conocimientos obtenidos en los trabajos anteriores, Se padrin encontiar 5 pequefos programas, el primer programa es el muy conocide “hola mundo” con este programa se busca el aprender el entorno de eémo crear una aplicacién en android, después de ello se encontraran aplicact nes con a captura de un botén, conwoles radiogroup y radiobutton, eantrol checkbox y contol spinner en cada una de ella explica paso 0 paso como crearlas con su respective cidigo. y bien se podid notar que dependiendo de eudl se usen la interfiaz gréfica cambia debido a los controles se pueden usar para crear un tipo ment. Basicamente lo que podr encontrar en este material es Ia deseripeién paso a paso de emo se crea una peque! aplicacién para un dispositive mévil, como hoy en dia muchos saben, las aplicaciones para los méviles son muy usados, puesto que nos ayudan para resolver problemas o bien para la distraccién del usuario, por ello La rogramacién de méviles es muy importante como futuros Ing. en sistemas computacionales. Para hacer de este trabajo una guia clara y entendible, se incluyen capturas de pantalla de todos los procedimientos que se realizan, explicando a detalle cual es el proceso realizado en cada una de ellas, Ademas para que usted como lector pueds comprobar personalmente que la informacién que se presenta es veridiea, también se incluye el oSdigo utilizado parala creacién del programa, Algo que es importante mencionar es que el lenguaje de programacién utilizado il de mane para desarrollar el muy conocido Eclipse. Fue utilizado por su fac basta con saber qué componentes nesesitamos para ir arrastrando sobre las ventanas cada uno de estos, Pata los que hat trabajado © tienen cierta experiencia eon lenguajes como Visual Basie, no les serd tan complicado pues tienen cierto parecido en cuanto ala forma crear los mentis. Es importante mencionar que se tiene que instalar el SDK Manager ya que es un complemento para su funcionamiento,PRIMER PROYECTO ANDROIDComo primer paso, tenemos que abrir el software para desarrollar nuestra aplicaciGn, en este caso, utiligamos Eclipse en la versién, aunque puede utilizar el sw NetBeans 7,1, P=: Al hacerle clic notaremos como el softwar empezara a cargar, después aparecerd el entorno pars el desarrollo de nuestio programa Android, ‘cargar, aparecerd el entorno del software asf como se muestra en La Al termina NICO CRM SINAC Te ea ni En el siguiente paso fe daremos clic con el mouse a la pestafa File->New- >Android Application Project (er. Imagen), y luego nos aparecers ln ventana para crear la aplicacién Android, en donde se Je asignard el nombre de la aplicacién, nombre dal proyecto, nombre del paquete, y Ia versién de android que deseemos, en donde almacenaremos los archivos de java que crearemos, Por ejemplo nosotros le asignamos Ja siguiente, después pulsamos el botdn Next. 2" Imagen)ae Tee ee cente ee eet peneemen mt nite cd eaFinalmente veremos como el plugin de Android nos muestra todos los directories y los archivos para empezar a elsborar nuestro proyecto. Aqui observaremos que la interfiz visual se almacena en un archivo con extensién XML en la carpeta res, subearpeta Layout, en donde podemos observar ef entomo de la pantalla para a apticacién. (En la imagen 1 observamos el entoro visual al seleceionar la pestafa Grafieal Layout, En Is imagen 2 veremos el cddigo generade del archivo acti vity_main,xmtal seleecionar la siguiente pestaa),Nuevamente seleccionamos ta pestata Graphical Layout para visualizar el entorne, en donde le cambiaremos el nombre de! texto que ta etiqueta trae por default (Hello world”) Ste ey Hi eetastqe Sian me Para cambiar el texto selecctonaremos le etiqueta y pulsamos el botén derecho de! mouse y del mend contextual seleccionamos “Edit Text...” En el cuadro que nos aparece, le asignaremos el nombre, por ejemplo Mi Primer Programa Android y pulsamos OK. Luego notaremos que el texto anterior se cambié por ef que le asignamos,Después de haber hecho este paso, lenemos que crear nuestro AV para probar nuestra aplicacién para teléfones con §.0. Android, esto lo realizamos desde el ment seleccionado Ia pestaia Window->Android Virtual Device Manager. En el cuadro que aparece crearemos nuestro AVD seleccionando ef botén New... En el siguiente cuadro asignaremos ef nombre ab AVD seleccionando la resolucién de la pantalla para et teléfono, y el tamafo de ka memoria, asf como se muestra en fa imagen con los recuadros amarillos,Después de haber terminado nos debe mostrar el siguiente cuadro con el AVD que fueereado y cerramos. Con dl AVD creado, podemos probar lt aplicacién que simplemente debe mostrar el texto que le cambiamos a la etiqueta. Seleccionamos del menu li pestaia Run->Run AS> Android Applicaction. También podemos ejecutarlo abriendo nuestra clase principal, seleccionando src->androidya.proyecto00L > MainActivityjava y pulsamos el icono de reproduccién para ejecutarlo (Run AS...)En Ia ventana que nos aparece seleccionamos como queremos ejecutarlo, como es un proyecto Android, palsamos sobre la primera opeién y le damos clic en OK. Después de haber elaborado todos los pasos anteriores, nos aparecers la ventana en donde tendremos que esperarEn las siguientes imagenes observaremos como se muestra ta ejecucién simulando Ia aplicacién en un teléfono. Finalmente aparecera el texto que cambiamos al inicio de creat nuestra aplicacidn, La ejecucién y el resultado esperado se debe mostrar como la siguiente imagenCAPTURA DE BOTONPrograma 2: Sumador (TextView, EditText, Button) Este programa servird para familiarizarnos eon el uso de algunos elementos u objetos que forman parte del entorno de Android, tales como los campos de textoy los botones, aprender 4 como inigializarlos y como programarlos para que realicen una operacién bisica, La de sumar, Se deseribiré paso a paso el proceso que se sigue para lograr lo anterior y para conocer los elementos ya mencionados, 1. Como ya sabemos el primer paso es ir al ment file de la barra de meni, seleceionar now y eit la ventana secundaria que apatece seleceionar kx opeldn autdratd app ecation Praject tal'y como se ve en la imagen, enn 2 Se activara una ventana secundaria en la que proporcionaremos el nombre que deseemos 2 nuestra splicacién, en este caso le pondremos Preyecto002, es recomendable cambiar ef nombre del paquete y quitar el que aparece por default para cevitar errores fuluros. Pere Amitemiat Appiontion Ceomen row Anavens Aetcato (Prapet Marne preyerbnct Beckers Herren enerensre roy neta erin engi ea ih Andra igh Tenge SOR AP 10 Agave 2:4 (Dineen) ames Witt AIM 1, Acre 42 lly a) Teme Heto Ligtt man Dark Action Sas eae ‘Chaos ms Right AR ia ec ee septic coon aa be Phe gunias infernal Grearce pave tered socnrn ura brea ooden avd ce nroiers cia os eotbarere vevraccbeily barren Sefpcsohnt yor ch anwarg-commimuiny owe he teger veracan. The apeheatnn ist me ttre SLSTEnoA aati to muntauvermiead vcs mppstcansts my Took’ sane poss are mat tangatang whe Cant3+ Enseguida nos apareceré una ventana como la siguiente, mostrando la interfaz que se verd en el dispositive mévil, con el nombre del programa en ls parte superior, por default proporcions un Tex View: as ieee ienngutt “tna” miss “hast ann ang A es, Sj] =| immo +) =| wraeetieme =| @ Mannan © fac) oo oe =) cm cate 4. para empezar a realizar nuestra calculadora que realiza la suma de dos nimeros iniciaremos editando el TextView, para ello seleccionamos sobre el ebjeto TextView, y hacemos clic derecho, elegimos Edit Teat de la ventana secundaria, y se activara otra ventana en la que cambiaremos la leyenda del TextView, para ponerle “Ingrese El Primer valor” y luego Ok, como se muestra en las siguientes imagenes: eet5~ también cambiaremos et valor de la propiedad ID del objeto, seleccionando el o3jeto, clic derecho y elegimos I opeién Edi 1D, en este caso le pondremos 1, (por ‘TextView), y pulsamos Ok, como se ve a continuacién: 6. posteriormente ingresaremos otro objeto, este seri un EditText, que se encuentra en ls baa palette, Ia pestafta Text Fields con las letras abe y realizaremos los mismos pcovedimientos.hechos para el objeto anterior, en este caso solo para la propiedad Edit ID haciendo lic derecho sobre el objeto. le pondremos et! como se muestra. tt ere aps tenon tat Ad Soo nt tay om (Meaty wna ana7< Ahora ingresamos un Text View y un Edit Text, y realizaremos los mismos paso que en los objetos anteriores y lo nombraremos tv2, y et2, respectivamente, hasta aguf debe quedar de la siguiente forma, Para el caso de los et o Edit Text nos servird para pcopercionar los valores que se van a sumar 8 Luego agregamos otro objeto, en este caso ser un botim, que nos serviri para realizar las sumas cada vez que ingresemos los valores que se piden, Este botén lo encontraremos en Palette, Form Widget, seleocionamos el que dice Button, A este edjeto también le cambiaremes su ID de la misma forma que los anteriores: lo Hlamaremos sumar como se muestra en la imagen, 7 Textiiew LargeMedium Smal Button Small OFF CheckAink =~9. por ultimo agregaremos un objeto Text View, al cual nombraremos en su propiedad ID como tv3, y en su Propiedad Edit Text, le pondremos Resultado, que sera donde se imprima el resultado de las sumas que realicemos riven Large Medium Button sat checkCODIFICACION: ‘Ahora empezaremos con la codlificaciGn del nuestra sencilla aplicacién para esto tendremos que abrir elarchivo java de nuestro formulario, para esto nos vamos a la carpeta sre, ef paguete que ‘nos aparece en ext carpeta le damos dable clic al archivo java.como se muestra en La imagen 1 Foam ET Entra gaat | =| Wadeemss =) a =| enone | oe oan =| Gs obit = een SS eo on oe S chenctey SB cmereamayia ss caactroeee tm » portion Se abriré una pestafia Hamada MainActivity.java, que Por default nos muestra los siguientes Ibkxjues de ooigo, que pertenecen a todos las objetos que ya hentias ingresido en el formularioy anterior, Siteenmmmamt fh tannin [] escxags ansrolays.provestsoo2! public class Meinceavaty extendm Activiey ¢ pri Vola sieesavs (mings Savedthstandemeats) ( Bupar.cntkeats (savedtnatancageats)/ sevconcentvieg (R, 1ayeur publi boolean cnéeeavecpexonstieny (teny menu) 4 getMemutnetaee () 106)En el MainActivityJava instanciaremos cada uno de fos objetos que utilizamos en el formulario de nuestra caleuladora. Para esto ser necesario importar algunas librerias que nos seran tiles, asf como declarar las variables que identificaran'a cada objeto de ta interfaz que se van a utilizar como el de los EditText y'TextView, En la imagen podrén ver cémo queda ahora el eddi go, (Se encuentra resaltado el cddigo a ingresar). Aimpore andre t Activdey) import and ten import android. view.view) Koport android.widget EdinTent; Amport andeoid widget. TextView) public class Mainactivity extends Activity ( private edittext et, et23 Private TextView tv33 goverrise - protected void onCreste(Bundle savedinstancestate) { Super oncreate (savedinstancestate SetcontentView(R. layout activity main)s TAR 4d 082); 0) et2)) tae (EddeTent )FindviewyTd¢R. Ad eU3) , Para detetininar que al pulsar eLbotdn suntar de nuestra formula, se realice la operacién set necesario activar su propiedad OnClick para ello, regresanios a nuestro formularin, seleceionamas ef botén, elie dereeho, Other Properties, Inherited from View y OnCliekAparecerd la siguiente ventanaen la que definiremos el nombre de La propiedad, para este ejemplo le asignaremos sumar y te damos Ok. Una vez hecho esto, regresaremos a la pestafia java, en la que crearemos un método que para el botén, tal método se ¢jecutara cuando le demos click al botén sumar, En este iréiodo se realizara la operacién (suma), tomando los valores que se ingresen y se mostraran en el TextView (tv3) resultado, tal como se indica en el eédigo que se presenta a continuacién, tect msinamt —[f] Mandctirtyge =o foverride f + Protected void oncreate(tundte savedinatancestate) ( super songreate(aavedinstancestate) aetcententvien(R. layout acttv(ty_ natn); itis(taittext)tindviewtytd(A. id.ee2)5 et2a(EaitText)findvLewsyTd(R. Ld2t2)) ‘vSe(EdtText)findviewtyTd(R. fd203)5 ia =f public void sumar(view view) t ‘String valoriset.getText().testring(); String valor2eet2.getText().testeing(); Int. muroleinteger parseint (valor): int mreduInteper_porseIne(valor2)}; Caro ery nt. ramatareisnaroty String rexasString.vrlueof (suns) Ah setText (rena) + public bowlean ontreatetytionstenu(Heny menu) { Inflate the marus_tNin ait Weng bo the action bar AF Ae ki present .Fl cédigo completo para el formulario seria et siguiente: TB) Maindctivinyjove 5 | package com.practica. sumador; |S taper: andeotd.ox.sundsey import android.app.Activitys Saeere sedeeldsvten tans shew. Views import ondrotd.vdapre eateTexty Import android.widget.TentViews public claws Mainactivity extends activity ( private edittext eti, #t2; Private TextView tv3; | = goverride protected void onCrente(Bundle savedinstancestate) ( super .onCreate(savedinstancestate) j setContentView(R.leyout.ccttvity main); tia (Edittext)findviewyrd(R. et2e( Edit Text) findiewById« tu3e(EddtText )findviewsyTd(' + © public void sumar(view view) ¢ String valori-ct.getText().toString(); ‘String valor2-2t2.getText().toString( ); int nmrolsInteger.parseInt(valor1); int narodeInteger.parseInt(valor2); int sumasnerolénro2; String resu=String.valueOf(susa);; tu2.setText(resu); } 8 Bverride - Public boolean onCreateOptionsMenu(Menu menu) { 1 Inflate ‘the menu; this adds items to the action bar if it is present. getHenuInflater().dnflate(R.menu.mcin, menu); return true;Una ver hecho todo lo anterior, ahora probaremos la funcionafidad de este sencilla aplicacién, ya sea desde el formulario © desde 1a pestaiiaMoinActivity,java, lo ejecutam os pulsando el simbolo play de la barra de herramientas, nos saldré una ventana en ta que indicaremos que vamos a ejecuwr una aplicacién android (Androfd Avlication), esperamos a que cargue el emulador de dispositivos android, esto tardara i nuestra aplicacion que se debe de ver de lu siguiente forma: ua poco, y ya e En conclisién para este programa no nos queda més que mencionar que esta pequetia gufa que explica paso a paso el proceso de creacién de una sencilla aplicacién, es de mucha ayuxta para lox que empiezan desde oct en el campo de la programacién para méviles, destacando que lo importante de este segundo programs fue aprender a wilizar alguno de los objetos im como les TextView, los EditText y el Button En informes futuros. veremos nuevos odjetos y su utilizacién uilizados pata la creacién de aplicaciones basicas,CONTROLES RADIOGROUP Y RADIOBUTTONComo primer paso, tenemos que abrir el software para desarrollar nuestra aplicaciGn, en este caso, utilizamos Belipse en la versién, aunque puede utilizar el sw NetBeans 7,1, a Al hacerle clic notaremos como el softwar empezara a cargar, después aparecerd el entorno pars el desarrollo de nuestio programa Android, Al terminar de cargar, uparecent el entomodel software ast como se muestra en la siguiente imagen, NICO CRM SINAC Te ea ni En el siguiente paso le daremos clic con el mouse a la pestafia File> New- >Android Application Project (ler. Imagen), y luego nos aparecerd la ventana para crear la aplicacién Android, en donde se Je asignard el nombre de la aplicacién, nombre dal proyecto, nombre det paquete, y la versiGn de android que deseemos, en donde almacenaremos los archivos de java que crearemos, Por ejemplo nosotros te asignamos Ja siguiente, después pulsamos el botdn Next. 2" Imagen)Jer. Imagen 2a, Imagen Finalmente veremos como el plugin de Android nos muestra todos los directorios ¥ los archives para empezar a elaborar nuestro proyecto. Aqui observaremos que la interfazvisual se almacena en um archivo con extensién XML en la carpeta res, subcarpeta Layout, en donde podemos observar el entorno de Is pantalla para la aplicacién, (En ba imagen | observamos el entome visual al seleccionar La pestafia Grafieal Layout, En ka imagen 2 veremos el cédigo generado del archive activity_main.xml al seleccionar la siguiente pestaa), Imagen 1 Da pempe es oe : aawan = SIANuevamente seleccionamos la pestanta Graphical Layout para visualizar el entorno, en donde le cambiaremes el nombre del texto que la etiqueta trae por default (“Hello world”), por la frase “ingrese un valor” este paso s¢ puede observar en el proyecto01, Después seleccionamos la pestafia Text Fields y-seleccionamos un control de tipo EditText, basta con arrastrar el control al formulario, como se muestra en la imagen que se encuentra abajo. ws PSgiagi NZ HORAN re‘Nuevamente se crea una etiqueta, en esta ocasién nos vamos a la paleta Form Widgets, le damos clic para abrir y seleccionamos una etiqueta de tipo TextView lo seleccionamos y arrastramos al formulario, nuevamente cambiamos el nombre de ba eliqueta por el texto “ingrese un valoe” we | eee ome «| o>) ae ouaeme aanaae Después se ingresa una ver més un control de tipo EditText que los podemos encontrar en la palela Form Widgets, después de ello se ingresan dos controls de tbe RadioButton, para disponer_«de_—los-—comtroles. «de tipo. RadioButton debemos primero insertar un control de tipo RadioGroup este control. se encuentra en la paleta de componentes en la pestaha FormWidgels, seleccionamos el conirel y la.arastramos al formulario como se representaen la imagen de abajo. Como se puede observar al ingresar el control de tipo RadioGroup se erean tres objetos de tipo RadioButton, pero como en este problema solo se necesitan dos, nos dispusimosa borrar una, este paso es muy sencillo solo basta con dar clic derecho sabre uno de bos. o3jetos y nos aparece un recuadto y seleecionamos Delete para borrar dicho objeto, COI =o men te icesAhora nos disponemos a cambiar el ID de los dos controles de tipo RadioButton, estas Ipvaran por ID rl, e2 de igual modo cambiamos sus propiedades text por lus frases “sumar” y “restar”, para cambiar el ID se selecciona el objeto y se le da clic derecho y thos aparecerd un cuadro en el que seleccio naremos Edit ID, Oe A CSAS EET PE ST Una ver seleccionado nos aparecerd un recuadro como el que se presenta, se cambia el id y se guarda dando clic en OK (er. Imagen). Después de ello para cambiar las poopiedades Text se hace el mismo proceso para cambiarlo pero en esta ocasién seleccionaremos Edit Text y nos aparecerd como el segundo recuado (2da, Imagen). En este se cambiara el nombre por la frase “sumar” y'se guarda dando clic en OK,Se hace el mismo procedimiento para cambiar el ID del segunde objeto de tipo RadioButton dnicamente se cambiare el ID por 12'y Edit Text por restar. si wu iow Para cambiar ef ID de las control es EditText por et! y et2 el proceso es muy similar al anterior nue vamente se selecciona la etiqueta y damos clic derecho y seleccionamos Ia opcién Edit ID, nos apareceré un recuadro en el que ingresaremos ef nuevo ID. || heme es Seen‘Nuevamente apareceri un recuadro como el siguiente en el cual cambiaremos el ID por ell y pars guardar las cambios damos clic en OK. Se hace el mismo proceso pars cambiar ef segundo control EditText pero en esta ocacion con el IDet2, Por ultimo agregamos. botdn yun Text View paramostrar el resuliado, en el caso del botém cambiamos sus propiedsdes por id: button! y text : operar, en caso del tercer Text View con los val ores: id: tv3-y text : resultado.Por Ultimo se ingresa el cédigo fuente de la clase ProyectoO03Activity package com. javaya.proyecto003; import android.app.Activitys import android,os.Bundle; import android. view.Menu; import android.view.View,; import android.widget.gditText, import android, widget.RadioButton; import android, widget. Textviews public class MainActivity extends Activity ( private BditText etl, et2; private TextView tw3; private RadioButton ¥1,22; Override protected void onCreate (Bundle savedInstancestate) ( super .onCreate (savedInstancestate) + setContentView (R. Layout. activity main) ; et1=(BditText) findViewById (R.id.etl @t2=(Editfext) TindviewByra(R.id.et2): tu3=(TextView) findviewById (R.id.tv3); (RadioButton) findViewById(R.id.rl); RadioButton) findViewByld(Riid.r2); @override public boolean onCreateQptionsMenu(Menu menu) [{ // Inflate the menu; this adds items to the action bar if it is present, getMenuInflater (), inflate (R.menu.activity main, menu) 7 return true; i //este metodo se ejecutara cuando se presione el botén public void operar (View view) ( String valorl-etl.getText (). toString (); String valor2-et2,getText (), toString (); int nrol=Integer.parseint (valorl); int nro2=Integer.parseInt (valor2) ; 4 (rl.isChecked()==true) ( int sumasnrol+nro2; String resu-Stzing.valueOf{suma) ; tv3.setText (resu) ; } else if (r2.isChecked()=-true) (int restasnrol-aro2; String resu-String.valueOf(resta) ; ty3,setText (resu) > Se selecciona la pestafia MainAcivity y se ingresa el eédigo.o més bien se adapta,