Readme.md

Kotlin Intermedio > Sesión 01 > Ejemplo 7

Ejemplo 7: Imágenes mediante URL

1. Objetivos 🎯

• Instalar dependencias mediante gradle/
• extender ImageView para recuperar imágenes por medio de una URL.

2. Requisitos 📋

1. Android Studio Instalado en nuestra computadora.
2. Coil instalado en el proyecto.
3. Seguir la instrucción específica para esta sesión.

3. Desarrollo 💻

Para que un ImageView pueda cargar una imagen remota a través de una URL, tenemos qué instalar alguna dependencia (o descargarla con un cliente y asignarla, pero eso es mucho más complicado). Las opciones más populares son:

• Fresco
• Picasso
• Glide

Mientras que todos los anteriores tienen una amplia comunidad, nos enfocaremos en una cuarta opción: coil ( COroutine Image Loader), que como dice su nombre, utiliza las populares coroutines de Kotlin.

1. Insertamos la implementación de la dependencia en el archivo app/buid.grade la siguiente línea:

dependencies{
	implementation"io.coil-kt:coil:0.11.0"
}

nótese que esta línea va dentro del bloque dependencies, aquí es donde se declara la implementación de dependencias de la app. Cada dependencia se vaja de un repositorio; en este caso, coil se encuentra alojado en Maven Central_, pero también en el Jcenter Maven Repository de Bintray y podemos ver que ese repositorio se incluye en nuestro proyecto entrando en el archivo build.gradle en la carpeta raíz.

buildscript {
    ext.kotlin_version = '1.3.71'
    repositories {
        google()
        jcenter() // de aquí se obtiene nuestra librería
        
    }
    ...
    }

2. En app/build.gradle/, agregaremos compatibilidad con Java 8:

android{
...
	compileOptions {
		sourceCompatibility JavaVersion.VERSION_1_8
		targetCompatibility JavaVersion.VERSION_1_8
	    }
}

...

tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).all {
    kotlinOptions {
        jvmTarget = "1.8"
    }
}

3. Con todos los cambios hechos en gradle, sincronizamos nuestro proyecto. Cada vez que se modifican los archivos gradle, emerge esta barra superior:

Podemos dar click en Sync now en la parte derecha de esa barra, o sincronizamos mediante la herramienta (dicha opción es un elefante con una flecha azul).

4. Requeriremos permisos de internet, por lo que entramos al manifest en app/src/main/AndroidManifest.xml e insertamos el permiso:

...

5. Agregamos el código de setup inicial de la sesión

6. Dentro del LinearLayout, insertar el siguiente ImageView:

<ImageView
        android:id="@+id/imageView"
        android:layout_width="130dp"
        android:layout_height="130dp"
/>

7. Por último, agregamos la variable para el ImageView.

private lateinit var imageView: ImageView

asignamos valor a un campo:

imageView = findViewById(R.id.imageView)

y utilizamos la función load (es un método que extiende de ImageView) para cargar imágenes desde URLS etc.

imageView.load("https://raw.githubusercontent.com/beduExpert/Kotlin-Intermedio-2020/master/images/android-kotlin.png")

Corremos el código y comprobamos!

Siguiente