taller android shdh ciudad obregon
DESCRIPTION
Taller de Android impartido durante el Super Happy Dev House en Ciudad Obregon, libre y actual para la version 21 de Android Development ToTRANSCRIPT
![Page 1: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/1.jpg)
@jmsalcido & @jeshuar & #SHDHObregon
Desarrollo en AndroidDevelopers
NEXT >
![Page 2: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/2.jpg)
Developers
Contenido esperado…
NEXT >
ojo: hay teoría que debemos ver
:^)
![Page 3: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/3.jpg)
Developers
¿Que sabes de Android?
NEXT >
*anímense a comentar*
![Page 4: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/4.jpg)
Que es AndroidDevelopers
Android es el sistema operativo mas popular para plataformas móviles.
Con Android puedes usar todas las aplicaciones de Google que conoces y utilizas y hay mas de 600,000 apps y juegos disponibles para mantenerte entretenido en la tienda:
- Google Play
NEXT >
![Page 5: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/5.jpg)
Por que es popularDevelopers
Millones de personas ya usan Android
por que es el núcleo de tú dispositivo.NEXT >
![Page 6: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/6.jpg)
Developers
Conozcamos a Android
Robot de Android, nosotros lo llamamos
Andy de cariño.
El Logo de Android no debe usarse, ni su
tipografia.
Android es conocido por estos dos amigos:
Pero eso es solo la marca.NEXT >
![Page 7: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/7.jpg)
Developers
Quiero desarrollar YA.
Tranquilo.
Hay muchos pasos antes de siquiera comenzar a desarrollar una app.
Un montononal de TEORIA, que veremos en los siguientes… 10 o 15 minutos.
Debemos hacer lo siguiente:
Diseñar Desarrollar Distribuir
DDD
Las 3 D de Android
NEXT >
![Page 8: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/8.jpg)
Developers
Primer D, Diseño.
NEXT >
Como desarrolladores debemos conocer las 3D de Android.
Comenzamos con la D de D I S E Ñ O.
- UI (User Interface)
- UX (User eXperience) D
![Page 9: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/9.jpg)
Developers
Tipografía
NEXT >
Tipografía Roboto.
Es muy importante recordar la tipografía usada, ya que es utilizada en diferentes tamaños de pantalla y se creo con ese fin especifico.
Se utiliza la tipografía: Roboto.
![Page 10: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/10.jpg)
Developers
UI – User Interface
NEXT >
Una app en Android tiene normalmente estos atributos:
1. Action Bar2. View Control3. Content Area4. Split Action BarLos botones virtuales son: - Back - Home - Apps abiertas
![Page 11: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/11.jpg)
Developers
UX – User eXperience
NEXT >
Los principios de diseño fueron desarrollados por el equipo de Android UX en Google para mantener los intereses de los usuarios en mente. Es importante considerarlos y usarlos.
Enchant Me
Simplify My Life Make Me Amazing
![Page 12: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/12.jpg)
Developers
Android Puro
NEXT >
Muchos desarrolladores quieren distribuir varias apps en diferentes plataformas al mismo tiempo, apps “multiplataforma”. Mientras planeas tu app es importante recordar que cada plataforma tiene sus reglas y convenciones.
No hay que imitar elementos de la UI de otras plataformas
Uno de los errores mas comunes es utilizar los bloques de la UI de otras plataformas como iOS y Windows Phone 7 (8)
![Page 13: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/13.jpg)
Developers
Android Puro
NEXT >
No modificar los iconos de la plataforma o re-utilizar.
Hay iconos especiales para acciones como:
- Compartir - Guardar - Buscar - Eliminar - Favoritos
Estos son diferentes en cada plataforma, lo ideal es no modificarlos pues el usuario esta acostumbrado a ellos.
![Page 14: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/14.jpg)
Developers
Android Puro
NEXT >
No uses tab bars debajo del contenido.
iOS utiliza las barras de tabs debajo del contenido, esa es una de sus propiedades.
En Android, se muestran en la Action Bar ó arriba del contenido.
![Page 15: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/15.jpg)
Developers
Adios Diseño
NEXT >
Recordando el DISEÑO:
Enchant Me
Simplify My LifeMake Me Amazing
Android Puro
![Page 16: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/16.jpg)
Developers
Segunda D, Desarrollo
NEXT >
La parte del código (yeei!!): D E S A R R O L L O
- Java - XML - Ambiente - Eclipse y ADT - Que es una app - Desarrollar apps!
D
![Page 17: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/17.jpg)
Developers
Desarrollo
NEXT >
Hay algunas abreviaciones y conceptos que usaremos:
- ADT : Android Developer Tools - AVD : Android Virtual Device - Actividad: Uno de los componentes de una aplicación.
Llamaremos actividades a las “ventanas” de momento.
![Page 18: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/18.jpg)
Primero que nada, hay que descargar las herramientas: * no sean gachos con la banda ancha, pásenlo entre ustedes *
Developers
Ah!, las herramientas!!!
Descargar ADT
NEXT >
![Page 19: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/19.jpg)
Developers
Herramientas
NEXT >
Las herramientas descargadas contienen lo siguiente:
- Eclipse & ADT (IDE) - UI Builder (IDE) - Android SDK - Pruebas & Debug (IDE)
![Page 20: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/20.jpg)
Developers
Java
NEXT >
Se cree que Google decidió usar Java por las siguientes razones:
- Lenguaje conocido - No hay punteros - Corre en una maquina virtual - Cantidad enorme de herramientas para java - La diferencia entre C y Java no es tanta, si fuera así, compilar en ASM es la solución
Nota: Android no corre java en tiempo de ejecución. Solamente el código es java.
![Page 21: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/21.jpg)
Developers
XML
NEXT >
Se utiliza XML por que es un lenguaje sencillo de convertir y manipular, este lenguaje puede ser convertido a un archivo binario tan pequeño que se puede montar en un dispositivo móvil sin ninguna preocupación.
Muchas herramientas para la creación de UI utilizan XML para definir los elementos utilizados.
Es un lenguaje muy legible.
Parecido a HTML.
![Page 22: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/22.jpg)
Developers
Ambiente
NEXT >
Android y sus desarrolladores han evolucionado mucho gracias a Google.
Google proporciona hoy en día un paquete llamado ADT, donde se proveen las herramientas necesarias:
- SDK de Android - Eclipse (IDE) - Plugins necesarios (Eclipse)
![Page 23: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/23.jpg)
Developers
Eclipse y ADT
NEXT >
Vista común de Eclipse, el IDE que Google recomienda para el desarrollo de apps.
![Page 24: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/24.jpg)
Developers
Eclipse y ADT
NEXT >
Abrimos ADV Manager presionando el pequeño celularcito:
![Page 25: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/25.jpg)
Developers
Eclipse y ADT
NEXT >
Abrimos ADV Manager presionando el pequeño celularcito:
Llenamos los datos de la siguiente manera.
![Page 26: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/26.jpg)
Developers
Proyecto de Android
NEXT >
Código
Librerías
Recursos
Manifiesto
![Page 27: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/27.jpg)
Developers
Que es una app
NEXT >
Una app de Android esta escrita en Java, el SDK compila este código y sus recursos en un paquete llamado Android Package (APK).
Una app tiene 4 tipos de componentes (unidades que conformar un
sistema):
- Actividades - Servicios - Content Providers - Broadcast Receivers
![Page 28: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/28.jpg)
Developers
Creando nuestra primera app
NEXT >
- Creamos un proyecto en ADT- Le damos Start/Inicio a nuestro
AVD: Prueba- Creamos un nuevo proyecto de
Android.
![Page 29: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/29.jpg)
Developers
Creando nuestra primera app
NEXT >
Llenaremos los datos como lo vemos en la imagen.
Es importante recordar el campo Minimum Required SDK es la versión mas baja que será soportada por nuestra app.
![Page 30: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/30.jpg)
Developers
Creando nuestra primera app
NEXT >
Seguimos al asistente…
NEXT >
![Page 31: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/31.jpg)
Developers
Creando nuestra primera app
NEXT >
Seguimos al asistente…
NEXT >
![Page 32: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/32.jpg)
Developers
Creando nuestra primera app
NEXT >
Seguimos al asistente…
NEXT >
![Page 33: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/33.jpg)
Developers
Creando nuestra primera app
NEXT >
Tendremos esta ventana en ADT.
Este es el editor de UI.
![Page 34: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/34.jpg)
Developers
Creando nuestra primera app
NEXT >
Para ejecutar nuestra app solo clickeamos en:
![Page 35: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/35.jpg)
Developers
Examinando el código…
NEXT >
package personal.nombre.prueba;
import android.os.Bundle;import android.app.Activity;
public class MainActivity extends Activity {
@Overrideprotected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);
}}
![Page 36: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/36.jpg)
Developers
Modificando nuestra primer app.
NEXT >
Vamos a utilizar solo 2 elementos disponibles para crear aplicaciones, un botón y una entrada de texto simple.
Y usaremos 2 ventanas para lograr esto.
![Page 37: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/37.jpg)
Developers
Construyendo la UI
NEXT >
Las interfaces graficas de Android están construidas usando una jerarquía de vistas.
- View: Una sola unidad de vista. - ViewGroup: Grupo de vistas que puede contener mas grupos.
![Page 38: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/38.jpg)
Developers
Agregando un LinearLayout
NEXT >
<?xml version="1.0" encoding="utf-8"?><LinearLayout 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:orientation="horizontal" ></LinearLayout>
Un LinearLayout es un viewgroup que deja poner vistas en orientación horizontal ó vertical.
Borraremos el contenido del archivo res/layout/activity_main.xml y escribiremos el contenido del siguiente snippet de codigo.
![Page 39: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/39.jpg)
Developers
Agregando un TextField
NEXT >
<EditText android:id="@+id/edit_message" android:layout_width="wrap_content" android:layout_height="wrap_content" android:hint="@string/edit_message" />
Un TextField es un campo que puede ser modificado por el usuario. Dentro del Layout agregado anteriormente agregamos el siguiente código:
Los atributos de cada Objeto XML son importantes.
![Page 40: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/40.jpg)
Developers
Strings como recursos
NEXT >
<string name="edit_message">Enter a message</string> <string name="button_send">Send</string>
Modificaremos el archivo res/values/strings.xml que es el archivo que contiene los strings que estarán guardados como recursos.
Guardar los strings como recurso facilitara la internacionalización de nuestra app.
![Page 41: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/41.jpg)
Developers
Agregando un botón
NEXT >
<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/button_send" />
Agregaremos un botón después del TextField anterior.
Todo esto lo podemos crear con el editor de Eclipse, pero es mejor escribirlo para aprender.
![Page 42: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/42.jpg)
Developers
¿cómo vamos?
NEXT >
La vista del editor grafico, nos debe mostrar la siguiente interfaz.
![Page 43: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/43.jpg)
Developers
Se ve como que feíto…
NEXT >
android:layout_weight="1"
Para hacer que la caja de texto tome mas espacio, es necesario aplicarle PESO a nuestra vista.
Agregamos lo siguiente al EditText:
Y se vera como el snippet de:
https://gist.github.com/jmsalcido/5016020
![Page 44: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/44.jpg)
Developers
Haciendo funcionar el botón Send
NEXT >
Para hacer funcionar el botón Send necesitamos hacer lo siguiente:
- Agregarle la función onClick al boton en el objeto XML
- Agregarle la rutina/método al archivo que nos genero Eclipse en la carpeta src/
android:onClick="sendMessage"
public void sendMessage(View view) { // Responder al evento
}
![Page 45: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/45.jpg)
Developers
Haciendo funcionar el botón Send
NEXT >
Necesitaremos hacer uso de los Intents y conocer lo que es una Actividad.
Que es un Intent Que es una actividad
![Page 46: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/46.jpg)
Developers
Haciendo funcionar el botón Send
NEXT >
Primero crearemos la actividad nueva, siguiendo el asistente. Le damos a:
![Page 47: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/47.jpg)
Developers
Haciendo funcionar el botón Send
NEXT >
Necesitamos hacer que nuestra aplicación obtenga el texto del campo y lo mande por un Intent, agregaremos el siguiente código al método sendMessage de MainActivity:
public final static String EXTRA_MESSAGE = "com.example.myfirstapp.MESSAGE";
public void sendMessage(View view) {Intent intent = new Intent(this, DisplayMessageActivity.class);EditText editText =
(EditText) findViewById(R.id.edit_message);String message = editText.getText().toString();intent.putExtra(EXTRA_MESSAGE, message);startActivity(intent);
}
![Page 48: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/48.jpg)
Developers
Haciendo funcionar el botón Send
NEXT >
super.onCreate(savedInstanceState);
// Obtener el intent y el mensaje Intent intent = getIntent(); String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE);
// Crear TextView TextView textView = new TextView(this); textView.setTextSize(40); textView.setText(message);
// Darle la vista a la activity setContentView(textView);
En la segunda actividad: DisplayMessageActivity
![Page 49: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/49.jpg)
Developers
Terminada la primer app
NEXT >
![Page 50: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/50.jpg)
Developers
<jesus>
NEXT >
![Page 51: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/51.jpg)
Developers
NO estamos locos
NEXT >
No, no estamos locos, toda la información la pueden encontrar en:
http://developer.android.com/
En ingles, obviamente.
![Page 52: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/52.jpg)
Developers
CODEAR!!!
NEXT >
Quien se anime a codear una app hoy, en hora buena vamos a darle y la distribuimos, ¿qué les parece?
![Page 53: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/53.jpg)
Developers
<Titulo>
![Page 54: Taller Android SHDH Ciudad Obregon](https://reader033.vdocuments.mx/reader033/viewer/2022052315/5479a6deb4af9f35278b45f1/html5/thumbnails/54.jpg)
Developers
titel
NEXT >