Este documento presenta una guía introductoria para el desarrollo de aplicaciones móviles bajo la plataforma Android utilizando Android Studio. Explica cómo instalar Android Studio e identificar sus principales componentes de interfaz de usuario. Luego, describe la estructura típica de un proyecto de Android y cómo configurar y usar dispositivos reales para pruebas y depuración. Finalmente, presenta algunos conceptos básicos sobre el manejo de TextViews en Android.
Android Studio
Descargar Java JDK
Descargar Android Studio
Descargar GenyMotion
Instalación de Android Studio
Configuración de Virtual Box
Agregar Unidades Virtuales en Genymotion
Agregar Plugings Genymotion en Android Studio
Creación de Primer Proyecto de Prueba en Android Studio
Enlaces de Referencia
Fundamentos de una App
Componentes de una App
Recursos de una App
Archivo Android Manifest.xml
Entorno Android Studio,
Árbol del Proyecto
Vistas del Proyecto
Controles y Objetos Android Studio
Qué son los Layouts
Tipos de Layouts
Controles View
Controles Buttom
Tipos de Controles Buttom
Control TextView
Control TextField
Control EditText
Versión inicial presentación Android Studio y Gradle. . Kamil Zabdyr
El objetivo de la charla es intentar convencer y motivar a los más excépticos a utilizar Android Studio junto con Gradle. Explicando, entre otras cosas, como incrementar la productividad con las últimas características y plugins de ambos, proponiendo soluciones a los errores más habituales y mostrando en una demo las muchas ventajas que ofrece.
Tecnologías Anteriores
¿Qué se puede hacer con Android?
¿Qué tiene Android?
¿Breve historia de Android?
Versiones de Android
Crecimiento de Android
Android Studio
Componentes de Android Studio
Descarga e Instalación
Creación de Proyecto
Enlaces de Referencia
Entornos de Desarrollo para Android
Entorno Eclipse
Versiones de Eclipse
AndroidSDK Manager
Plugins ADT de Android
Configurar plugings ADT
Configurar AVD Manager
Creación de Nuevo Proyecto
Estructura del Proyecto Android
Componentes de Android
Android Studio
Descargar Java JDK
Descargar Android Studio
Descargar GenyMotion
Instalación de Android Studio
Configuración de Virtual Box
Agregar Unidades Virtuales en Genymotion
Agregar Plugings Genymotion en Android Studio
Creación de Primer Proyecto de Prueba en Android Studio
Enlaces de Referencia
Fundamentos de una App
Componentes de una App
Recursos de una App
Archivo Android Manifest.xml
Entorno Android Studio,
Árbol del Proyecto
Vistas del Proyecto
Controles y Objetos Android Studio
Qué son los Layouts
Tipos de Layouts
Controles View
Controles Buttom
Tipos de Controles Buttom
Control TextView
Control TextField
Control EditText
Versión inicial presentación Android Studio y Gradle. . Kamil Zabdyr
El objetivo de la charla es intentar convencer y motivar a los más excépticos a utilizar Android Studio junto con Gradle. Explicando, entre otras cosas, como incrementar la productividad con las últimas características y plugins de ambos, proponiendo soluciones a los errores más habituales y mostrando en una demo las muchas ventajas que ofrece.
Tecnologías Anteriores
¿Qué se puede hacer con Android?
¿Qué tiene Android?
¿Breve historia de Android?
Versiones de Android
Crecimiento de Android
Android Studio
Componentes de Android Studio
Descarga e Instalación
Creación de Proyecto
Enlaces de Referencia
Entornos de Desarrollo para Android
Entorno Eclipse
Versiones de Eclipse
AndroidSDK Manager
Plugins ADT de Android
Configurar plugings ADT
Configurar AVD Manager
Creación de Nuevo Proyecto
Estructura del Proyecto Android
Componentes de Android
El contenido de la presentación incluye los siguientes Conceptos y Generalidades de Android:
Concepto de Android
Versiones de Android
Arquitectura de Android
Dispositivos que los Soportan
Tipo de Licencia
Introducción a Android: 10 cosas importantes que hay que entenderjezabelink
Estan son las diapositivas del taller de Android que se dio en la Universidad Autonoma de Baja California Sur por parte de UNAM MOBILE.
Web: unammobile.net
Tw: @unam_mobile
Temas:
• Reglas Para la Creación de Aplicaciones para Móviles
• Importancia Del Mockup
• Ejemplos de Mockup
• App Casos De Éxito
• El Futuro De Las App
El contenido de la presentación incluye los siguientes Conceptos y Generalidades de Android:
Concepto de Android
Versiones de Android
Arquitectura de Android
Dispositivos que los Soportan
Tipo de Licencia
Introducción a Android: 10 cosas importantes que hay que entenderjezabelink
Estan son las diapositivas del taller de Android que se dio en la Universidad Autonoma de Baja California Sur por parte de UNAM MOBILE.
Web: unammobile.net
Tw: @unam_mobile
Temas:
• Reglas Para la Creación de Aplicaciones para Móviles
• Importancia Del Mockup
• Ejemplos de Mockup
• App Casos De Éxito
• El Futuro De Las App
Tecnológico Nacional de México
Ingeniería en Sistemas Computacionales
Este material didáctico fue desarrollado para la asignatura de Tópicos Avanzados de Programación, del plan SCD-1027 2016
Android Studio es el entorno de desarrollo integrado (IDE) oficial para el desarrollo de aplicaciones para Android. Android Studio ofrece aún más funciones que aumentan tu productividad durante la compilación de apps para Android.
Android es un sistema operativo creado y mantenido por Google, basado en software GNU (open
source). Podría decirse que es una derivación de Linux y uso programación nativa está basada en
Java. También es posible programarlo desde híbridos tales como Ionic o PhoneGap; incluso con
C/C++ como Unity.
Android, en contraste a otros sistemas operativos como iOS o Windows Phone que son aún más
cerrados incluido al hardware específico del dispositivo, se trabaja abiertamente (mediante Open
Source). De ello se deriva que sea tan popular en los fabricantes de hardware móvil, porque lo
pueden integrar sin costo.
Se denomina motor de corriente alterna a aquellos motores eléctricos que funcionan con alimentación eléctrica en corriente alterna. Un motor es una máquina motriz, esto es, un aparato que convierte una forma determinada de energía en energía mecánica de rotación o par.
Convocatoria de becas de Caja Ingenieros 2024 para cursar el Máster oficial de Ingeniería de Telecomunicacion o el Máster oficial de Ingeniería Informática de la UOC
Criterios de la primera y segunda derivadaYoverOlivares
Criterios de la primera derivada.
Criterios de la segunda derivada.
Función creciente y decreciente.
Puntos máximos y mínimos.
Puntos de inflexión.
3 Ejemplos para graficar funciones utilizando los criterios de la primera y segunda derivada.
Plan de Desarrollo Urbano de la Municipalidad Provincial de Ilo
Guia generalandroidstudioseccion3.docx
1. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Bienvenidos a Android Studio con esta pequeña guía se pretenden dar inicio a algunos
fundamentos en el manejo de la herramienta Android Studio y poner en práctica algunos
elementosnecesariosparacomprendermejorel temade programaciónparadispositivos móviles.
1. Instalación y puesta en Marcha.
Para este cursoestaremostrabajandolaversiónAndroidStudio2.1.2,de igual maneraunaversión
posterior es válida para el trabajo, recordar descargarlo desde la página oficial:
https://developer.android.com/studio/index.html?hl=es-419 , y al momento de instalarlo tener
presente unabuenaconexiónainternet.Recordarque es necesario contar con el JDK de Java con
el fin de dar soporte al lenguaje de programación y emulación de las aplicaciones a realizar.
2. Conoce Android Studio
AndroidStudioesel entornode desarrollointegrado(IDE) oficialparael desarrollode aplicaciones
para Androidyse basaen IntelliJIDEA. Además del potente editor de códigos y las herramientas
para desarrolladores de IntelliJ, Android Studio ofrece aún más funciones que aumentan tu
productividad durante la compilación de apps para Android, como las siguientes:
● Un sistema de compilación basado en Gradle flexible
● Un emulador rápido con varias funciones
● Un entorno unificado en el que puedes realizar desarrollos para todos los dispositivos
Android
● Instant Run para aplicar cambios mientras tu app se ejecuta sin la necesidad de compilar
un nuevo APK
● Integraciónde plantillasde código y GitHub para ayudarte a compilar funciones comunes
de las apps e importar ejemplos de código
● Gran cantidad de herramientas y frameworks de prueba
● HerramientasLintparadetectarproblemasde rendimiento,usabilidad,compatibilidad de
versión, etc.
● Compatibilidad con C++ y NDK
● Soporte incorporadoparaGoogle Cloud Platform, lo que facilita la integración de Google
Cloud Messaging y App Engine.
2. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Estructura del proyecto
Figura 1. Archivos del proyecto en la vista de Android.
Cada proyecto en Android Studio contiene uno o más
módulos con archivos de código fuente y archivos de
recursos. Entre los tipos de módulos se incluyen los
siguientes:
● módulos de apps para Android
● módulos de bibliotecas
● módulos de Google App Engine
De manera predeterminada, Android Studio muestra los
archivos de tu proyecto en la vista de proyectos de
Android, como se muestra en la figura 1. Esta vista se
organiza en módulos para proporcionar un rápido acceso
a los archivos de origen clave de tu proyecto.
Todos los archivos de compilación son visibles en el nivel
superior de Secuencias de comando de Gradle y cada
módulo de la aplicación contiene las siguientes carpetas:
● manifests: contiene el
archivo AndroidManifest.xml.
● java: contiene los archivos de código fuente de
Java, incluido el código de prueba JUnit.
● res: Contiene todos los recursos, como diseños XML, cadenas de IU e imágenes de mapa
de bits.
La estructura del proyecto para Android en el disco difiere de esta representación plana. Para
ver la estructura de archivos real del proyecto, selecciona Project en la lista
desplegable Project (en la figura 1 se muestra como Android).
También puedes personalizar la vista de los archivos del proyecto para concentrarte en
aspectos específicos del desarrollo de tu app. Por ejemplo, al seleccionar la
vista Problems de tu proyecto, aparecerán enlaces a los archivos de origen que contengan
errores conocidos de codificación y sintaxis, como una etiqueta de cierre faltante para un
elemento XML en un archivo de diseño.
Figura 2. Archivos del proyecto en la vista Problems, en la que se muestra un archivo de diseño
con un problema.
3. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Interfaz de usuario
La ventana principal de Android Studio consta de varias áreas lógicas que se identifican en la
figura 3.
Figura 3. Ventana principal de Android Studio.
1. La barra de herramientas te permite realizar una gran variedad de acciones, como la
ejecución de tu app y el inicio de herramientas de Android.
2. La barra de navegación te ayuda a explorar tu proyecto y abrir archivos para editar.
Proporciona una vista más compacta de la estructura visible en la ventana Project.
3. La ventanadel editor es el área donde puedes crear y modificar código. Según el tipo de
archivo actual, el editor puede cambiar. Por ejemplo, cuando se visualiza un archivo de
diseño, el editor muestra el editor de diseño.
4. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
4. La barra de la ventana de herramientas se extiende alrededor de la parte externa de la
ventanadel IDE ycontiene los botones que te permiten expandir o contraer ventanas de
herramientas individuales.
5. Las ventanas de herramientas te permiten acceder a tareas específicas, como la
administración de proyectos, las búsquedas, los controles de versión, etc. Puedes
expandirlas y contraerlas.
6. En la barra de estado, se muestra el estado de tu proyecto y del IDE en sí, como también
cualquier advertencia o mensaje.
Puedesorganizarlaventanaprincipal paratenermásespacioenpantallaocultandoodesplazando
barras y ventanasde herramientas.Tambiénpuedesusar combinaciones de teclas para acceder a
la mayoría de las funciones del IDE.
En cualquiermomento,puedesrealizarbúsquedasentu código fuente, bases de datos, acciones,
elementosde lainterfazde usuario,etc.,presionandodosveceslatecla Shift o haciendo clic en la
lupaque se encuentraenla esquinasuperiorderechade laventanade AndroidStudio.Estopuede
ser muy útil, por ejemplo, si intentas localizar una acción específica del IDE que olvidaste cómo
activar.
Ventanas de herramientas
En lugar de usar perspectivas preestablecidas, Android Studio sigue tu contexto y te ofrece
automáticamente ventanas de herramientas relevantes mientras trabajas. De forma
predeterminada,lasventanasde herramientasusadasconmayorfrecuenciase fijanenla barra de
ventanas de herramientas en los bordes de la ventana de la aplicación.
Para expandir o contraer una ventana de herramientas, haz clic en el nombre de la herramienta,
enla barra de laventanade herramientas.Tambiénpuedesarrastrar,anclar,desanclar, adjuntar y
ocultar ventanas de herramientas.
Para volveral diseñopredeterminadoactual de laventanade herramientas, haz clic en Window >
Restore DefaultLayoutopersonalizatudiseño predeterminado haciendo clic en Window > Store
Current Layout as Default.
Para mostrar u ocultar la barra de la ventana de herramientas completa, haz clic en el ícono de
ventana en la esquina inferior izquierda de la ventana de Android Studio.
Para localizarunaventanade herramientasespecífica,colocael punterosobre el íconode ventana
y selecciona la ventana de herramientas en el menú.
3. Controladores OEM USB
5. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Cuando creas una aplicación para Android, es
importante que siempre la pruebes en un dispositivo
real antes de lanzarla al mercado. En esta página, se
describe la manera de configurar tu entorno de
desarrolloytu dispositivo con tecnología Android para
realizar pruebas y depuraciones en el dispositivo.
Puedes usar cualquier dispositivo con tecnología
Androidcomo entorno para ejecutar, depurar y probar
tus aplicaciones.Lasherramientasque se incluyenenel
SDK facilitan la instalación y la ejecución de tu
aplicación en el dispositivo cada vez que realizar
compilaciones. Puedes instalar la aplicación en el
dispositivo directamente desde Android Studio o desde la línea de comando con ADB. Si todavía
no tienesundispositivo,consultaconlosproveedoresde servicios de tu área para determinar los
dispositivos con tecnología Android que están disponibles.
Habilitación de opciones para el desarrollador en el dispositivo
Los dispositivoscontecnologíaAndroidpresentandiferentes opciones para el desarrollador a las
que puedes acceder en el teléfono. Con ellas puedes hacer lo siguiente:
● Habilitar la depuración mediante USB;
● Obtener rápidamente informes de errores en el dispositivo;
● Mostrar el uso de la CPU en la pantalla;
● Mostrar informaciónde depuraciónenlapantalla,comolímites, actualizaciones en vistas
de GPU y capas de hardware, y otros datos;
● Muchas más opcionesparasimularesfuerzosde laappo habilitaropcionesde depuración.
Para accedera estaconfiguración,abre DeveloperoptionsenSettings. En Android 4.2 y versiones
posteriores, la pantalla Developer options está oculta de manera predeterminada. Para que se
muestre,dirígete aSettings>Aboutphone y toca Build number siete veces. Cuando regreses a la
pantalla anterior, verás que Developer options aparecerá en la parte inferior.
Configuración de un dispositivo para desarrollo
Con un dispositivo con tecnología Android puedes desarrollar y depurar tus aplicaciones para
Android como lo harías en el emulador. Antes de comenzar, haz lo siguiente:
Verifica que la aplicación sea “depurable” en el manifiesto o en el archivo build.gradle.
En el archivode compilación,asegúrate de que lapropiedaddebuggable enel tipode compilación
debug sea true. La propiedad del tipo de compilación anula la configuración del manifiesto.
android {
buildTypes {
6. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
debug {
debuggable true
}
En el archivoAndroidManifest.xml,agregaandroid:debuggable="true" al elemento<application>.
Nota: Si habilitas manualmente la depuración en el archivo del manifiesto, asegúrate de
inhabilitarla en tu compilación de versiones (generalmente, tu aplicación publicada no debe ser
depurable).
Habilita USB debugging en el dispositivo. Para ello, ve a Settings > Developer options.
Nota:En Android4.2 y versionesposteriores, la opción Developer options está oculta de manera
predeterminada. Para que esté disponible, dirígete a Settings > About phone y presiona Build
number siete veces. Cuando regreses a la pantalla anterior, verás Developer options.
Configura el sistema para que detecte el dispositivo.
Si deseas realizar tareas de desarrollo en Windows, debes instalar un controlador USB para adb.
Para obtener una guía de instalación y vínculos a controladores OEM, consulta el documento
Controladores OEMUSB.
En el caso de lastareasde desarrolloenMac OS X,no necesitas configurar el sistema. Omite este
paso.
Si realizasdesarrollosen Windows y deseas conectar un dispositivo para realizar pruebas, debes
instalarel controladorUSB apropiado. En esta página se proporcionan vínculos con los sitios web
de variosfabricantesde equiposoriginales (OEM) en las que podrás descargar el controlador USB
correspondiente para tu dispositivo.
Si realizasdesarrollosen Mac OS X o Linux, no necesitarás un controlador USB. Como alternativa,
lee Uso de dispositivos hardware.
Obtener controladores de OEM
OEM URL del controlador
Acer http://www.acer.com/worldwide/support/mobile.html
ALCATEL ONE
TOUCH
http://www.alcatelonetouch.com/global-en/support/
7. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Asus http://support.asus.com/download/
Blackberry https://swdownloads.blackberry.com/Downloads/entry.do?code=4EE0932F4
6276313B51570F46266A608
Dell http://support.dell.com/support/downloads/index.aspx?c=us&cs=19&l=en&s
=dhs&~ck=anavml
Fujitsu http://www.fmworld.net/product/phone/sp/android/develop/
Hisense http://app.hismarttv.com/dss/resourcecontent.do?method=viewResourceDe
tail&resourceId=16&type=5
HTC http://www.htc.com
Haz clic enla pestañade soporte para seleccionartusproductosytu
dispositivo.Losvínculosvariaránsegúnlaregión.
Huawei http://consumer.huawei.com/en/support/index.htm
Intel http://www.intel.com/software/android
Kyocera http://www.kyocera-wireless.com/support/phone_drivers.htm
Lenovo http://support.lenovo.com/us/en/GlobalProductSelector
LGE http://www.lg.com/us/support/software-firmware
Motorola https://motorola-global-
portal.custhelp.com/app/answers/detail/a_id/88481/
MTK http://online.mediatek.com/Public%20Documents/MTK_Android_USB_Driver
.zip(descargade archivoZIP)
Oppo http://www.oppo.com/index.php?q=software/view&sw_id=631
Pegatron http://www.pegatroncorp.com/download/New_Duke_PC_Driver_0705.zip (ZI
8. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
P download)
Samsung http://www.samsung.com/us/support/downloads
Sharp http://k-tai.sharp.co.jp/support/
Sony
Mobile
Communica
tions
http://developer.sonymobile.com/downloads/drivers/
Toshiba http://support.toshiba.com/sscontent?docId=4001814
Xiaomi http://www.xiaomi.com/c/driver/index.html
ZTE http://support.zte.com.cn/support/news/NewsDetail.aspx?newsId=1000442
4. Manejo de TextViews
Vamosa crear unproyectoenAndroidStudioycomenzara utilizarlaspropiedadesdel TextView.
En este proyecto se presenta el Hello World clásico lo que debemos hacer es con el TextView
Damos Doble Click y le colocamos a ese texto un nuevo nombre y el Id para su programación.
Seguidode este paso vamos revisar dentro del RelativeLayout cómo se comporta el texto el cual
nos permite ubicarlo en cualquier parte y conservar el aspecto de dispositivo a otro. Podemos
centrar el texto y moverlo igual se mantiene centrado de dispositivo a dispositivo.
9. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Seguido de esto vamos a ver cómo darle medidas o distancias a este texto esta opción que se
maneja es Layout Margin utilizando la medida dp (Density Independent – Pixels).
Diferentes unidades de medida disponibles en Android: dp, sp, pt, px, mm, in
En el momentode desarrollarunaaplicaciónparaAndroidnosencontramosconel “problema” de
la gran cantidad de dispositivos disponibles en el mercado, cada uno con un tamaño de pantalla
diferente.Comoprogramadores, queremos que nuestra aplicación sea compatible con todos los
diferentes tamaños de pantalla.
Para solucionareste problema, en Android tenemos disponibles varias unidades de medida que
nos ayudarána que nuestraaplicaciónse veacorrectamente seacual seael tamañode la pantalla.
Para ello, debemos utilizar la unidad de medida que mejor se ajuste a nuestra aplicación y
requerimientos.Lautilizaremosparaespecificarel tamañode loselementosde nuestraaplicación.
Aquí va un listado de las diferentes unidades de medida que tenemos disponibles en Android:
– dp (Density-independent Pixels)
Es una unidadabstracta que se basa enla densidadfísicade lapantalla. Estaunidadesequivalente
a un píxel en una pantalla con una densidad de 160 dpi. Cuando se está ejecutando en una
pantalla de mayor densidad, se aumentan el número de píxels utilizados para dibujar 1dp según
los dpi’s de la pantalla. Por otro lado, si la pantalla es de menor densidad, el número de píxeles
utilizados para 1dp se reducirán. Utilizar las unidades dp en lugar de píxeles es la solución más
simple para tratar los diferentes tamaños de pantalla de los dispositivos.
– sp (Scale-independent Pixels)
Esta unidad es como la anterior, pero se escala según el tamaño de fuente configurada. Se
recomienda utilizar esta unidad si se especifican tamaños de fuente, por lo que se ajusta tanto
para la densidad de pantalla y como a las preferencia del usuario.
10. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
– pt (Points)
Es un 1/72 de una pulgada, según el tamaño físico de la pantalla
– px (Pixels)
Corresponde a un píxel real en la pantalla. Esta unidad de medida no se recomienda porque la
representación real puede variar según el dispositivo en el que se ejecute, ya que cada uno de
ellos puede tener un número diferente de píxeles por pulgada y pueden tener más o menos
píxeles totales disponibles en la pantalla.
– mm (Milímetros)
Son milímetros reales según el tamaño físico de la pantalla.
– in (Pulgadas)
Son pulgadas reales según el tamaño físico de la pantalla.
Finalmente dentro de las propiedades del Texto esta el layoutWidth y layoutWeight los cuales
tienen tres propiedades que son el Wrap_content, fill_parent y Match_parent.
Otras opciones de manejo son el Style para darle estilo al texto y el Alpha el cual maneja la
opacidad del texto.
Con base en esto se podría utilizar cualquier Style para el texto y el alpha le da la opción de la
opacidad.
11. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
La opción background sirve para colocar el color de fondo del texto, y la opción text color para
colocar el color de texto.
Gravity sirve para cuando queremos con el match_parent moverme sobre todo el campo
seleccionado y alinear el texto.
Padding sirve para ampliar el espacio del texto y moverlo el texto con respecto al mismo.
TestSize sirve para el tamaño del texto pero se debe dar en medidas de SP (Scale Pixels).
12. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Aplicando lo visto: realizar la siguiente imagen con las propiedades vistas.
Manejo de Botones
13. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Para estaseccióndebemostenerencuentaque se utilizayalaopciónde la comunicación entre el
archivoActivity_main.xmlde los Resources (res) y el archivo Java llamado MainActivity donde se
comunica la interfaz gráfica con algo de programación.
Para estoenla mismaaplicaciónanteriorcreamosel ButtonOk,y vamos a las propiedades donde
dice Onclick y le colocamos como nombre ClickFunction, esto nos sirve para crear el método con
lenguaje JAVA que permita enlazar al vista de ese botón con mostrar un mensaje por consola
cuando le demos click
Luegoabrimosel archivoubicadoenla carpetaJava llamadoMainActivityycreamosunmétodo el
cual es:
public void clickFunction(View view){
log.i(“Info”, “Boton Presionado”);
}
Así por consola saldrá el mensaje de botón presionado.
Aplicarloaprendido:Realizareste ejemplo para que cuando demos click sobre el botón aparezca
en consola el nombre del aprendiz.
5. Tomando Datos del Usuario:
Para podertomar datosdel usuariodebemos crear un TextField y a ese mismo darle un Id el cual
nos va a servir por medio del objeto view para llamar los valores que el cliente necesita.
Cargamos el TextField y dándole click sobre el mismo se le agrega el Id el cual se podría llamar
myText
Luego pasamos al archivo de JAVA donde vamos a cargar el siguiente código.
public void clickFunction(View view){
14. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
EditText myText = (EditText) findViewById(R.id.MyTextField);
Log.i("info",myText.getText().toString());
}
AplicandoloAprendido:CrearunLogincon Username y Password donde capturemos por consola
el user name y el password de la persona.
6. Mostrando Mensajes tipo Toast
Para mostrar mensajes de datos capturados por el usuario los cuales son muy interactivos se
utiliza el método Toast.
15. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
De igual manerase carga todaslasopcionesnombradasanteriormente pero en el código vamos a
utilizar la siguiente sintaxis:
public void ClickToast(View view){
EditText MyTextField = (EditText)findViewById(R.id.MyTextField);
Log.i("Nombre", MyTextField.getText().toString());
Toast.makeText(MainActivity.this, "Hola:" +
MyTextField.getText().toString(), Toast.LENGTH_SHORT).show();
}
Aplicar lo aprendido: Crear un proyecto donde se pidan dos datos por medio de 2 TextFields y
cuando presione el Boton que muestre en el toast de manera concatenada los dos valores.
7. Manejo de Imágenes (ImageView):
Para este pasodebemosescogerdosfotospararealizardoscambiospor medio de un botón estas
fotos es recomendable que tengan una medida de 400 px * 400px ya que esto permite mejor
manipulación.
Cargamos un ImageView por y en la opción Src se le coloca la imagen a necesitar. Luego le
colocamos Id a esa nueva imagen llamándola cambioImageView; seguido creamos un botón y le
colocamos su función onClick para que cuando lo presionemos se active el cambio dinámico.
Pasamos al MainActiviy de Java y creamos el siguiente método:
public void newHija(View view){
ImageView image = (ImageView) findViewById(R.id.cambioImageView); //
imagen que carga al inicio
16. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
image.setImageResource(R.drawable.julian); // imagen de cambio
}
Aplica lo Aprendido: Realizar con una foto personal o familiar este tipo de animación de una foto a otra.
Tarea: Se va a gestionar al aprendiz el video de una Aplicación llamada Currency Converter la cual sirve
para cambiar de una moneda a otra, realizar esta aplicación sencilla para convertir de pesos a dólares.
SESION 2:
Para desarrollar la aplicación de cambio de moneda procedemos a crear nuestro proyecto en
Android, donde se colocará un Editext de tipo Numeric , un botono y un imageView.
17. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Recordar que en el ImageView se selecciona y en la carpeta del proyecto llamada Drawable se
procede a copiar la imagen que vamos a ingresar. Quedando Así.
Recuerden que los nombres de las fotos o imágenes a utilizar deben estar en minúscula y sin
caracteresespeciales.Seguidamentepasamosacrear seleccionandoel EditTextde tipoNumericla
opción de Hint con la cual se le da a entender al usuario que valor debe ingresar. Vamos a la
propiedadHintyse coloca: Ingrese el ValorenDólares.Seguidovamosadarle dobleclickal campo
EditText y le damos un Id para su programación. De igual manera al botón le damos su Id.
18. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Finalmente en la propiedad Onclick del Botón le creamos el método el cual va a trabajar para el
cambio de moneda. Llamándolo convertClick.
Ingresamos al MainActivity y colocamos el siguiente código:
public void convertClick (View v){
EditText valorDollarEditText = (EditText)
findViewById(R.id.valorDollarEditText);
if (valorDollarEditText != null &&
valorDollarEditText.getText().toString().trim().equalsIgnoreCase("")){
Toast.makeText(this, "Debes Ingresar un
Valor!",Toast.LENGTH_SHORT).show();
}else{
Double valorDollarDouble =
Double.parseDouble(valorDollarEditText.getText().toString());
Double valorPesos = valorDollarDouble * 2958.57988;
Toast.makeText(MainActivity.this,"$" + " "+
String.format("%.2f",valorPesos)+ "Pesos
Colombianos",Toast.LENGTH_LONG).show();
// Ocultar teclado virtual
InputMethodManager imm =(InputMethodManager)
getSystemService(INPUT_METHOD_SERVICE);
imm.hideSoftInputFromWindow(v.getWindowToken(), 0);
}
}
Lo que se hace es validarque el EditTextnotenga nulos y que el usuario haya ingresado algo, por
otro ladola funciónsirve paraocultarel teclado Automáticamente cuando le demos la opción de
convertir en el botón.
Otra Versiónde Aplicaciónde Cambiode MonedaconRadioButton,LinearLayouty RequestFocus.
Vamos a construir una interfaz gráfica de la siguiente forma:
19. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Se puede realizar por medio de la sintaxis XML del Activity_Main.xml
20. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
21. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Vamosal mainactivityle hacemos una implementación de la clase onClickListener y creamos los
campos de tipo EditText donde se van a guardar los valores que el usuario digite.
Seguidamente enel métodoprincipal de ejecuccionde laAPPse inicializanlos valores y se recoge
cada valorque el usuariovayaa digitary el eventoque generael onClickListener se le asigna a los
dos radiobutton y al botón de convertir.
22. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Seguidamente se crea el método de conversión de una Moneda a Otra, este método por la
filosofía del manejo puede servir para pasar de Dolares a cualquier moneda según su tasa de
cambio que vamos a colocar.
23. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Ya casi para terminarcreamosel métodode la monedacambiadaa dólares.
Para Finalizarse creael métodoque va a validarque losdosradioButtons no estén chequeados al
tiempo y se procede según la elección a activar cada método.
Actividades a Entregar: jaquimbayo6@misena.edu.co
24. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
1. App de Cambio de Moneda.
2. Realizarunaaplicaciónsencilladonde se utilicentodosestoselementos como el EditText,
EventoOnclickListener, Métodos. Mínimo que implique la creación de 2 o mas Métodos.
3. Plazo Maximo: 13 – 05 -2017 a las 5:00 pm.
MANEJO DE AUDIO Y REPRODUCTOR DE VIDEO
Como primera medida para comenzar a trabajar con audios necesitamos al creación de una
carpeta llamada Raw esta se ubica en el espacio de res(Resources), allí damos click derecho y
creamos esta carpeta.
Seguidamente podemos guardar Sonido o Video en dicha carpeta para poder introducirlo en
nuestra aplicación.
Seguidamente copiamos y pegamos el video seleccionado en esta carpeta llamada raw.
No olvidar dar click derecho sobre la carpeta raw y seleccionar la opción que dice sincronizar
carpeta raw.
Luego de esto colocamos en nuestra Clase MainActivity el siguiente código que lo que hará es
cargar el video y comenzar a reproducirlo.
25. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Tenerencuentaque acepta videosenformatoscomo3gp, mpa,avi,perono acepta en el formato
MOV, por ejemplo. De todas formas este código ayuda a que se corra el video pero no da el
manejadororeproductorque Androidtiene pordefecto,coneste códigose puedesolucionaresta
cuestión:
Para el Audiose creandos botonesconel Id y el eventoonClicksobre el Botonde Play y el evento
onClick sobre el botón de Pause llamado pauseAudio, el código sería el Siguiente:
Si no funciona de esta manera de puede colocar la Línea de mediaPlayer =
MediaPlayer.create(this, R.raw.granada); en el créate Bundle de la App.
26. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
CONTROLAR EL AUDIO:
Para comenzarvamosa implementardosSeekBarunaparacontrolarel nivel del volumendel
Audioyotra para controlaro simularladuracióndel sonido.
La primeraseekBarvasinIdy la segundaposee el Idscrubber.
Pasamosa nuestrocódigohtml y hacemosénfasisenasociarala primera seekBar las acciones del
botón de pause esto con el objetivo de que cuando quiera parar el audio la ProgressBar se
detenga.
27. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Pasamosal MainActivitydonde vamosahacerusode unaclase llamada AudioManager la cual nos
permitirá asociar el sonido a la barra de progreso.
28. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Comoactividadpara entregarel día de hoy 27 de Mayo de 2017, se debe realizar con el elemento
GridLayout la siguiente propuesta:
Donde cada botónva a activarla referenciade cadafrase peroenotro lenguaje lo podemos hacer
español – inglés, o cualquier idioma a otro.
COMUNICAR DOS ACTIVIDADES EN ANDROID
29. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Lo mas importante a la hora de comunicar dos actividades es determinar cual es la historia a
narrar, esdecirdesde que actividadse vaa enviarinformaciónyque vamosa recibir, para esto los
siguientes pasos son los importantes.
Dentrodel Main Activityvamosacrear en el Layoutllamadoactiviy_main.xml el siguiente código:
Ahora en el Main_Activity de Java se va a colocar el siguiente código:
30. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
31. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Creamos dentro del paquete de las clases una clase llamada Visor la cual tendrá un archivo Xml
creado a partir de ella llamado: visor_activity.xml
En ese archivo xml se coloca el siguiente código:
32. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Finalmente en el Archivo de la clase Visor.java se coloca el siguiente código:
33. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
La filosofía del manejo del Intent radica en crear variables generales o globales a todo el código
con el objetivo de pasar los valores necesarios según el usuario requiera, asi algunos usos del
intent son:
Una Intent esun objetode acción que puedesusar para solicitaruna acción de otro componente
de la aplicación. Aunque las intents facilitan la comunicación entre los componentes de muchas
maneras, existen tres casos de uso fundamentales:
Para comenzar una actividad:
Una Activity representauna única pantalla en una aplicación. Puedes iniciar una nueva instancia
de una Activity pasando una Intent a startActivity(). La Intent describe la actividad que se debe
iniciar y contiene los datos necesarios para ello.
Si deseas recibir un resultado de la actividad cuando finalice, llama a startActivityForResult(). La
actividad recibe el resultado como un objetoIntentseparado en el callback de onActivityResult()
de la actividad. Para obtener más información, consulta la guía Actividades.
Para iniciar un servicio:
Un Service es un componente que realiza operaciones en segundo plano sin una interfaz de
34. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
usuario. Puede iniciar un servicio para realizar una operación única (como descargar un archivo)
pasando una Intent a startService(). La Intent describe el servicio que se debe iniciar y contiene
los datos necesarios para ello.
Si el servicioestá diseñadocon una interfaz cliente-servidor,puedes establecer un enlace con el
serviciode otro componente pasando una Intent a bindService().Paraobtener más información,
consulte la guía Servicios.
Para entregar un mensaje:
Un mensaje es un aviso que cualquier aplicación puede recibir. El sistema entrega varios
mensajes de eventos del sistema, como cuando el sistema arranca o el dispositivo comienza a
cargarse. Puedes enviar un mensaje a otras apps pasando una Intent a sendBroadcast(),
sendOrderedBroadcast() o sendStickyBroadcast()
ACTIVIDAD: Realizar una App donde se pasen parámetros de una activity a otro con tema libre.
Subir al Drive en una carpeta con su nombre completo.
RecyclerView Junto A CardViews En Android
Si estásinteresadoencrearuna aplicaciónenAndroidque hagausode listaspara desplegardatos,
35. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Android Lollipop presenta dos nuevos widgets para hacerte la vida más fácil, RecyclerView y
CardView.Usandoéstoswidgets,es muy fácil dar a tu aplicación una apariencia y un sentido que
cumple con las pautas mencionadas en la especificación de material design de Google.
Requisitos Previos
Para continuar, deberás usar la versión más reciente de Android Studio. Puedes obtenerla en el
sitio de Android Developer.
1. Soporte para versiones anteriores
Al momento de escribir éste post, menos del 2% de dispositivos Android ejecutan Android
Lollipop.Sinembargo, gracias a la libreria de soporte v7Support Library, puedes usar los widgets
RecyclerViewyCardViewendispositivos que ejecutan versiones anteriores de Android al añadir
lassiguienteslíneasalaseccionde dependencies (dependencias) en el archivo build.grade de tu
proyecto:
compile 'com.android.support:cardview-v7:21.0.3'
compile 'com.android.support:recyclerview-v7:21.0.+'
Estas doslíneasde códigohace compatible el CardView yRecyclerView paratodoslosdispositivos
Android inferiores a Lollipop se debe agregar al gradle de la App en dependencies.
Creando un CardView
Un CardView es un ViewGroup. Como cualquier otro ViewGroup, puede añadirse a tu Activity
(Actividad) o Fragment (Fragmento) utilizando un archivo XML que define el layout
(maquetado).
Para crear una CardView vacía, habrías de añadir el siguiente código a tu XML Layout como se
muestra en el siguiente snippet:
Como un ejemplo más realista, vamos a crear un LinearLayout y colocar un CardView dentro de
él. El CardView podría representar, por ejemplo, una persona y contener lo siguiente:
un TextView para desplegar el nombre de la persona
un TextView para desplegar la edad de la persona
un ImageView para mostrar la foto de la persona
Así es como se vería el XML:
36. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Si éste XML es usado como el layout de una Activity, con los campos delTextView establecidos a
valores significativos, entonces así es cómo se renderizaría en un dispositivo Android:
37. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Creando un RecyclerView
Paso 1: Definirlo en un Layout
Usando una instancia de RecyclerView es un poco más complicado. Sin embargo definirlo en un
archivo XML de Layout es muy sencillo. Puedes definirlo en un layout así:
Para obtener una forma de manejarlo en tu Activity, usa el siguiente snippet:
RecyclerView rv = (RecyclerView)findViewById(R.id.rv);
Si estás seguro que el tamaño del RecyclerView no se cambiará, puedes añadirlo lo siguiente
para mejorar el desempeño:
rv.setHasFixedSize(true);
Paso 2: Usando un Layout Manager
A diferencia de un ListView, un RecyclerView necesita un Layout Manager para manejar el
posicionamientode sus elementos.Podrías definir tu propioLayoutManager al extender la clase
RecyclerView.LayoutManager. Sin embargo, en la mayoría de los casos, podrías simplemente
usar una de las subclases LayoutManager predefinidas:
LinearLayoutManager
GridLayoutManager
StaggeredGridLayoutManager
En éste tutorial, voy a usar un LinearLayoutManager. Ésta subclase LayoutManager por defecto
hará que tu RecyclerView parezca una ListView.
38. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Paso 3: Definiendo los Datos
Al igual que un ListView, un RecyclerView, necesita un adaptador para acceder a sus datos. Pero
antes de crear una adaptador, vamos a crear los datos con los que podamos trabajar. Creamos
una simple clase para representar una persona y luego escribimos un método para inicializar
una List de objetos Person:
Paso 4: Creando un Adaptador
Para crear un adaptador que una RecyclerView puede usar, debes extender
RecyclerView.Adapter. Éste adaptador sigue el patrón de diseño view holder, que significa que
define una clase interna que extienda de RecyclerView.ViewHolder. Éste patrón minimiza el
número de llamadas al costoso método findViewById.
Anteriormente en éste tutorial, ya definimos el XML Layout para un CardView que representa
una persona. Vamos a reutilizar ese layout ahora. Dentro del constructor de nuestro
ViewHKolder, inicializa las views (vistas) que pertenezcan a los elementos de nuestro
RecyclerView.
Luego, añade un constructor al adaptador para que pueda manejar los datos que muestra el
39. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
RecyclerView. Como nuestros datos están en forma de List (lista) de objetos Person, usa el
siguiente código:
RecylerView.Adapter tiene tres métodos abstractos a los que debemos aplicar el modificador
override. Comencemos con el método getItemCount. Éste debería regresar el número de
elementos presentes en los datos. Como nuestros datos están en forma de una List, sólo
necesitamos llamar al método size en el objeto List:
Posteriormente, aplicamos el modificador override al método onCreativeViewHolder. Como
sugiere su nombre, éste método es llamado cuando el ViewHolder necesita ser inicializado.
Especificamos el layout que cada elemento de RecyclerView debería usar. Ésto se hace al inflar
el layout usando LayoutInflater, pasando el resultado al constructor del ViewHolder.
Aplica el modificador Override a onBindViewHolder para especificar el contenido de cada
elementodel RecyclerView.Éste método es muy similar al método getView de un adaptador de
ListView.En nuestro ejemplo, aquí es donde tienes que establecer los valores de los campos de
nombre, edad y foto del CardView.
Finalmente, necesitas hacer el override en el método onAttachedToRecyclerView. Por ahora,
simplemente podemos utilizar la implementación de la superclase de éste método como se
muestra abajo:
40. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Paso 5: Usando el Adaptador
Ahora que está listo el adaptador, agrega el siguiente código a tu Activity para inicializar y usar
el adaptador al llamar al constructor del adaptador y al método setAdapter de RecyclerView:
Paso 6: Compila y Ejecuta
Cuando ejecutasel ejemplode RecyclerViewenun dispositivo Android, deberíasver algo similar
a la siguiente imagen.
Actividad: Realizaruna App con tema libre utilizandoCardViewy RecyclerView.Subir al Drive en
una carpeta con su nombre completo.
MATERIAL DESIGN
Material Designprovidessetof propertiesto customize the Material Design Color theme. But we
use five primary attributes to customize overall theme.
41. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
colorPrimaryDark – This is darkest primary color of the app mainly applies to notification bar
background.
colorPrimary – This is the primary color of the app. This color will be applied as toolbar
background.
textColorPrimary – This is the primary color of text. This applies to toolbar title.
windowBackground – This is the default background color of the app.
navigationBarColor – This color defines the background color of footer navigation bar.
3. Creating Material Design Theme
1. In Android Studio, go to File ⇒ New Project and fill all the details required to create a new
project. When it prompts to select a default activity, select Blank Activity and proceed.
42. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
2. Open res ⇒ values ⇒ strings.xml and add below string values.
3. Open res ⇒ values ⇒ colors.xml and add the below color values. If you don’t find colors.xml,
create a new resource file with the name.
4. Open res ⇒ values ⇒ dimens.xml and add below dimensions.
5. Openstyles.xmlunderres ⇒valuesand add below styles. The styles defined in this styles.xml
are common to all the android versions. Here I am naming my theme as MyMaterialTheme.
43. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
6. Nowunderres,create a foldernamedvalues-v21. Inside values-v21, create another styles.xml
with the below styles. These styles are specific to Android Lollipop only.
styles.xml
<resources>
<style name="MyMaterialTheme" parent="MyMaterialTheme.Base">
<item name="android:windowContentTransitions">true</item>
<item name="android:windowAllowEnterTransitionOverlap">true</item>
<item name="android:windowAllowReturnTransitionOverlap">true</item>
<item
name="android:windowSharedElementEnterTransition">@android:transition/move</item>
<item
name="android:windowSharedElementExitTransition">@android:transition/move</item>
</style>
</resources>
7. Now we have the basic Material Design styles ready. In order to apply the theme, open
AndroidManifest.xml and modify the android:theme attribute of <application> tag.
So after applying the theme, your AndroidManifest.xml should look like
below.
44. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Now if you run the app, you can see the notification bar color changed to
the color that we have mentioned in our styles.
Now let’s try to add a toolbar title and enable the action items.
10. Download this search icon and import it into Android Studio as a Image
Asset.
11. To import the Image Asset in Android Studio, right click on res ⇒ New ⇒
Image Asset. It will show you a popup window to import the resource. Browse
the search icon that you have downloaded in the above step, select Action
Bar and Tab Icons for Asset Type and give the resource name
as ic_search_action and proceed.
45. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
12. Once the icon is imported, open menu_main.xml located under res ⇒ menu and add the
search menu item as mentioned below.
13. Now open your MainActivity.java and do the below changes.
> Extend the activity from AppCompatActivity
> Enable the toolbar by calling setSupportActionBar() by passing the toolbar object.
> Override onCreateOptionsMenu() and onOptionsItemSelected() methods to enable toolbar
action items.
MainActivity.java
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
46. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
public class MainActivity extends AppCompatActivity {
private Toolbar mToolbar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
47. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
After doing the above changes, if you run the app, you should see the search icon and action
overflow icon.
3.2 Adding Navigation Drawer
48. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Addingnavigationdrawer is same as that we do before lollipop, but instead if using ListView for
menuitems,we use RecyclerView inmaterialdesign.Solet’ssee how toimplementthe navigation
drawer with RecyclerView.
14. In yourproject’sjavafolder,create three packages named activity, adapter, model and move
your MainActivity.java to activity package. This will keep your project organized.
15. Openbuild.gradle locatedunderyourappmodule andadd below dependencies. After adding
the dependencies, goto Build ⇒ Rebuild Project to download required libraries.
build.gradle
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:22.2.0'
compile 'com.android.support:recyclerview-v7:22.2.+'
}
16. Under model package, create a class named NavDrawerItem.java with the
below code. This model class is POJO class that defines each row in
navigation drawer menu.
NavDrawerItem.java
package info.androidhive.materialdesign.model;
/**
* Created by Ravi on 29/07/15.
*/
public class NavDrawerItem {
private boolean showNotify;
private String title;
public NavDrawerItem() {
}
public NavDrawerItem(boolean showNotify, String title) {
this.showNotify = showNotify;
49. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
this.title = title;
}
public boolean isShowNotify() {
return showNotify;
}
public void setShowNotify(boolean showNotify) {
this.showNotify = showNotify;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
}
17. Under res ⇒ layout, create an xml layout named nav_drawer_row.xml and
add the below code. The layout renders each row in navigation drawer
menu. If you want to customize the navigation drawer menu item, you
have to do the changes in this file. For now it has only one TextView.
nav_drawer_row.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:clickable="true">
<TextView
50. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
android:id="@+id/title"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="30dp"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:textSize="15dp"
android:textStyle="bold" />
</RelativeLayout>
18. Download this profile icon and paste it in your drawable folder. This step
is optional, but this icon used in the navigation drawer header part.
19. Create another xml layout named fragment_navigation_drawer.xml and add
the below code. This layout renders the complete navigation drawer view.
This layout contains a header section to display the user information and a
RecyclerView to display the list view.
fragment_navigation_drawer.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white">
<RelativeLayout
android:id="@+id/nav_header_container"
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_alignParentTop="true"
android:background="@color/colorPrimary">
<ImageView
android:layout_width="70dp"
51. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
android:layout_height="70dp"
android:src="@drawable/ic_profile"
android:scaleType="fitCenter"
android:layout_centerInParent="true" />
</RelativeLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/drawerList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/nav_header_container"
android:layout_marginTop="15dp" />
</RelativeLayout>
20. As the RecyclerView is customized, we need an adapter class to render
the custom xml layout. So under adapter package, create a class
named NavigationDrawerAdapter.java and paste the below code. This adapter
class inflates nav_drawer_row.xml and renders the RecycleView drawer menu.
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import java.util.Collections;
import java.util.List;
52. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
/**
* Created by Ravi Tamada on 12-03-2015.
*/
public class NavigationDrawerAdapter extends RecyclerView.Adapter<NavigationDrawerAdapter.M
List<NavDrawerItem> data = Collections.emptyList();
private LayoutInflater inflater;
private Context context;
public NavigationDrawerAdapter(Context context, List<NavDrawerItem> data) {
this.context = context;
inflater = LayoutInflater.from(context);
this.data = data;
}
public void delete(int position) {
data.remove(position);
notifyItemRemoved(position);
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = inflater.inflate(R.layout.nav_drawer_row, parent, false);
MyViewHolder holder = new MyViewHolder(view);
return holder;
}
@Override
public void onBindViewHolder(MyViewHolder holder, int position) {
NavDrawerItem current = data.get(position);
holder.title.setText(current.getTitle());
53. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
}
@Override
public int getItemCount() {
return data.size();
}
class MyViewHolder extends RecyclerView.ViewHolder {
TextView title;
public MyViewHolder(View itemView) {
super(itemView);
title = (TextView) itemView.findViewById(R.id.title);
}
}
}
21. Under activity package, create a fragment named FragmentDrawer.java. In
Android Studio, to create a new fragment, Right click on activity ⇒ New⇒
Fragment ⇒ Fragment (Blank) and give your fragment class name.
FragmentDrawer.java
/**
* Created by Ravi on 29/07/15.
*/
import android.content.Context;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
54. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
import android.support.v7.widget.Toolbar;
import android.view.GestureDetector;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;
import info.androidhive.materialdesign.R;
import info.androidhive.materialdesign.adapter.NavigationDrawerAdapter;
import info.androidhive.materialdesign.model.NavDrawerItem;
public class FragmentDrawer extends Fragment {
private static String TAG = FragmentDrawer.class.getSimpleName();
private RecyclerView recyclerView;
private ActionBarDrawerToggle mDrawerToggle;
private DrawerLayout mDrawerLayout;
private NavigationDrawerAdapter adapter;
private View containerView;
private static String[] titles = null;
private FragmentDrawerListener drawerListener;
public FragmentDrawer() {
}
55. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
public void setDrawerListener(FragmentDrawerListener listener) {
this.drawerListener = listener;
}
public static List<NavDrawerItem> getData() {
List<NavDrawerItem> data = new ArrayList<>();
// preparing navigation drawer items
for (int i = 0; i < titles.length; i++) {
NavDrawerItem navItem = new NavDrawerItem();
navItem.setTitle(titles[i]);
data.add(navItem);
}
return data;
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// drawer labels
titles = getActivity().getResources().getStringArray(R.array.nav_drawer_labels);
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflating view layout
View layout = inflater.inflate(R.layout.fragment_navigation_drawer, container, fa
56. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
recyclerView = (RecyclerView) layout.findViewById(R.id.drawerList);
adapter = new NavigationDrawerAdapter(getActivity(), getData());
recyclerView.setAdapter(adapter);
recyclerView.setLayoutManager(new LinearLayoutManager(getActivity()));
recyclerView.addOnItemTouchListener(new RecyclerTouchListener(getActivity(), recyc
@Override
public void onClick(View view, int position) {
drawerListener.onDrawerItemSelected(view, position);
mDrawerLayout.closeDrawer(containerView);
}
@Override
public void onLongClick(View view, int position) {
}
}));
return layout;
}
public void setUp(int fragmentId, DrawerLayout drawerLayout, final Toolbar toolbar) {
containerView = getActivity().findViewById(fragmentId);
mDrawerLayout = drawerLayout;
mDrawerToggle = new ActionBarDrawerToggle(getActivity(), drawerLayout, toolbar, R.
@Override
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
getActivity().invalidateOptionsMenu();
57. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
}
@Override
public void onDrawerClosed(View drawerView) {
super.onDrawerClosed(drawerView);
getActivity().invalidateOptionsMenu();
}
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
super.onDrawerSlide(drawerView, slideOffset);
toolbar.setAlpha(1 - slideOffset / 2);
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle);
mDrawerLayout.post(new Runnable() {
@Override
public void run() {
mDrawerToggle.syncState();
}
});
}
public static interface ClickListener {
public void onClick(View view, int position);
public void onLongClick(View view, int position);
}
58. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
static class RecyclerTouchListener implements RecyclerView.OnItemTouchListener {
private GestureDetector gestureDetector;
private ClickListener clickListener;
public RecyclerTouchListener(Context context, final RecyclerView recyclerView, fin
this.clickListener = clickListener;
gestureDetector = new GestureDetector(context, new GestureDetector.SimpleOnGes
@Override
public boolean onSingleTapUp(MotionEvent e) {
return true;
}
@Override
public void onLongPress(MotionEvent e) {
View child = recyclerView.findChildViewUnder(e.getX(), e.getY());
if (child != null && clickListener != null) {
clickListener.onLongClick(child, recyclerView.getChildPosition(ch
}
}
});
}
@Override
public boolean onInterceptTouchEvent(RecyclerView rv, MotionEvent e) {
View child = rv.findChildViewUnder(e.getX(), e.getY());
if (child != null && clickListener != null && gestureDetector.onTouchEvent(e))
clickListener.onClick(child, rv.getChildPosition(child));
59. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
}
return false;
}
@Override
public void onTouchEvent(RecyclerView rv, MotionEvent e) {
}
@Override
public void onRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {
}
}
public interface FragmentDrawerListener {
public void onDrawerItemSelected(View view, int position);
}
}
22. Finally open main activity layout (activity_main.xml) and modify the layout
as below. In this layout we are
adding android.support.v4.widget.DrawerLayout to display the navigation drawer
menu.
Also you have to give the correct path of your FragmentDrawer in
<fragment> element.
actiivty_main.xml
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
60. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:id="@+id/container_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<include
android:id="@+id/toolbar"
layout="@layout/toolbar" />
</LinearLayout>
<FrameLayout
android:id="@+id/container_body"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
61. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
<fragment
android:id="@+id/fragment_navigation_drawer"
android:name="info.androidhive.materialdesign.activity.FragmentDrawer"
android:layout_width="@dimen/nav_drawer_width"
android:layout_height="match_parent"
android:layout_gravity="start"
app:layout="@layout/fragment_navigation_drawer"
tools:layout="@layout/fragment_navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
Now we have all the layout files and java classes ready in place. Let’s do
the necessary changes in MainActivity to make the navigation drawer
functioning.
23. Open your MainActivity.java and do the below changes.
> Implement the activity from FragmentDrawer.FragmentDrawerListener and
add the onDrawerItemSelected() override method.
> Create an instance of FragmentDrawer and set the drawer selected
listeners.
MainActivity.java
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
public class MainActivity extends AppCompatActivity implements FragmentDrawer.FragmentDrawe
private Toolbar mToolbar;
private FragmentDrawer drawerFragment;
62. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
drawerFragment = (FragmentDrawer)
getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_dra
drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById
drawerFragment.setDrawerListener(this);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
63. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
@Override
public void onDrawerItemSelected(View view, int position) {
}
}
Now if you run the app, you can see the navigation drawer with a header
and few list items in it.
64. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
AQUI QUEDE
3.3 Implementing Navigation Drawer Item Selection
65. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Although navigation drawer is functioning, you can see the selection of
drawer list items not working. This is because we are yet to implement the
click listener on RecyclerView items.
As we have three menu items in navigation drawer
(Home, Friends & Messages), we need to create three separate fragment
classes for each menu item.
24. Under res layout, create an xml layout named fragment_home.xml and add
below code.
fragment_home.xml
<RelativeLayout 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="vertical"
tools:context="info.androidhive.materialdesign.activity.HomeFragment">
<TextView
android:id="@+id/label"
android:layout_alignParentTop="true"
android:layout_marginTop="100dp"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:textSize="45dp"
android:text="HOME"
android:textStyle="bold"/>
<TextView
android:layout_below="@id/label"
android:layout_centerInParent="true"
android:layout_width="fill_parent"
66. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
android:layout_height="wrap_content"
android:textSize="12dp"
android:layout_marginTop="10dp"
android:gravity="center_horizontal"
android:text="Edit fragment_home.xml to change the appearance" />
</RelativeLayout>
25. Under activity package, create a fragment class
named HomeFragment.java and add below code.
HomeFragment.java
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class HomeFragment extends Fragment {
public HomeFragment() {
// Required empty public constructor
}
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
67. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View rootView = inflater.inflate(R.layout.fragment_home, container, false);
// Inflate the layout for this fragment
return rootView;
}
@Override
public void onAttach(Activity activity) {
super.onAttach(activity);
}
@Override
public void onDetach() {
super.onDetach();
}
}
26. Create two more fragment classes
named FriendsFragment.java, MessagesFragment.java and respected layout files
named fragment_friends.xml and fragment_messages.xml and add the code from
above two steps.
27. Now open MainActivity.java and do the below changes. In the below code
> displayView() method displays the fragment view respected the navigation
menu item selection. This method should be called
in onDrawerItemSelected() to render the respected view when a navigation
menu item is selected.
MainActivity.java
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
68. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
public class MainActivity extends ActionBarActivity implements FragmentDrawer.FragmentDrawe
private static String TAG = MainActivity.class.getSimpleName();
private Toolbar mToolbar;
private FragmentDrawer drawerFragment;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
drawerFragment = (FragmentDrawer)
getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_dra
drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById
drawerFragment.setDrawerListener(this);
69. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
// display the first navigation drawer view on app launch
displayView(0);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
if(id == R.id.action_search){
Toast.makeText(getApplicationContext(), "Search action is selected!", Toast.L
return true;
}
70. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
return super.onOptionsItemSelected(item);
}
@Override
public void onDrawerItemSelected(View view, int position) {
displayView(position);
}
private void displayView(int position) {
Fragment fragment = null;
String title = getString(R.string.app_name);
switch (position) {
case 0:
fragment = new HomeFragment();
title = getString(R.string.title_home);
break;
case 1:
fragment = new FriendsFragment();
title = getString(R.string.title_friends);
break;
case 2:
fragment = new MessagesFragment();
title = getString(R.string.title_messages);
break;
default:
break;
}
if (fragment != null) {
FragmentManager fragmentManager = getSupportFragmentManager();
71. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
fragmentTransaction.replace(R.id.container_body, fragment);
fragmentTransaction.commit();
// set the toolbar title
getSupportActionBar().setTitle(title);
}
}
}
Now if you run the app, you can see the selection of navigation drawer
menu is working and respected view displayed below the toolbar.
72. CENTRO DE LA INDUSTRIA, LA EMPRESA Y LOS SERVICIOS
REGIONAL HUILA
DESARROLLO DE APLICACIONES MOVILES BAJO PLATAFORMA ANDROID
Ing. Julián Andrés Quimbayo Castro
Como actividad de Material Design, se debe implementar en un diseño propio con una idea que
tenga en mente.