11/02/2020 Android ImageView Using Kotlin With Example - Tutorialwing

Tutorialwing Courses Contribute Contact Us Articles

Coronavirus Outbreak - 2020, 100+ dead in China, effected several countries, Checkout WHO Advices
to stay safe

Android ImageView Using SEARCH

Kotlin With Example
Type and Hit Ent   Search

Like 0 Tweet

<< Prev Post Next Post >>

CATEGORIES

o Android (Kotlin Or
Greetings! Java)

We have recently published 100+ articles on android tutorials o C Tutorial

with kotlin and java. If you need, you may visit
o Kotlin Tutorial
Android Tutorial for beginners page. You can also check
o Computer Networks
Kotlin Tutorial for beginners . Also, if you are interested in
o Database
content writing, you can mail us at [email protected].
o Operating System

Hello Readers! In this post, we are going to learn about

android imageView using kotlin in any android application.
We will also learn about different attributes of android
imageView that can be used to customise this widget.

Output

https://tutorialwing.com/android-imageview-using-kotlin-example/ 1/13
11/02/2020 Android ImageView Using Kotlin With Example - Tutorialwing

x
Tutorialwing Courses Contribute Contact Us Articles

POSTS YOU MAY LIKE

o Probability
Formulas, Examples
With Solutions

o Pie Chart Questions

Tutorialwing Kotlin ImageView
And Answers With
Output
Examples

Getting Started o IP Header Protocol

Structure With
Android imageView can be defined as below – Example

o Volume Of Solids

ImageView is subclass of view that displays image. It (Cube, Cuboid,

Prism, etc.) With
is also used to handle image tinting and scaling
Example

o Using Android
Retrofit Library With
Different Attributes of Android
RecyclerView in
ImageView Widget Kotlin

Some of the popular attributes of imageView are –

Sr. XML Attributes Description

1 android:adjustViewBounds Use this attribute


to auto adjust

https://tutorialwing.com/android-imageview-using-kotlin-example/ 2/13
11/02/2020 Android ImageView Using Kotlin With Example - Tutorialwing

imageView’s x
Tutorialwing Courses Contribute
boundaries to
Contact Us Articles

maintain the
aspect ratio of it’s
x
drawable

2 android:baseline It is used to set

the offset of the
baseline within
this view.

3 android:baselineAlignBottom It is used to set

the baseline
aligned with it’s
bottom edge.

4 android:cropToPadding It is used to crop

the image to fit
within it’s padding

5 android:maxHeight It is used
maximum height
of the view.

6 android:maxWidth It is used
maximum width of
the view.

7 android:scaleType It is used to
define the way
image will be
resized or moved
to match the size
of the imageView

8 android:src It is used to set a

drawable of the
imageView 

https://tutorialwing.com/android-imageview-using-kotlin-example/ 3/13
11/02/2020 Android ImageView Using Kotlin With Example - Tutorialwing

9 android:tint It is used to tint x

Tutorialwing Courses Contribute Contact Us
the color of the
Articles

image.
x
10 android:tintMode It is used to set
blending mode
used to apply the
image tint

Some of the popular attributes of ImageButton inherited from

View are –

Sr. XML Attributes Description

1 android:alpha It is used to set

alpha of the view

2 android:autofillHints It is used to set

the data to be
shown to auto fill
in the view

3 android:background It is used to set

background of the
view

4 android:backgroundTint It is used to set

tint to apply to
the background

5 android:backgroundTintMode It is used to set

blending mode
used to apply the
background tint

6 android:clickable It is used to set

whether this view
is clickable or not 

https://tutorialwing.com/android-imageview-using-kotlin-example/ 4/13
11/02/2020 Android ImageView Using Kotlin With Example - Tutorialwing

7 android:elevation It is used to set x

Tutorialwing Courses Contribute Contact Us
elevation to the
Articles

view
x
8 android:fitsSystemWindows It is used to
adjust view layout
based on system
windows

9 android:focusable Controls whether

this view can take
focus

10 android:id It is used to set

unique id to the
view

11 android:onClick It is used to
define what to do
when this view is
clicked

12 android:padding It is used to set

padding to the
view

13 android:tag It is used to set

tag to the view

14 android:tooltipText It is used to set

tooltip text to be
shown when
hovered on the
view

15 android:visibility It is used to set

visibility of the
view


https://tutorialwing.com/android-imageview-using-kotlin-example/ 5/13
11/02/2020 Android ImageView Using Kotlin With Example - Tutorialwing

x
Tutorialwing Courses Contribute Contact Us Articles

x
Example of Android ImageView Using
Kotlin
At first, we will create android application. Then, we will use
imageView using kotlin in the application.

1. Creating New Project in Kotlin

Follow steps below to create new project. Please ignore the
steps if you have already created the project.

Step Description

1. Open Android Studio.

2. Go to File => New => New Project. Write

application name as ImageView. Then, check
Include Kotlin Support and click next button.

3. Select minimum SDK you need. However, we

have selected 17 as minimum SDK. Then, click
next button

4. Then, select Empty Activity => click next =>

click finish.

5. You will get a newly created project successfully

if you have followed steps properly.

Since we have a project now, we will modify xml and other

files to use imageView using kotlin in the application.

2. Modify values folder

Open res/values/strings.xml file. Then, add below code into
it.


https://tutorialwing.com/android-imageview-using-kotlin-example/ 6/13
11/02/2020 Android ImageView Using Kotlin With Example - Tutorialwing

<resources> x
Tutorialwing Courses Contribute Contact Us
    <string name="app_name">ImageView</string> Articles
    <string name="this_is_imageview">This is i
    <string name="change_image">Change Image</
x
</resources>

3. Use ImageView Widget in xml file

Open src/main/res/layout/activity_main.xml file and add
below code into it.

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="<a class="vglnk" href="http
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
 
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="20dp"
        android:text="@string/change_image"/>
 
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:contentDescription="@string/th
 
</LinearLayout>

In activity_main.xml file, we have defined imageView widget.

Now, we will access this imageView using kotlin file in the
application.

4. Access ImageView Widget in Kotlin file



https://tutorialwing.com/android-imageview-using-kotlin-example/ 7/13
11/02/2020 Android ImageView Using Kotlin With Example - Tutorialwing

Open x
Tutorialwing Courses Contribute Contact Us
src/main/java/com.tutorialwing.imageview/MainActivity.kt
Articles

file and add below code into it.

x
package com.tutorialwing.imageview
 
import android.os.Bundle
import android.support.v7.app.AppCompatActivit
import android.widget.Button
import android.widget.ImageView
 
class MainActivity : AppCompatActivity() {
 
    override fun onCreate(savedInstanceState:
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
 
        val imageView = findViewById<ImageView
 
        val imgResId = R.drawable.ic_launcher_
        var resId = imgResId
        imageView.setImageResource(imgResId)
 
        val button = findViewById<Button>(R.id
        button?.setOnClickListener {
            resId = if (resId == R.drawable.ic
            imageView.setImageResource(resId)
        }
    }
}

We have accessed imageView using kotlin file (i.e.

MainActivity.kt file) in the application. Then, we have set an
image resource in it. After that, we have set a click listener
on button that will change the button in the imageView
whenever it is clicked. Similarly, you can perform any
operation in imageView.

Since AndroidManifest.xml file is very important in any


android application, we are also going to see the content
https://tutorialwing.com/android-imageview-using-kotlin-example/ 8/13
11/02/2020 Android ImageView Using Kotlin With Example - Tutorialwing

inside this file. x

Tutorialwing Courses Contribute Contact Us Articles
AndroidManifest.xml file
Code inside main/AndroidManifest.xml file is as below.
x

<?xml version="1.0" encoding="utf-8"?>

<manifest package="com.tutorialwing.imageview"
          xmlns:android="<a class="vglnk" href
 
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity"
            <intent-filter>
                <action android:name="android.
 
                <category android:name="androi
            </intent-filter>
        </activity>
    </application>
 
</manifest>

When we run the program, we will get output as shown

above.

That’s end of our tutorial on Android ImageView using Kotlin.

Support Us
If you like Tutorialwing and would like to contribute, you can
email an article on any educational topic at
[email protected] . We would love to publish your
article. See your article on Tutorialwing and help others with

https://tutorialwing.com/android-imageview-using-kotlin-example/ 9/13
11/02/2020 Android ImageView Using Kotlin With Example - Tutorialwing

your knowledge. Follow Facebook , LinkedIn , Google+ , x

Tutorialwing Courses Contribute
Twitter , Youtube for latest updates.
Contact Us Articles

Greetings!

We have recently published 100+ articles on android tutorials

with kotlin and java. If you need, you may visit
Android Tutorial for beginners page. You can also check
Kotlin Tutorial for beginners

<< Prev Post Next Post >>

RELATED POSTS

Create An Create An
Create an Create An
Android Android
Android Android
Button EditText
VideoView ViewSwitcher
Programmati Programmati
Programmati Programmati
cally In cally In
cally in cally in
Android Android
Android Kotlin
by Tutorialwing by Tutorialwing
by Tutorialwing by Tutorialwing

https://tutorialwing.com/android-imageview-using-kotlin-example/ 10/13
11/02/2020 Android ImageView Using Kotlin With Example - Tutorialwing

Sponsored x
Tutorialwing
Become a permanent residentCourses Contribute
of Canada. Apply now! Contact Us Articles
Canadian Visa Professionals

Must Try Hairstyles For Your Next Festival

Black Hair Hub

Moving to Canada is The best choice for you and your family!
Canada Immigration Express

Do you want to have a flat stomach? Read here

Green coffee

Play this Game for 1 Minute and see why everyone is addicted
planetcapture.io

London Apartments for Rent Might Amaze You

London Apartments | Search Ads

0 Comments Tutorialwing 
1 Login

 Recommend t Tweet f Share Sort by Best

Start the discussion…

LOG IN WITH
OR SIGN UP WITH DISQUS ?

Name

Be the first to comment.

✉ Subscribe d Add Disqus to your siteAdd DisqusAdd

https://tutorialwing.com/android-imageview-using-kotlin-example/ 11/13
11/02/2020 Android ImageView Using Kotlin With Example - Tutorialwing

Sponsored x
Tutorialwing Courses
Become a permanent resident Contribute
of Canada. Apply now! Contact Us Articles
Canadian Visa Professionals

Darlings New Range Of Hair Extensions

Black Hair Hub

Moving to Canada is The best choice for you and your family!
Canada Immigration Express

Do you want to have a flat stomach? Read here

Green coffee

Play this Game for 1 Minute and see why everyone is addicted
planetcapture.io

London Apartments for Rent Might Amaze You

London Apartments | Search Ads

LEARN JOIN US AT QUICK LINKS SUBSCRIBE US

Android With Facebook About Us Email*

Kotlin Twitter Contact Us
Email
Kotlin Youtube Privacy Policy
Database Write For Us
Submit
Computer
Networks

Operating System

https://tutorialwing.com/android-imageview-using-kotlin-example/ 12/13
11/02/2020 Android ImageView Using Kotlin With Example - Tutorialwing

x
Tutorialwing Courses Contribute Contact Us Articles

Copyright © 2017. All Rights Reserved.

https://tutorialwing.com/android-imageview-using-kotlin-example/ 13/13