El dia de hoy vamos a crear nuestro primer programa en android mediante un sencillo ejemplo en el que se ve el proceso de creacion de una app android, nuestro programa simple y sencillamente pasara informacion de una pantalla a otra. El ejemplo en si no es cosa del otro mundo pero ejemplifica el proceso de crear un nuevo proyecto, estructura de un proyecto android, agregar vistas y clases, registrar estas vistas en el manifest de android, pasar informacion de una vista a otra y mas.. asi que vamos ya al ejemplo-tutorial :yum:
Requerimientos
- Entorno Android listo ( sdk, eclipse, adt, etc..)
- De preferencia un dispositivo android con sus drivers instalados y listo para utilizar ( sino lo tienes vale el emulador de android pero sera algo lento :sob:)
Escenario
Como dijimos anteriormente te mostraremos un ejemplo para pasar informacion de una pantalla a otra, pasando por todo el proceso que involucra el desarrollo de esta sencilla app para android.
Lo que haremos sera crea una app que envie un mensaje de una pantalla a otra, sencilla pero te aseguro que si te lees todito el articulo aprenderas una fuerte base de android para comenzar a programar tus propias apps :yum:
Haremos algo como esto..
¿Necesitas aprender algo nuevo ? Ve a Udemy, busca el tema del que quieres aprender, selecciona el curso para ti y continua con tu aprendizaje.
Udemy
primer programa en android 11
Primer App en Android
Crear un nuevo proyecto
Vamos a eclipse, File -> New -> Android Application Project ->
Como puedes ver hemos dejado desmarcada la opcion de Create Activity, esto es porque queremos nosotros agregar la actividad principal para aprender a hacerlo :yum:
Estructura del proyecto
Una vez cargado nuestro proyecto nos aparece la siguiente estructura en el explorador de paquetes (Sino lo ves ve a Window -> Show View -> Package Explorer )
Entre todas las carpetas y archivos que se crearon por el momento los que nos interesa en este primer tutorial de android seran las siguientes carpetas y archivos
- Carpeta src guardara todas las clases .java
- Dentro de la carpeta res se guardaran todos los recursos de la app.
- Dentro de las carpetas drawable se guardaran todas las imagenes de cada tipo de resolucion que existen para los dispositivos.
- Carpeta layout guardara todas las vistas de nuestras pantallas mediante archivos XML.
- values por el momento guardara las cadenas de texto que se utilizaran en nuestra app.
- AndroidManifest.xml sera nuestro archivo de «configuracion» donde registraremos nuestras pantallas y permisos de la app.
Como agregar una nueva Pantalla
Si queremos agregar una nueva pantalla a nuestra app en android ( en nuestro caso la pantalla principal ) tenemos que hacer siempre 3 cosas..
- Crear la Vista XML en la carpeta res/layout.
- Crear el codigo java para controlar esta vista en src/tupaquete.
- Registrar esta pantalla en el archivo AndroidManifest.xml.
El orden puede ser el que tu quieras pero te aconsejo que utilices este para que no tengas que registrar un pantalla que no has creado en el androidmanifest, o que tengas que registrar una vista que no existe aun en tu clase java.
Agregaremos una nueva vista xml a nuestro proyecto
Boton derecho en nuestra carpeta layout -> New -> Android XMl File
damos en finalizar y ahora tendremos nuestra vista agregada
Podemos elegir entre trabajar con esta vista con el asistente o mediante codigo, aqui lo haremos mediante codigo ya que estamos aprendiendo y siempre es mejor hacerlo a mano si estas aprendiendo algo nuevo.
Ahora vamos a agregar nuestra clase java que manejara esta vista xml, para esto vamos a
Boton derecho en src -> New -> Package ->
y escribimos el nombre del paquete que escribimos al momento de crear nuestro proyecto ( sino sabes de que te hablo miras las imagenes de arriba, es la primer imagen :yum: ) y damos finish
Ahora vamos a crear la clase java.. dentro de este paquete damos
Boton Derecho -> New -> Class
Escribimos un nombre para la clase, te sugiero que como a la vista xml le pusimos actividadprincipal a la clase java que lo maneja le pongas ActividadPrincipal.
Ahora el codigo de esta Actividad es el siguiente:
package com.jonathanmelgoza.primerprograma;
import android.app.Activity;
import android.os.Bundle;
public class ActividadPrincipal extends Activity{
@Override
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.actividadprincipal);
}
}donde la linea
setContentView(R.layout.actividadprincipal);
enlaza la vista xml con esta clase mediante el objeto R ( hablaremos mas adelante de este objeto, basta saber que con el puedes acceder a los recursos :yum: )
Ahora solo falta registrar esta pantalla en el archivo AndroidManifest.xml ( recuerdas los 3 pasos para crear una pantalla ? )
Vamos al archivo AndroidManifest.xml en su forma de codigo ( damos doble click al archivo y en la pestaña de abajo seleccionar AndroidManifest.xml ) y dentro de <application .. > AQUI </application> escribimos lo siguiente
<activity android:name="com.jonathanmelgoza.primerprograma.ActividadPrincipal" android:label="@string/app_name"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity>
donde en android:name escribimos la ruta de nuestra clase java ( esta clase hace referencia a nuestra vista xml lo que une los 3 pasos ), en action establecemos un
android.intent.action.MAIN
lo que indica que sera nuestra pantalla principal
y en category establecemos
android.intent.category.LAUNCHER
lo que indica que sera nuestro lanzador.
Ahora podemos ejecutar y ver que corre perfectamente!
Pantallas Principales y Pantallas Secundarias
Como dijimos antes, la pantalla que agregamos tenia ciertas propiedades en el AndroidManifest con el action y category que la hacian ser la actividad principal, pero y que si queremos agregar otra pantalla que no sea la principal sino una mas de la app?
Para agregar una pantalla secundaria a nuestra app basta con realizar los pasos 1 y 2 de la misma forma y en el paso 3 cambiar los parametros dentro del tag <intent-filter> ( action y category ).
Por Ejemplo agregemos una segunda pantalla con el nombre de vista xml actividadsecundaria y el nombre de Clase java ActividadSecundaria ( recuerda enlazar la vista xml con la clase java mediante setContentView ) Ahora en el AndroidManifest solo al momento de registrar esa Actividad cambia los parametros de action category por estos
<action android:name="com.jonathanmelgoza.primerprograma.ActividadSecundaria" /> <category android:name="android.intent.category.DEFAULT" />
y Ahora tenemos nuestras dos pantallas registradas en el AndroidManifest.xml si ejecutamos aun no podemos pasarnos a la segunda vista pero calma, esto lo haremos mas adelante, ahora vamos a agregar algunos componentes a nuestras vistas :yum:
Como agregar componentes a nuestras vistas
Vamos a agregar componentes a nuestra primer vista, la principal, en nuestro caso sera actividadprincipal.xml dentro de res/layout, nos vamos al codigo y agregaremos 2 textview, 1 edittext y 1 button, quedaria asi:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:text="@string/hello" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:text="@string/mensaje" /> <EditText android:id="@+id/txt_mensaje" android:inputType="text" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <Button android:id="@+id/btn_enviar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/btnEnviar" /> </LinearLayout>
Nota: Es importante definir la propiedad android:id a los controles que queiras acceder a ellos desde el codigo java.
Te daras cuenta que te marca errores en las propiedades text al momento de utilizar la cadena @string, esto es porque en android las cadenas se aconsejan utilizar en un archivo separado del codigo, este es en res/values/strings.xml.
@string/
Para agregar cadenas de texto a strings.xml ( mediante codigo :yum: ) basta con dar doble click en el archivo, pasarte a la pestaña de codigo ( abajo en strings.xml ) y dentro de la tag <resources>AQUI</resources> agregar una nueva cadena de texto, en nuestro caso las que nos marcan error las agregaremos de la siguiente manera:
<string name="hello">Hola</string> <string name="mensaje">Aplicacion Android</string> <string name="btnEnviar">Enviar Texto</string>
y en las vistas xml podemos hacer referencias a ellas mediante @string/{name} por ejemplo
android:text="@string/hello"
Ahora ya no tenemos errores en nuestra vista actividadprincipal.xml !
Tambien nos agregaremos algunos componentes a nuestra vista secundaria llamada en mi caso actividadsecundaria.xml y quedaria asi:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:text="@string/msj_textoRecibido" /> <TextView android:id="@+id/txv_mensaje" android:gravity="center" android:layout_width="fill_parent" android:layout_height="wrap_content" /> </LinearLayout>
( recuerdas como se agregaban las cadenas de texto? )
Como trabajar con botones definidos en XML desde las clases Java
Ahora que ya tenemos controles en nuestras 2 vistas ( la segunda aun no la podemos ver porque no sabemos como pasar de una actividad a otra :unamused: aun :yum: ya sigue.. ) lo que veremos sera como darle funcionalidad al boton de nuestra actividad principal, para esto vamos a nuestra clase java que maneja la actividad principal, en mi caso se llama ActividadPrincipal.java, y lo que haremos sera obtener el boton definido en la vista xml para trabajar con el desde java, esto se hace de la siguiente forma:
btn_enviar = (Button) findViewById(R.id.btn_enviar);
dentro del metodo onCreate y antes habiendo definido btn_enviar
Button btn_enviar;
esto igual con cualquier otro componente, por ejemplo .. nuestro edittext
txt_msj = (EditText) findViewById(R.id.txt_mensaje);
Ahora podemos manejar nuestro boton y nuestra caja de texto, esto nos servira para enviar informacion que el usuario escriba de la vista principal a la secundaria!
Como pasar a otra Actividad
Para pasar de una actividad a otra es muy facil! solo escribe la siguiente linea
startActivity(new Intent(ActividadPrincipal.this,ActividadSecundaria.class));
donde startActivity necesita un nuevo intent y este a su vez necesita 2 parametros:
- Clase donde esta
- Clase a donde va
Y listo!
Esta linea la ponemos dentro del codigo del evento de click del boton en el metodo onCreate asi:
btn_enviar.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//LLAMAR A OTRA ACTIVIDAD
startActivity(new Intent(ActividadPrincipal.this,ActividadSecundaria.class));
}
});Ahora nos movemos a la segunda Vista, pero no le enviamos la informacion que el usuario ingresa en la caja de texto ( EditText para ser exactos )
Como pasar informacion de una Actividad a Otra
Para pasar informacion de una pantalla a otra en android modificaremos un poco nuestro codigo del boton y quedaria asi
String msj = txt_msj.getText().toString();
Intent i = new Intent(ActividadPrincipal.this,ActividadSecundaria.class);
Bundle extras = new Bundle();
extras.putString("Mensaje",msj);
i.putExtras(extras);
startActivity(i);donde lo que hacemos es obtener la cadena de texto que contiene el edittext al momento de hacer click sobre el boton ( recuerda que este codigo va dentro del evento click del boton ) y crea un nuevo intento, configura el objecto Bundle que se pasara junto con el intent a la otra actividad mediante el metodo putstring(), el primer parametro de pustring es un id y el segundo la informacion que se pasara. Finalmente iniciamos la actividad secundaria con los extras incluidos, ahora solo falta recibirlos!
Para recibir la informacion en la pantalla secundaria solo basta con escribir el siguiente codigo dentro del metodo onCreate de esta actividad.
Bundle extras = getIntent().getExtras();
if(extras != null){
txv = (TextView) findViewById(R.id.txv_mensaje);
recibido = extras.getString("Mensaje");
txv.setText(recibido);
Log.d("recibido", recibido);
}donde anteriormente debiste hacer definido la variable txv del tipo TextView y se obtienen los extras mediante el id que establecimos en la pantalla principal, finalmente se establece el texto recibido en el control textview de la segunda pantalla.
Donde esta el APK de la Aplicacion Android
Si utilizaste tu dispositivo android para el desarrollo de tu app seguro ya esta cargado en tu movil, solo asegurate que sea la ultima version. Si utilizaste el emulador de android y quieres cargarlo a un dispositivo o distribuirlo necesitas el archivo apk que es el empaquetado final, este archivo se encuentra en tu carpeta del proyecto en el folder bin con el formato
TuNombreProyecto.apk
Ya casi!!
No olvides regalarme un +1, like, tweet, compartir este contenido o comentar cualquier duda :neckbeard:
Ahora tal ves te interese saber como cambiar el icono a una aplicación android :sunglasses: