Loading...

Añadiendo RecyclerView en un Fragment

Course video 39 of 60

En este módulo profundizaremos en los Fragments para entender por qué existen. A través de ejemplos prácticos, descubrirás la importancia de tenerlos presentes en nuestras aplicaciones.

Desarrollo de aplicaciones con Android

Universidad Nacional Autónoma de México

Curso 3 de 5 en Desarrollo de aplicaciones móviles con Android Programa Especializado

Este curso te permitirá construir tu primer aplicación móvil profesional. Serás capaz de crear y controlar la vida de tus Activities y aprovechar el espacio en pantalla de los diferentes dispositivos Android implementando Fragments en tus aplicaciones. Dale persistencia a tu información utilizando todas las formas de almacenamiento que hay en Android desde un único archivo hasta una Base de Datos. Podrás evaluar lo aprendido por medio de ejercicios prácticos que te permitirán ir desarrollando tu aplicación.

Destrezas que aprenderás

Android Studio, Database (DBMS), Android Software Development, Material Design

Impartido por:

Anahi Salgado
Anahi Salgado. Android Certified Application Developer, programadora, capacitadora y conferencista.

Transcripción

Entonces, una vez que you hemos agregado nuestros dos fragments,

you hemos agregado nuestro elemento ViewPager, pues ahora vamos

a añadir en nuestro primer fragment toda la funcionalidad de nuestro RecyclerView.

Recuerdas que nuestro RecyclerView lo pasamos a nuestro fragment_recyclerview,

que es el primer fragment que estamos mostrando y que en este momento se está

mostrando vacío.

Entonces, vamos a rellenar esto y lo que teníamos en nuestro Main Activity,

recuerdas por aquí

que teníamos toda esta funcionalidad del llenado del RecyclerView.

Entonces, ahora, esta funcionalidad lo que haré será llevármela a mi fragment.

Entonces voy a cortarla, voy a llevármela de aquí.

Vamos a cortarla.

Okey.

Y vamos, iremos al que, al archivo que controla este layout.

Fragment_recyclerview, aquí está,

RecylerViewFragment y en nuestro método, onCreateView,

aquí en nuestro método onCreateView, vamos a declarar,

vamos a poner aquí todo lo que tiene que ver con nuestro RecyclerView.

Okey, entonces lo vamos a poner ahí y entonces también

vamos a llevarnos por acá esto que tenemos acá.

Okey, tanto el ArrayList de contactos como la declaración del view,

del RecyclerView, ¿okey?

Entonces sí, importamos todo esto.

Muy bien.

Y entonces aquí tenemos que hacer algunos ajustes.

Este FindViewById, en este momento you no me va a funcionar por sí mismo,

entonces voy a utilizar el view.

Recuerda que este view ahora, este view es este layout,

entonces donde realmente estamos buscando el RecyclerView es en,

precisamente, en este view, fragment_recyclerview.

Ahí sí lo vamos a encontrar.

Luego tenemos esto, simplemente tenemos que importarlo con un alt enter.

Aquí debemos colocar,

debemos colocar el contexto.

[AUDIO EN

BLANCO] Y en el contexto vamos a colocar getActivity.

¿Okey?

GetActivity.

Luego tenemos nuestros dos métodos,

estos dos métodos los teníamos en nuestro archivo Main Activity, nos los llevaremos,

los quitaremos de aquí y los pondremos en nuestro RecyclerViewFragment, ahí.

Listo, aquí están you nuestros dos métodos en el ContactoAdaptador,

aquí me está diciendo aquí también, vamos a ponerle getActivity.

Listo. [AUDIO

EN BLANCO]

Listo.

Vamos a correr esto.

Vamos a ver cómo funciona, cómo se ve.

La idea es que ahora,

pues you debemos ver en nuestra primera página nuestro RecyclerView.

Okey, entonces lo único que hicimos fue pasar

toda la funcionalidad que you teníamos de Main Activity,

donde teníamos ahí nuestro RecyclerView lo pasamos a nuestro fragment.

Y como observas, pues you tenemos aquí nuestro fragment, hacemos un slide

y tenemos nuestro segundo fragment, que en este fragment vamos a estar trabajando

un perfil de usuario, vamos a estar trabajando en lo que tú quieras, okey,

que eso es parte de la tarea que te va a tocar a ti hacer.

Entonces aquí está, como observas, aquí está el efecto que hemos producido.

Ajá, tenemos nuestros dos tabs.

Vamos a colocarles un pequeño ícono a nuestros tabs.

Y para ello, entonces vamos a, vamos a traer,

iremos al sitio iconarchive,

Icon8, Android icons.

Y ahí vamos a buscar, pues primeramente, una estrella, ¿okey?

Una estrella donde vamos a estar mostrando pues todos nuestros contactos.

Vamos a buscar uno de person.

Okey, person donde, pues realmente lo que tenemos ahí es una lista de contactos.

Okey, person, ¿cuál nos gustaría?

Vamos a traer este, por ejemplo, este person.

Okey, vamos a seleccionar uno blanco y lo vamos a descargar.

Listo.

Lo descargamos, dice In Love.

Okey. Vamos a mostrarlo en el Finder.

[AUDIO EN BLANCO] Okey,

entonces aquí lo tengo, In Love.

[AUDIO EN BLANCO] Vamos

a editarlo un poco y vamos a traerlo a nuestro proyecto, ¿okey?

Entonces, vamos a utilizar por aquí la opción New,

Image Asset y vamos a seleccionar, lo vamos a buscar.

Aquí lo tengo, love.

Aquí está nuestro amiguito,

vamos a decirle Action Bar and Tab Icons,

para que nos cree un ícono, el ícono adecuado.

Y viene el nombre del ícono,

vamos a decirle contacts, contacts.

Perfecto.

Vamos a darle Next y por aquí you nos va a hacer la, nos lo va a importar.

Okey, vamos a dar Finish.

Perfecto.

Aquí sale, dice ahí contacts.

Perfecto. Entonces, la forma donde vamos a estar

colocando esto, vamos a ir a nuestro Main Activity, you tenemos el primer iconito.

Y precisamente en el método SetUpViewPager,

ahí vamos a colocar en el tabLayout.getTabAt

y puedo decirle que en el primer tab, en el tab que tenga el índice 0,

le coloque el ícono R.drawable.ic_contacts,

y entonces vamos a seleccionar otro ícono para que sea nuestro perfil, ¿okey?

Que sea nuestra imagen de perfil.

Entonces que nos muestre, bueno, podríamos utilizar este, por ejemplo.

Este, you está aquí.

Okey.

Y aquí está you nuestra imagen, es este.

Vamos a cambiarle nada más el nombre, circled user,

circled_user.

Lo traemos como lo hicimos con el anterior

y seleccionamos aquí la imagen.

Le decimos que sea una imagen que va a ser para tabs,

para tabs y le damos a Finish.

Perfecto, you nos lo ha traído y entonces en el siguiente TabLayout.getTabAt,

vamos a poner 1.setIcon,

R.drawable.

Creo que lo sobre-escribimos.

Se llama action name, okey.

Action_name.

Okey, vamos a ver cómo se ve.

Sí, es el de action_name.

Bueno, podemos colocarle el nombre que querramos.

Bien, vamos a correrlo y lo que ahora debemos ver es pues,

debemos ver nuestras imágenes en cada tab.

¿Okey?

Vamos a esperar a que corra el proyecto, you está a punto de correr.

Vamos a, y listo.

Entonces, en un tab tenemos nuestra

carita con ojos de corazón, y en el segundo tab tenemos el otro fragment.

Okey, puedes variar los íconos.

A lo mejor podríamos hacer que no fueran tan parecidos para que no,

para evitar confusiones, pero así es como podemos estar manejando fragments.

Entonces, esto funciona perfectamente.

Podemos dar like a Pedro, podemos ir al detalle de Pedro, ¿okey?

Podemos regresar y bueno,

you tenemos, así es como manejamos los fragments en

nuestros proyectos y así es como podemos integrarlos también en un ViewPager.

Acerca de Coursera

Cursos, programas especializados y títulos en línea impartidos por los principales instructores de las mejores universidades e instituciones educativas del mundo.

Join a community of 40 million learners from around the world

Earn a skill-based course certificate to apply your knowledge

Gain confidence in your skills and further your career

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2019 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play