Blog para desarrollo de aplicaciones en Android, aprende paso a paso como crear aplicaciones.

Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación para mostrarle publicidad personalizada y realizar análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. OK Más información | Y más

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.
Android ImageView Kotlin Example Tutorial

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.
Android Studio - ImageView Kotlin

Diferentes atributos del widget Android ImageView

Algunos de los atributos populares de imageView son:
No.Atributos XMLDescripción
1android:adjustViewBoundsUtilice este atributo para ajustar automáticamente los límites de imageView para mantener la relación de aspecto de su dibujo.
2android:baselineSe usa para establecer el desplazamiento de la línea base dentro de esta vista.
3android:baselineAlignBottomSe usa para establecer la línea de base alineada con su borde inferior.
4android:cropToPaddingSe usa para recortar la imagen y adaptarla a su relleno.
5android:maxHeightSe usa la altura máxima de la vista.
6android:maxWidthSe utiliza el ancho máximo de la vista.
7android:scaleTypeSe usa para definir la forma en que se redimensionará o moverá la imagen para que coincida con el tamaño de la imagen.
8android:srcSe usa para establecer un drawable de imageView.
9android:tintSe usa para teñir el color de la imagen.
10android:tintModeSe 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 XMLDescripción
1android:alphaSe usa para establecer alfa de la vista.
2android:autofillHintsSe usa para configurar los datos que se mostrarán para completar automáticamente la vista.
3android:backgroundSe usa para establecer el fondo de la vista.
4android:backgroundTintSe usa para configurar el tinte para aplicarlo al fondo.
5android:backgroundTintModeSe usa para establecer el modo de fusión utilizado para aplicar el tinte de fondo.
6android:clickableSe usa para establecer si se puede hacer clic en esta vista o no.
7android:elevationSe usa para configurar la elevación de la vista.
8android:fitsSystemWindowsSe usa para ajustar el diseño de la vista en función de las ventanas del sistema.
9android:focusableControla si esta vista puede enfocar.
10android:idSe usa para establecer una identificación única para la vista.
11android:onClickSe usa para definir qué hacer cuando se hace clic en esta vista.
12android:paddingSe usa para configurar el relleno en la vista.
13android:tagSe usa para establecer la etiqueta en la vista.
14android:tooltipTextSe usa para configurar el texto de información sobre herramientas cuando se muestra sobre la vista.
15android:visibilitySe 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>
Android Studio - ImageView Kotlin

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.
Android Studio - ImageView Kotlin

Android Studio - ImageView 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

No hay comentarios:

Publicar un comentario

x

Registrate!

Curso Android Español

Curso Kotlin Español

eBook Free Android Studio

Noticias y Eventos

¡Directamente a tu INBOX!

Le enviaremos nuestros recursos gratis. Para obtener nuestro contenido nuevo, únase a nuestra comunidad. No te molestaremos enviando información inútil. ¡No te pierdas ninguna actualización, mantente conectado! Recuerda verificar tu correo electronico.

Ingrese su dirección de correo electrónico:

Entregado por FeedBurner