SlideShare una empresa de Scribd logo
1 de 26
En este diálogo especificamos el nombre de la
aplicación y proyecto (pueden ser iguales) y el
nombre del paquete java donde se almacenarán los
archivos java que creemos (normalmente la url de
su empresa al revés).
Ahora empezaremos a presionar el botón next para pasar a
otras configuraciones de nuestra aplicación, por el
momento dejaremos todos los valores por defecto en cada
una de los diálogos que aparece (son 5 diálogos
actualmente), en el último diálogo debe aparecer el botón
"Finish" el cual presionamos.
Veamos paso a paso como creamos la interfaz visual
de nuestro programa. Primero borramos el TextView
que aparece por defecto cuando se crea un proyecto
con el ADT. Ahora desde la ventana "Palette"
seleccionamos de la pestaña "Form Widgets" el
control "TextView" y lo arrastramos a la ventana de
diseño de nuestra interfaz:
Ahora lo seleccionamos y en la ventana de
propiedades especificamos la propiedad text (como
habíamos visto anteriormente) disponemos el texto
"Ingrese el primer valor:":
También vamos a especificar la propiedad "Id", la
misma aparece primera en la paleta de
propiedades y le asignaremos el valor @+id/num1
(el nombre es el que se indica luego de la barra es
decir cambiamos textView1por tv1) Cuidado de no
borrar @+id/
Hemos entonces asignado como nombre a este
objeto: tv1 (recordemos que se trata de un objeto
de la clase TextView)
Ahora de la paleta de componentes seleccionamos
la pestaña "Text Fields" y arrastramos el primero
(el que tiene la etiqueta abc)
Efectuamos los mismos pasos para crear el segundo
TextView y EditText (inicializamos las propiedades
respectivas) Definimos los id con los nombres num1 y
num2, el resultado visual debe ser algo semejante a
esto:
De la pestaña "Form Widgets" arrastramos un
control de tipo "Button":
Inicializamos la propiedad text con el texto "Sumar" y la
propiedad id la dejamos con el valor ya creado llamado
“Calcular".
Para terminar con nuestra interfaz visual arrastramos un
tercer objeto de tipo TextView y definimos la propiedad
id con el valor “res" y la propiedad text con el texto
"resultado", recordemos que la interfaz final debe ser
semejante a esta:
Si en este momento ejecutamos la aplicación
aparece la interfaz visual correctamente pero
cuando presionemos el botón no mostrará la suma.
Es fundamental una vez finalizada la interfaz visual
proceder a grabarla (icono de los diskettes) o la
opción File->Save para que se actualicen los
archivos que se generan automáticamente.
Hasta ahora hemos trabajado solo con el archivo
xml (activity_main.xml) donde se definen los
controles visuales de la ventana que estamos
creando.
Abrimos seguidamente el archivo MainActivity.java
que lo podemos ubicar en la carpeta src:
La clase MainActivity hereda
de la clase Activity. La clase
Activity representa una
ventana de Android y tiene
todos los métodos necesarios
para crear y mostrar los
objetos que hemos dispuesto
en el archivo xml.
Ahora debemos ir al archivo
XML e inicializar la propiedad
OnClick del objeto Calcular
con el nombre del método
que acabamos de crear (este
paso es fundamental para que
el objeto de la clase Button
pueda llamar al método
sumar que acabamos de
crear):
Asi mismo abriremos nuestro emulador para poder
llevar acabo nuestra aplicación.
Seleccionados Launch
Y dejamos que se abra nuestro emulador para
android….
Después nos abrirá nuestro emulador
Para correrlo seleccionamos nuestro programa,
damos click derecho y seleccionados la opcion RUN
AS de ahí la opcion de 1 Android Application
Después nos abrirá una ventana donde nosotros
seleccionaremos la opcion YES
En la celda inferior con la etiqueta LogCat nos
aparecerá el proceso de nuestro programa, ahí mismo
nos mostrara si existen problemas en dicho
programa.
Si ejecutamos nuestro programa
podemos ver ahora que luego de
cargar dos valores al presionar
el botón aparece en el tercer
TextView el resultado de la suma
de los dos EditText:
Agregamos Valores y listo; y en la parte inferior nos
mostrara el resultado

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Creacion de Aplicaciones en Eclipse
Creacion de Aplicaciones en EclipseCreacion de Aplicaciones en Eclipse
Creacion de Aplicaciones en Eclipse
 
Mini Tutorial De Matlab
Mini Tutorial De MatlabMini Tutorial De Matlab
Mini Tutorial De Matlab
 
Presentacion de proyecto
Presentacion de proyectoPresentacion de proyecto
Presentacion de proyecto
 
Programa 5
Programa 5Programa 5
Programa 5
 
Programa 3 Calcular el sueldo
Programa 3 Calcular el sueldoPrograma 3 Calcular el sueldo
Programa 3 Calcular el sueldo
 
Ejerciciosj query
Ejerciciosj queryEjerciciosj query
Ejerciciosj query
 
Objetivo interfas a codigo
Objetivo interfas a codigoObjetivo interfas a codigo
Objetivo interfas a codigo
 
Programa 3
Programa 3Programa 3
Programa 3
 
Informe votaciones
Informe votacionesInforme votaciones
Informe votaciones
 
Unidad 4 tema 4 - 3
Unidad 4 tema 4 - 3Unidad 4 tema 4 - 3
Unidad 4 tema 4 - 3
 
Guia practicaiuprg3
Guia practicaiuprg3Guia practicaiuprg3
Guia practicaiuprg3
 
Manual de android
Manual de androidManual de android
Manual de android
 
manual visual_studio_2010_
manual visual_studio_2010_manual visual_studio_2010_
manual visual_studio_2010_
 
Visual basic
Visual basicVisual basic
Visual basic
 
Formulario u4tema4
Formulario u4tema4Formulario u4tema4
Formulario u4tema4
 
Macro dado
Macro dadoMacro dado
Macro dado
 

Destacado (20)

Apresentação transito
Apresentação transitoApresentação transito
Apresentação transito
 
กฎหมายลักษณะมรดกครั้งที่๑
กฎหมายลักษณะมรดกครั้งที่๑กฎหมายลักษณะมรดกครั้งที่๑
กฎหมายลักษณะมรดกครั้งที่๑
 
LA HIDRÁULICA
LA HIDRÁULICA LA HIDRÁULICA
LA HIDRÁULICA
 
Taller didactiva audiovisuales
Taller didactiva audiovisualesTaller didactiva audiovisuales
Taller didactiva audiovisuales
 
Coaching como ferramenta para capacitação das equipes de vendas
Coaching como ferramenta para capacitação das equipes de vendasCoaching como ferramenta para capacitação das equipes de vendas
Coaching como ferramenta para capacitação das equipes de vendas
 
Selo
SeloSelo
Selo
 
How To Write An Essay Intros
How To Write An Essay IntrosHow To Write An Essay Intros
How To Write An Essay Intros
 
Louie ppt
Louie pptLouie ppt
Louie ppt
 
Mi principe te amo
Mi principe te amoMi principe te amo
Mi principe te amo
 
Mapa conceptual 1
Mapa conceptual 1Mapa conceptual 1
Mapa conceptual 1
 
Remediation group
Remediation groupRemediation group
Remediation group
 
Trabajo Psico
Trabajo PsicoTrabajo Psico
Trabajo Psico
 
民情調查(系列二)會議簡報
民情調查(系列二)會議簡報民情調查(系列二)會議簡報
民情調查(系列二)會議簡報
 
El puente iv_
El puente iv_El puente iv_
El puente iv_
 
Gd
GdGd
Gd
 
Official Guidelines for Voter Registration (Form 6)
Official Guidelines for Voter Registration (Form 6)Official Guidelines for Voter Registration (Form 6)
Official Guidelines for Voter Registration (Form 6)
 
Gestion conocimiento en educacion superior
Gestion conocimiento en educacion superiorGestion conocimiento en educacion superior
Gestion conocimiento en educacion superior
 
1083 wang
1083 wang1083 wang
1083 wang
 
CLASE INVERSA
CLASE INVERSACLASE INVERSA
CLASE INVERSA
 
Lei 900 salarios prefeito vice e secretarios
Lei 900 salarios prefeito vice e secretarios Lei 900 salarios prefeito vice e secretarios
Lei 900 salarios prefeito vice e secretarios
 

Similar a Creación interfaz visual Android

Tutorial 1 android
Tutorial 1 androidTutorial 1 android
Tutorial 1 androidlibidinosa
 
002-ProgramacionGraficaQt.pdf
002-ProgramacionGraficaQt.pdf002-ProgramacionGraficaQt.pdf
002-ProgramacionGraficaQt.pdfkv02th
 
Adelanto de los temas de android (introduccion-10)
Adelanto de los temas de android (introduccion-10)Adelanto de los temas de android (introduccion-10)
Adelanto de los temas de android (introduccion-10)equipotresamp
 
De los temas de android (introduccion-10)
De los temas de android (introduccion-10)De los temas de android (introduccion-10)
De los temas de android (introduccion-10)equipotresamp
 
Manual aplicaciones mobiles
Manual aplicaciones mobilesManual aplicaciones mobiles
Manual aplicaciones mobilesJuan Strongman
 
APLICACIóN MóVIL QUE CALCULE EL SUELDO FINAL DE UN TRABAJADOR
APLICACIóN MóVIL QUE CALCULE EL SUELDO FINAL DE UN TRABAJADORAPLICACIóN MóVIL QUE CALCULE EL SUELDO FINAL DE UN TRABAJADOR
APLICACIóN MóVIL QUE CALCULE EL SUELDO FINAL DE UN TRABAJADORMichelle Peña
 
Bases de datos_angelina_monetti
Bases de datos_angelina_monettiBases de datos_angelina_monetti
Bases de datos_angelina_monettiangelinamonetti1
 
Sesión5 applets
Sesión5 appletsSesión5 applets
Sesión5 appletsUniversidad
 
10 Herramientas Visual Basic
10 Herramientas Visual Basic 10 Herramientas Visual Basic
10 Herramientas Visual Basic Andrea Lozano
 
Programas de consola en java con net beans por gio
Programas de consola en java con net beans por gioProgramas de consola en java con net beans por gio
Programas de consola en java con net beans por gioRobert Wolf
 
bases de datos desde visual basic
bases de datos desde visual basicbases de datos desde visual basic
bases de datos desde visual basicsantiagomario8
 
Tutorial de Windows Phone 7.1 Basico
Tutorial de Windows Phone 7.1 BasicoTutorial de Windows Phone 7.1 Basico
Tutorial de Windows Phone 7.1 BasicoCarola Velazquez
 

Similar a Creación interfaz visual Android (20)

Programa2 eclipse
Programa2 eclipsePrograma2 eclipse
Programa2 eclipse
 
Programa2
Programa2 Programa2
Programa2
 
Tutorial 1 android
Tutorial 1 androidTutorial 1 android
Tutorial 1 android
 
002-ProgramacionGraficaQt.pdf
002-ProgramacionGraficaQt.pdf002-ProgramacionGraficaQt.pdf
002-ProgramacionGraficaQt.pdf
 
Android
AndroidAndroid
Android
 
Mobilessss
MobilessssMobilessss
Mobilessss
 
Adelanto de los temas de android (introduccion-10)
Adelanto de los temas de android (introduccion-10)Adelanto de los temas de android (introduccion-10)
Adelanto de los temas de android (introduccion-10)
 
De los temas de android (introduccion-10)
De los temas de android (introduccion-10)De los temas de android (introduccion-10)
De los temas de android (introduccion-10)
 
Manual aplicaciones mobiles
Manual aplicaciones mobilesManual aplicaciones mobiles
Manual aplicaciones mobiles
 
Intro Power Builder - JUGM 2010
Intro Power Builder - JUGM 2010Intro Power Builder - JUGM 2010
Intro Power Builder - JUGM 2010
 
APLICACIóN MóVIL QUE CALCULE EL SUELDO FINAL DE UN TRABAJADOR
APLICACIóN MóVIL QUE CALCULE EL SUELDO FINAL DE UN TRABAJADORAPLICACIóN MóVIL QUE CALCULE EL SUELDO FINAL DE UN TRABAJADOR
APLICACIóN MóVIL QUE CALCULE EL SUELDO FINAL DE UN TRABAJADOR
 
APLICACIONES CREADAS PARA ANDROID
APLICACIONES CREADAS PARA ANDROIDAPLICACIONES CREADAS PARA ANDROID
APLICACIONES CREADAS PARA ANDROID
 
Aplicación zirconia
Aplicación zirconiaAplicación zirconia
Aplicación zirconia
 
Bases de datos_angelina_monetti
Bases de datos_angelina_monettiBases de datos_angelina_monetti
Bases de datos_angelina_monetti
 
Sesión5 applets
Sesión5 appletsSesión5 applets
Sesión5 applets
 
Eclipse
EclipseEclipse
Eclipse
 
10 Herramientas Visual Basic
10 Herramientas Visual Basic 10 Herramientas Visual Basic
10 Herramientas Visual Basic
 
Programas de consola en java con net beans por gio
Programas de consola en java con net beans por gioProgramas de consola en java con net beans por gio
Programas de consola en java con net beans por gio
 
bases de datos desde visual basic
bases de datos desde visual basicbases de datos desde visual basic
bases de datos desde visual basic
 
Tutorial de Windows Phone 7.1 Basico
Tutorial de Windows Phone 7.1 BasicoTutorial de Windows Phone 7.1 Basico
Tutorial de Windows Phone 7.1 Basico
 

Más de Beydasanchezhernandez (20)

Presentación16
Presentación16Presentación16
Presentación16
 
Presentación15
Presentación15Presentación15
Presentación15
 
Programa14
Programa14Programa14
Programa14
 
Presentacion13
Presentacion13Presentacion13
Presentacion13
 
Presentación12
Presentación12Presentación12
Presentación12
 
Programa11
Programa11Programa11
Programa11
 
Presentaciónprograma10
 Presentaciónprograma10 Presentaciónprograma10
Presentaciónprograma10
 
Presentacion9
Presentacion9Presentacion9
Presentacion9
 
Programa8
Programa8Programa8
Programa8
 
Programa 7
Programa 7Programa 7
Programa 7
 
Como insertar una imagen en eclipse
Como insertar una imagen en eclipseComo insertar una imagen en eclipse
Como insertar una imagen en eclipse
 
Programa14
Programa14Programa14
Programa14
 
Presentación13
Presentación13Presentación13
Presentación13
 
Programa 12
Programa 12Programa 12
Programa 12
 
Presentación113
Presentación113Presentación113
Presentación113
 
Programa92
Programa92Programa92
Programa92
 
Programa82
Programa82Programa82
Programa82
 
Programa72
Programa72Programa72
Programa72
 
Doc2
Doc2Doc2
Doc2
 
Programa 4
Programa 4Programa 4
Programa 4
 

Creación interfaz visual Android

  • 1.
  • 2.
  • 3. En este diálogo especificamos el nombre de la aplicación y proyecto (pueden ser iguales) y el nombre del paquete java donde se almacenarán los archivos java que creemos (normalmente la url de su empresa al revés).
  • 4. Ahora empezaremos a presionar el botón next para pasar a otras configuraciones de nuestra aplicación, por el momento dejaremos todos los valores por defecto en cada una de los diálogos que aparece (son 5 diálogos actualmente), en el último diálogo debe aparecer el botón "Finish" el cual presionamos.
  • 5.
  • 6.
  • 7.
  • 8. Veamos paso a paso como creamos la interfaz visual de nuestro programa. Primero borramos el TextView que aparece por defecto cuando se crea un proyecto con el ADT. Ahora desde la ventana "Palette" seleccionamos de la pestaña "Form Widgets" el control "TextView" y lo arrastramos a la ventana de diseño de nuestra interfaz:
  • 9. Ahora lo seleccionamos y en la ventana de propiedades especificamos la propiedad text (como habíamos visto anteriormente) disponemos el texto "Ingrese el primer valor:":
  • 10. También vamos a especificar la propiedad "Id", la misma aparece primera en la paleta de propiedades y le asignaremos el valor @+id/num1 (el nombre es el que se indica luego de la barra es decir cambiamos textView1por tv1) Cuidado de no borrar @+id/
  • 11. Hemos entonces asignado como nombre a este objeto: tv1 (recordemos que se trata de un objeto de la clase TextView) Ahora de la paleta de componentes seleccionamos la pestaña "Text Fields" y arrastramos el primero (el que tiene la etiqueta abc)
  • 12. Efectuamos los mismos pasos para crear el segundo TextView y EditText (inicializamos las propiedades respectivas) Definimos los id con los nombres num1 y num2, el resultado visual debe ser algo semejante a esto:
  • 13. De la pestaña "Form Widgets" arrastramos un control de tipo "Button":
  • 14. Inicializamos la propiedad text con el texto "Sumar" y la propiedad id la dejamos con el valor ya creado llamado “Calcular". Para terminar con nuestra interfaz visual arrastramos un tercer objeto de tipo TextView y definimos la propiedad id con el valor “res" y la propiedad text con el texto "resultado", recordemos que la interfaz final debe ser semejante a esta:
  • 15. Si en este momento ejecutamos la aplicación aparece la interfaz visual correctamente pero cuando presionemos el botón no mostrará la suma. Es fundamental una vez finalizada la interfaz visual proceder a grabarla (icono de los diskettes) o la opción File->Save para que se actualicen los archivos que se generan automáticamente. Hasta ahora hemos trabajado solo con el archivo xml (activity_main.xml) donde se definen los controles visuales de la ventana que estamos creando. Abrimos seguidamente el archivo MainActivity.java que lo podemos ubicar en la carpeta src:
  • 16. La clase MainActivity hereda de la clase Activity. La clase Activity representa una ventana de Android y tiene todos los métodos necesarios para crear y mostrar los objetos que hemos dispuesto en el archivo xml.
  • 17. Ahora debemos ir al archivo XML e inicializar la propiedad OnClick del objeto Calcular con el nombre del método que acabamos de crear (este paso es fundamental para que el objeto de la clase Button pueda llamar al método sumar que acabamos de crear):
  • 18. Asi mismo abriremos nuestro emulador para poder llevar acabo nuestra aplicación.
  • 20. Y dejamos que se abra nuestro emulador para android….
  • 21. Después nos abrirá nuestro emulador
  • 22. Para correrlo seleccionamos nuestro programa, damos click derecho y seleccionados la opcion RUN AS de ahí la opcion de 1 Android Application
  • 23. Después nos abrirá una ventana donde nosotros seleccionaremos la opcion YES
  • 24. En la celda inferior con la etiqueta LogCat nos aparecerá el proceso de nuestro programa, ahí mismo nos mostrara si existen problemas en dicho programa.
  • 25. Si ejecutamos nuestro programa podemos ver ahora que luego de cargar dos valores al presionar el botón aparece en el tercer TextView el resultado de la suma de los dos EditText:
  • 26. Agregamos Valores y listo; y en la parte inferior nos mostrara el resultado