Como crear un ImageView en Android utilizando Kotlin

Android ImageView Kotlin Example

Hola amigos continuamos y en esta ocasión les traigo esta aplicación para aprender a utilizar el control Widget ImageView con programación Kotlin este nuevo lenguaje. Les mostrare varios ejemplos para comprender un poco mas a fondo el ejemplo.

Crear proyecto Android ImageView Kotlin Example (Aquí)

Crearemos un proyecto en Android con soporte a Kotlin para desarrollar este ejemplo de utilizar nuestro ImageView utilizando programación Kotlin.

Diferentes atributos del widget Android ImageView

Algunos de los atributos populares de imageView son:

No.	Atributos XML	Descripción
1	android:adjustViewBounds	Utilice este atributo para ajustar automáticamente los límites de imageView para mantener la relación de aspecto de su dibujo.
2	android:baseline	Se usa para establecer el desplazamiento de la línea base dentro de esta vista.
3	android:baselineAlignBottom	Se usa para establecer la línea de base alineada con su borde inferior.
4	android:cropToPadding	Se usa para recortar la imagen y adaptarla a su relleno.
5	android:maxHeight	Se usa la altura máxima de la vista.
6	android:maxWidth	Se utiliza el ancho máximo de la vista.
7	android:scaleType	Se usa para definir la forma en que se redimensionará o moverá la imagen para que coincida con el tamaño de la imagen.
8	android:src	Se usa para establecer un drawable de imageView.
9	android:tint	Se usa para teñir el color de la imagen.
10	android:tintMode	Se usa para configurar el modo de fusión utilizado para aplicar el tinte de la imagen.

Algunos de los atributos populares de ImageButton heredados de View son:

No.	Atributos XML	Descripción
1	android:alpha	Se usa para establecer alfa de la vista.
2	android:autofillHints	Se usa para configurar los datos que se mostrarán para completar automáticamente la vista.
3	android:background	Se usa para establecer el fondo de la vista.
4	android:backgroundTint	Se usa para configurar el tinte para aplicarlo al fondo.
5	android:backgroundTintMode	Se usa para establecer el modo de fusión utilizado para aplicar el tinte de fondo.
6	android:clickable	Se usa para establecer si se puede hacer clic en esta vista o no.
7	android:elevation	Se usa para configurar la elevación de la vista.
8	android:fitsSystemWindows	Se usa para ajustar el diseño de la vista en función de las ventanas del sistema.
9	android:focusable	Controla si esta vista puede enfocar.
10	android:id	Se usa para establecer una identificación única para la vista.
11	android:onClick	Se usa para definir qué hacer cuando se hace clic en esta vista.
12	android:padding	Se usa para configurar el relleno en la vista.
13	android:tag	Se usa para establecer la etiqueta en la vista.
14	android:tooltipText	Se usa para configurar el texto de información sobre herramientas cuando se muestra sobre la vista.
15	android:visibility	Se usa para establecer la visibilidad de la vista.

Crear diseño ImageView Kotlin Example

Ahora crearemos el diseño de nuestra aplicación de la siguiente forma.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android">

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:text="Cambiar Imagen"/>

<ImageView
android:id="@+id/imageView"
android:layout_width="80dp"
android:layout_height="80dp"
android:contentDescription="Control ImageView"/>
<!--Dinamico-->
<LinearLayout
android:id="@+id/rootContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">

<Button
android:id="@+id/btnDinamico"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp"
android:layout_marginTop="20dp"
android:text="Cambiar Imagen"/>
</LinearLayout>

</LinearLayout>

Código MaintActivity ImageView Kotlin Example

Ahora para terminar vamos a escribir el código de nuestra aplicación y crearemos un control dinamico y añadiremos el evento setOnClickListener del imageView.

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.widget.Button
import android.widget.ImageView
import android.widget.LinearLayout

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
//Obtener referenciasl del control ImageView
val imageView = findViewById<ImageView>(R.id.imageView)

val imgResId = R.drawable.ic_launcher_background
var resId = imgResId
imageView.setImageResource(imgResId)

val button = findViewById<Button>(R.id.button)
button?.setOnClickListener {
resId = if (resId == R.drawable.ic_launcher_background) R.mipmap.ic_launcher else R.drawable.ic_launcher_background
imageView.setImageResource(resId)
}
// Dinamicamente
val imgDinamico = ImageView(this)
imgDinamico.layoutParams = LinearLayout.LayoutParams(160, 160) // value is in pixels
val imgResIdDinamic = R.drawable.ic_launcher_background
var resIdDinamic = imgResIdDinamic
imgDinamico.setImageResource(imgResIdDinamic)

val btnDinamico = findViewById<Button>(R.id.btnDinamico)
btnDinamico?.setOnClickListener {
resIdDinamic = if (resIdDinamic == R.drawable.ic_launcher_background) R.mipmap.ic_launcher else R.drawable.ic_launcher_background
imgDinamico.setImageResource(resIdDinamic)

}

val linearLayout = findViewById<LinearLayout>(R.id.rootContainer)
// Añadir ImageView a LinearLayout de forma dinamica
linearLayout?.addView(imgDinamico)
}
}

Y para terminar.

Crear Emulador AVD ImageView Kotlin Example

Crearemos nuestro emulador para ejecutar nuestra aplicación y ver nuestro ImageView con programación Kotlin.

Espero el contenido haya sido de tu agrado cualquier duda déjanos tu comentario. Recuerda ver nuestro curso completo de Android Studio y aprende mas sobre la creación de aplicaciones.

Curso Kotlin Español