Curso de Desarrollo Android. Tema 6: Mi primera aplicación en Android Studio ¡Hola Mundo!

Autor: | Posteado en Android Sin comentarios

Tras muchas clases teóricas y de configuración de vuestro IDE Android® Studio vamos a empezar con la 1.ª clase práctica para tener una 1.ª toma de contacto con el IDE y la programación para Android® en general. Por ello, al igual que en cualquier lenguaje de programación, vamos a empezar haciendo vuestra 1.ª Apps ¡Hola Mundo!

Lo 1.º que debemos inventar es abrir Android® Studio y inventar un renovado proyecto. Este proceso ya lo hemos explicado en un artículo anterior, por lo que si tenemos la menor incertidumbre de ello debemos pasar a repasar el tema “Cómo iniciar un proyecto en Android® Studio” antes de continuar.

Lo 1.º de lo que nos daremos cuenta es que cuando creamos un renovado proyecto para Android® tendremos ya, por defecto, un proyecto “Hello World!” básico. Lo podemos observar porque en la previsualización de la derecha del código así nos aparece. Nosotros vamos a repasar todos los aspectos fundamentales de este sencillo, básico y fundamental programa para poder entender el por qué esto es así y, a enormes rasgos, cómo sirve la programación para Android.

En vuestro IDE, en la parte izquierda, podemos observar todos los archivos(ordenador) de código que forman vuestra aplicación para Android® en forma de un árbol de directorios, así como los scripts de Gradle, en los cuales no vamos a profundizar (de momento).

Android Studio - <stroi />proyecto</strong> principal» width=»650″ height=»472″ srcset=»http://www.movilzona.es//app/uploads/2015/12/Android-Studio-proyecto-principal-300×218.jpg 300w, http://www.movilzona.es//app/uploads/2015/12/Android-Studio-proyecto-principal-650×472.jpg 650w, http://www.movilzona.es//app/uploads/2015/12/Android-Studio-proyecto-principal-457×332.jpg 457w, http://www.movilzona.es//app/uploads/2015/12/Android-Studio-proyecto-principal.jpg 1436w» sizes=»(max-width: 650px) 100vw, 650px»></a></p>
<p>Si hacemos doble click sobre cualquiera de los ficheros podemos observar su código (aunque si el archivo es un fichero xml posiblemente lo que seamos será la “previsualización”, por lo que debemos observar en la parte inferior central de la ventana, donde observaremos dos pestañas: Design y Text. Pulsamos Text).</p>
<p>El 1.er código que vamos a observar es el fichero Java “MainActivity” (creado durante el asistente inicial como la ocupación básica) que se descubre en la ruta app>Java>com.example.nombredelaapp>MainActivity.</p>
<p><a href=Actividad primordial en <stro />Android</strong>® Studio – Hola Mundo» width=»650″ height=»472″ srcset=»http://www.movilzona.es//app/uploads/2015/12/Actividad-principal-en-Android-Studio-Hola-Mundo-300×218.jpg 300w, http://www.movilzona.es//app/uploads/2015/12/Actividad-principal-en-Android-Studio-Hola-Mundo-650×472.jpg 650w, http://www.movilzona.es//app/uploads/2015/12/Actividad-principal-en-Android-Studio-Hola-Mundo-457×332.jpg 457w, http://www.movilzona.es//app/uploads/2015/12/Actividad-principal-en-Android-Studio-Hola-Mundo.jpg 1436w» sizes=»(max-width: 650px) 100vw, 650px»></a></p>
<p>Si abrimos el código fuente de este fichero se puede observar una definición básica de esta actividad. Lo 1.º que debemos tener en cuenta (aunque lo analizaremos más adelante) es que vuestra ventana principal, llama MainActivity se despliega de la clase AppCompatActivity.</p>
<p>Dentro de esta ventana, o actividad, se puede hallar la definición de un archivo de recursos xml, que será el que contenga lo que se va a observar en la pantalla, es decir, en vuestro caso el texto y las propiedades del “Hola Mundo!” que queremos imprimir en pantalla.</p>
<p>Por lo tanto, para poder inventar un elemento “Hola Mundo!” en esta sencilla aplicación debemos ir al archivo ahí definido, es decir, a la ruta app>res>layout>activity_main.xml. ***Ver anexo 1***</p>
<p><a href=Cómo sirve una ocupación en <stro />Android</strong>® Studio» width=»650″ height=»472″ srcset=»http://www.movilzona.es//app/uploads/2015/12/Como-funciona-una-actividad-en-Android-Studio-300×218.jpg 300w, http://www.movilzona.es//app/uploads/2015/12/Como-funciona-una-actividad-en-Android-Studio-650×472.jpg 650w, http://www.movilzona.es//app/uploads/2015/12/Como-funciona-una-actividad-en-Android-Studio-457×332.jpg 457w, http://www.movilzona.es//app/uploads/2015/12/Como-funciona-una-actividad-en-Android-Studio.jpg 1436w» sizes=»(max-width: 650px) 100vw, 650px»></a></p>
<p>Los clientes que ya dominen el lenguaje Java sabrán que la instrucción requerida para mostrar el Hola Mundo! en el lenguaje Java es System.out.println(“Hola Mundo!”), sin embargo, para insertar texto (y otros elementos que observaremos más adelante) en una aplicación para <strong>Android</strong>® debemos hacerlo a partir de ficheros xlm, a los cuales debemos llamar en la ocupación en cuestión para que se muestren en la pantalla. Esto facilita el crecimiento de la aplicación y permite, por ejemplo, inventar de una forma muy sencilla que vuestra aplicación sea multi-idioma.</p>
<p>Android Studio puede funcionar como un IDE D&D (drag and drop) que nos aceptan colocar ciertos elementos en el programa arrastrándolos desde la lista (profundizaremos en ellos más adelante) sin tener que programarlos uno a uno.</p>
<p><a href=Lista de elementos a añadir en <stro />Android</strong>® Studio» width=»177″ height=»650″ srcset=»http://www.movilzona.es//app/uploads/2015/12/Lista-de-elementos-a-anadir-en-Android-Studio-177×650.jpg 177w, http://www.movilzona.es//app/uploads/2015/12/Lista-de-elementos-a-anadir-en-Android-Studio.jpg 228w» sizes=»(max-width: 177px) 100vw, 177px»></a></p>
<p>Para observar una prueba de este simple “Hola Mundo!”, desde la pestaña “Design” que hemos visto antes pulsaremos en el apartado de “previsualización” sobre el “Hello World!” y lo eliminaremos con la tecla(botón) supr. El cuadro de texto que se desarrolla por defecto se eliminará y tendremos un <stroing>proyecto</strong> totalmente vacío.</p>
<p>A continuación, desde la lista de elementos que nos aparece en el centro de la ventana seleccionaremos “Widgets > Large text” y lo arrastraremos a la imagen del móvil que nos aparece a la derecha, a la posición que deseemos. El resultado final deberá ser parecido al siguiente.</p>
<p><a href=Colocar elemento en ocupación en <stro />Android</strong>® Studio – Hola Mundo» width=»650″ height=»472″ srcset=»http://www.movilzona.es//app/uploads/2015/12/Colocar-elemento-en-actividad-en-Android-Studio-Hola-Mundo-300×218.jpg 300w, http://www.movilzona.es//app/uploads/2015/12/Colocar-elemento-en-actividad-en-Android-Studio-Hola-Mundo-650×472.jpg 650w, http://www.movilzona.es//app/uploads/2015/12/Colocar-elemento-en-actividad-en-Android-Studio-Hola-Mundo-457×332.jpg 457w, http://www.movilzona.es//app/uploads/2015/12/Colocar-elemento-en-actividad-en-Android-Studio-Hola-Mundo.jpg 1436w» sizes=»(max-width: 650px) 100vw, 650px»></a></p>
<p><a href=Elemento colocado en ocupación de <stro />Android</strong>® Studio – Hola Mundo» width=»650″ height=»472″ srcset=»http://www.movilzona.es//app/uploads/2015/12/Elemento-colocado-en-actividad-de-Android-Studio-Hola-Mundo-300×218.jpg 300w, http://www.movilzona.es//app/uploads/2015/12/Elemento-colocado-en-actividad-de-Android-Studio-Hola-Mundo-650×472.jpg 650w, http://www.movilzona.es//app/uploads/2015/12/Elemento-colocado-en-actividad-de-Android-Studio-Hola-Mundo-457×332.jpg 457w, http://www.movilzona.es//app/uploads/2015/12/Elemento-colocado-en-actividad-de-Android-Studio-Hola-Mundo.jpg 1436w» sizes=»(max-width: 650px) 100vw, 650px»></a></p>
<p>En la parte derecha de la pantalla observaremos la sección de “propiedades” del cuadro de texto que acabamos de crear. Desde aquí configuraremos la mayoría de los aspectos del elemento, entre otros, el contenido de este cuadro de texto (y el color, tamaño, etc en caso de que lo necesitemos). Profundizaremos en esto en futuras lecciones.</p>
<p>Dentro de las propiedades, buscaremos el apartado “Text” y cambiaremos el contenido que pone por defecto (Large Text) por el texto que queremos escribir, en vuestro caso, “Hola Mundo!”. El aspecto final será parecido al siguiente.</p>
<p><a href=Propiedades de texto en <stro />Android</strong>® Studio – Hola Mundo» width=»641″ height=»650″ srcset=»http://www.movilzona.es//app/uploads/2015/12/Propiedades-de-texto-en-Android-Studio-Hola-Mundo-296×300.jpg 296w, http://www.movilzona.es//app/uploads/2015/12/Propiedades-de-texto-en-Android-Studio-Hola-Mundo-641×650.jpg 641w, http://www.movilzona.es//app/uploads/2015/12/Propiedades-de-texto-en-Android-Studio-Hola-Mundo-328×332.jpg 328w, http://www.movilzona.es//app/uploads/2015/12/Propiedades-de-texto-en-Android-Studio-Hola-Mundo.jpg 897w» sizes=»(max-width: 641px) 100vw, 641px»></a></p>
<h2>Cómo probar vuestra aplicación “Hola Mundo!” en <strong>Android</strong>® Studio</h2>
<p>Nuestro 1.er programa está listo. Ya podemos ejecutar vuestro 1.er programa en la máquina virtual. Para ello pulsaremos sobre el botón “Run App” (o pulsaremos Alt+F10) y aguardaremos a que vuestra 1.ª aplicación cargue en la máquina virtual.</p>
<p><a href=Ejecutar Apps en <stro />Android</strong>® Studio» width=»650″ height=»136″ srcset=»http://www.movilzona.es//app/uploads/2015/12/Ejecutar-App-en-Android-Studio-300×63.jpg 300w, http://www.movilzona.es//app/uploads/2015/12/Ejecutar-App-en-Android-Studio-650×136.jpg 650w, http://www.movilzona.es//app/uploads/2015/12/Ejecutar-App-en-Android-Studio-634×133.jpg 634w, http://www.movilzona.es//app/uploads/2015/12/Ejecutar-App-en-Android-Studio.jpg 889w» sizes=»(max-width: 650px) 100vw, 650px»></a></p>
<p><a href=App ejecutada en <stro />Android</strong>® Studio» width=»375″ height=»650″ srcset=»http://www.movilzona.es//app/uploads/2015/12/App-ejecutada-en-Android-Studio-173×300.jpg 173w, http://www.movilzona.es//app/uploads/2015/12/App-ejecutada-en-Android-Studio-375×650.jpg 375w, http://www.movilzona.es//app/uploads/2015/12/App-ejecutada-en-Android-Studio.jpg 637w» sizes=»(max-width: 375px) 100vw, 375px»></a></p>
<p>**Anexo 1:</p>
<p>A partir de <strong>Android</strong>® Studio 1.4, la ocupación “MainActivity” llega definida por dos ficheros xml:</p>
<ul>
<li>activity_main.xml -> Define el estilo de la pantalla, o actividad.</li>
<li>content_main.xml -> Determina los contenidos dentro de activity_main.xml, por ejemplo, texto, botones, etc.</li>
</ul>
<p>Cuando una aplicación para <strong>Android</strong>® llama a su ocupación primordial “MainActivity”, esta carga por defecto el fichero “activity_main.xml” quien a su vez llama, como observaremos a continuación, al fichero “content_main.xml”.</p>
<p><a href=Activity y Content en <stro />Android</strong>® Studio» width=»650″ height=»334″ srcset=»http://www.movilzona.es//app/uploads/2015/12/Activity-y-Content-en-Android-Studio-300×154.jpg 300w, http://www.movilzona.es//app/uploads/2015/12/Activity-y-Content-en-Android-Studio-650×334.jpg 650w, http://www.movilzona.es//app/uploads/2015/12/Activity-y-Content-en-Android-Studio-634×326.jpg 634w, http://www.movilzona.es//app/uploads/2015/12/Activity-y-Content-en-Android-Studio.jpg 1184w» sizes=»(max-width: 650px) 100vw, 650px»></a></p>
<p>A enormes rasgos, podemos pensar en content_main.xml como una parte de un fichero HTML. El fichero activity_main.xml contendrá el diseño global de ocupación y content_main.xml el diseño de los contenidos.</p>
<div>
<p>Si teneis alguna duda, pásate por el Foro de MovilZona donde hemos inventado un post(artículo) para las consultas al respecto de este tema.</p>
<h2>Enlaces</h2>
<ul>
<li><a href=Todos los temas del Curso de Desarrollo Android® MovilZona

  • Todos los post(artículo) para preguntar dudas y consultas de cada tema en el Foro de Desarollo de MovilZona
  • El capítulo Curso de Desarrollo Android. Tema 6: Mi 1.ª app en Android® Studio ¡Hola Mundo! se publicó en MovilZona.

    MovilZona


    Fuente del contenido original se encuentra más arriba (enlace), respetando todos los derechos de autor.

    La prensa de Core i7

    También puedes revisar estas noticias relacionadas.

    Agrega tu comentario