Integración de Librerías Externas en Proyectos Android

Curso Básico de Diseño de Interfaces con Android Studio

Contenido del curso

Introduccion

1
Creación de Interfaces de Usuario en Android con XML
03:39 min

Revisando los archivos para una UI

Creando una UI

Widgets y Vistas

Layouts base

Estilos y temas

Extendiendo los widgets

Cierre

20
Estilos y Atributos en XML: Curso Completo
00:37 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:09

Integración de Librerías Externas en Proyectos Android

Curso Básico de Diseño de Interfaces con Android Studio

Clase 18 de 20

Clase 18 / 20

Recursos

Cuando los componentes nativos de Android no son suficientes para lograr el diseño que necesitas, las librerías externas se convierten en tu mejor aliado. Integrar elementos como una imagen circular es más sencillo de lo que parece, y conocer este proceso te abre las puertas a miles de recursos disponibles en la comunidad.

¿Por qué usar librerías externas en tu proyecto Android?

Los elementos que Android incluye por defecto cubren muchas necesidades, pero hay situaciones donde se requiere un diseño específico o un comportamiento que no existe de forma nativa. Por ejemplo, las imágenes en Android son cuadradas por defecto. Si necesitas una imagen circular, como una foto de perfil, puedes recurrir a librerías creadas por la comunidad que resuelven exactamente ese problema [0:36].

Una de estas librerías es Circle Image View (CircleImageView), que toma una imagen y la recorta automáticamente en forma de círculo. La mayoría de estos proyectos de código abierto incluyen instrucciones claras de integración directamente en sus repositorios.

¿Cómo se agrega una dependencia al archivo Gradle?

El proceso de integración sigue estos pasos [1:12]:

Abre la sección Gradle Scripts dentro de la vista de proyecto en Android Studio.
Busca el archivo correspondiente a Module App.
Agrega la línea de la nueva dependencia dentro del bloque correspondiente.
Android Studio detectará el cambio y mostrará una alerta azul para sincronizar el proyecto.
Al presionar Sync Now, el entorno descarga toda la librería y la incorpora al proyecto.

Sabrás que la sincronización terminó cuando la barra inferior de carga desaparezca por completo [1:52].

¿Cómo se usa la librería en el layout XML?

Una vez descargada la librería, puedes utilizar su tag personalizado directamente en tu archivo de diseño. Al agregar la vista de imagen circular dentro de un Constraint Layout, es necesario definir sus restricciones de alineación [2:25]:

Alineación horizontal: el start se conecta con el start del parent y el end con el end del parent.
Alineación vertical: el top se conecta con el top del parent y el bottom con el bottom del parent.

Un detalle importante: a diferencia de Relative Layout, el Constraint Layout no estira las vistas automáticamente. Si buscas un efecto donde un botón se expanda para ocupar todo el ancho, tendrás que configurarlo de manera explícita [2:53].

¿Cómo referenciar imágenes en las carpetas de recursos?

Para que la imagen circular funcione correctamente, necesitas tener tu imagen almacenada en las carpetas de drawables del proyecto. Estas carpetas contienen diferentes dimensiones para adaptarse a distintas densidades de pantalla [3:10]. Una vez que la imagen está en los drawables, puedes referenciarla directamente desde el atributo src del nuevo componente.

Si al agregar la librería no ves los cambios reflejados en el preview, no te preocupes. Es algo muy común en Android Studio. El entorno necesita realizar una compilación previa de la librería para mostrar los cambios en tiempo de desarrollo. Sin embargo, al ejecutar el proyecto en un dispositivo real o emulador, los cambios aparecerán correctamente [3:30].

¿Qué más puedes integrar con librerías externas?

El nuevo tag que incorporas con una librería se puede reutilizar en cualquier parte de la aplicación, ya que forma parte del proyecto a través de las dependencias [4:00]. Las posibilidades son amplias:

Elementos con textos dinámicos o animaciones.
Efectos visuales sobre imágenes.
Componentes que enriquecen la interacción con el texto.

Existe una cantidad enorme de elementos creados por la comunidad y distribuidos a través de GitHub. Incluso Google ofrece widgets y librerías adicionales que puedes incorporar fácilmente. Explora repositorios, revisa la documentación y anímate a probar nuevos componentes en tu próximo proyecto.

Comentarios (17)17 comentarios

Luis Lira

Hace 7 años

Les dejo el link al repo de Circle View Image

Pedro Alejandro Rodríguez García

Hace 6 años

Gracias :D

Valeria Calcina Cisneros

Me pareció muy interesante el tema de los widgets, aquí les dejare un link donde explican como crear un widget desde la app : https://developer.android.com/guide/topics/appwidgets?hl=es-419

Joshua Daniel Rios Cervantes

graciassss

Christian Gómez

Agregaremos una Librería que nos permitirá colocar una foto de forma circular, para esto copiamos la siguiente librería:

implementation 'de.hdodenhof:circleimageview:3.1.0' Enlace del Github

La pegamos en los archivos de Gradle > build.gradle(Module:app) y la pegaremos dentro de dependencies; posteriormente Android pedirá que se sincronice el proyecto (Barra azul superior) [Lo que hace android es descargar toda la librería] ***Luego regresaremos a Usage y copiaremos el código y lo pegaremos en el activity.

ConstraitLayout a diferencia de RelativeLayout no va a estirar las vistas

Ricardo Celis

Profesor

https://github.com/sierisimo/Android-Interfaces-PlatziMusic/tree/08-elementos-externos

Adrian Castillo

Buenas tardes!! en el video menciona que con ConstraintLayout no es posible estirar elementos, pero he visto que si es posible añadiendo 0dp en width y utilizando constraintStart y constraintEnd, y 0dp en height y usando constraintTop y Bottom..

Saludos!!

Jhonntan Andres Castaño Rojas

Hace 3 años

para que no falle coloquenlo asi




implementation("de.hdodenhof:circleimageview:3.1.0")

Gregson Murcia Castro

implementation 'de.hdodenhof:circleimageview:3.1.0'

Magali Anabel Medina

No me coloca la imagen en circulo, a alguien mas le paso? asi es como se ve: https://drive.google.com/file/d/18P1j8HLGMtfRwdCQV0zw4TTFAb81JgFD/view?usp=sharing

Didier Emmanuel Matos Torres

Viendo la imágen parece estar todo bien, pero como comento el profesor, a veces Android Studio no alcanza a demostrar en tiempo de desarrollo los cambios, intenta compilar la aplicación en tu smartphone y ver si se refleja allá.

Correcto solo hice una build y ya se acomodaron

Pedro Matias Soria

Hace 4 años

¿Alguna pagina que esté llena de librerias y ordenas para poder chusmear?

Braulio Hernandez

Hace 5 años

¡Widgets externos!

Lo unico que necesitamos es incluir las librerias correspondientes en nuestro

build.gradle (Module: app)

tal cual la fuente nos lo indica, es un copiar y pegar.

Si en el preview no se ve reflejado la librería, no te preocupes. Es común que Android Studio no construya el proyecto al momento, cuando se corra el dispositivo en el proyecto se verá reflejado el cambio, es normal.

Si no se compila correctamente la librería puede que no se reflejen los cambios.

Los lugares más comunes para encontrar los widgets son en GitHub y Google

Christopher Joel Delvicier Palacios

https://github.com/hdodenhof/CircleimageView

Rodolfo Morales Moreno

En Android Arsenal se encuentra muy buen contenido. https://android-arsenal.com/

samy fabian villanueva gutierrez

En el minuto 4:02 quita el xmlns:app y no explica q hace con el

Juan Manuel Cabanillas Lopez

si te das cuenta en clases pasadas cuando aparecía ese color medio amarillento de fondo en una linea (en este caso en el xmlns:app), significa que el contrainlayout no lo necesita, o no es necesario para el código, pero lo que si es necesario son los alineamientos del constrainlayout

Maximiliano Choque Martinez

si pones el mouse encima te dice que es redundante y si haces Alt + Enter te da la opcion de eliminarlo, es decir no es necesario por eso lo elimina.

Enrique Rabell Talamantes

Elementos externos Esto es como importar en progrmacion, nos ayudara a usar cosas que ya se han hecho, ahorrandonos la necesidad de tener que idear y crear algo que y se ha hecho , esto es innecesario. Para esto el creador casi siempre nos dará instrucciones de como usarlo, por lo general hay que añadir la librería a gradle y ya podremos usarlo.

Brian Chuquiruna

¿como hago que la imagen que yo agrego este disponible para todas las densidades de pantalla? osea para hdpi,mdpi,xhdpi,xxhdpi,xxxhdpi

FABRIZIO VITORINO MONJARAS

Solo copia la imagen a esas carpetas que el profesor muestra , y cambiale el nombre a tu imagen puedes usar de referencia el nombre que el profe tiene "me_profile" y ya por automatico va a estar disponible en el A.S.

Lautaro Cabral

JAJA que divertida la foto que nos dejó Link para que descarguen me_profile.png

Excelente clase, sigamos

Introduccion

Creación de Interfaces de Usuario en Android con XML

Revisando los archivos para una UI

Instalación de Android Studio para Desarrollo de Apps

Creación y gestión de proyectos en Android Studio

Creando una UI

Diseño de Interfaces en Android Studio: Herramientas y Técnicas

Gestión de Vistas y Recursos en Android Studio

Widgets y Vistas

Vistas y ViewGroups en Android: Diferencias y Uso Práctico

Atributos de Layout en Android: Width y Height

Atributos de Diseño y Referencias en Android Studio

Layouts base

Alineación de elementos con LinearLayout en Android

Diseño de Interfaces con RelativeLayout en Android

Diseño de Interfaces con Layout Relativo en Android

Uso de FrameLayout para Organizar Elementos en Android

Diseño de Interfaces con FrameLayout en Android Studio

Diseño de Interfaces con ConstraintLayout en Android Studio

Estilos y temas

Estilos en Android: Creación y Aplicación en Elementos de UI

Temas y Estilos en Android: Personalización Global de la App

Gestión de Dimensiones y Estilos en Android XML

Extendiendo los widgets

Integración de Librerías Externas en Proyectos Android

Reutilización de Layouts en Android: Incluyendo y Merging Elementos

Cierre

Estilos y Atributos en XML: Curso Completo

Integración de Librerías Externas en Proyectos Android

Progreso del curso

Introduccion

Revisando los archivos para una UI

Creando una UI

Widgets y Vistas

Layouts base

Estilos y temas

Extendiendo los widgets

Cierre

Recursos

Recursos