ImageView in Kotlin

ImageView class is used to display any kind of image resource in the android application either it can be android.graphics.Bitmap or android.graphics.drawable.Drawable (it is a general abstraction for anything that can be drawn in Android). ImageView class or android.widget.ImageView inherits the android.view.View class which is the subclass of Kotlin.Any class. Application of ImageView is also in applying tints to an image in order to reuse a drawable resource and create overlays on background images. Moreover ImageView is also used to control the size and movement of an image.

Adding an ImageView to an activity

Whenever ImageView is added to an activity, it means there is the requirement of an image resource. Thus it is oblivious to provide an Image file to that ImageView class. It can be done by adding an image file that is present in the Android Studio itself or we can add our own image file. Android Studio owns a wide range of drawable resources which are very common in the android application layout. The following are the steps to add a drawable resource to the ImageView class.

Note: The steps are performed on Android Studio version 4.0

  • Open the activity.xml file in which the image is to be added
    activity.xml file in which image is to be added
  • Switch from code view to the design view of the activity.xml file
    Design view of the activity.xml file
  • For adding an image from Android Studio
    Drag the ImageView widget to the activity area of the application, a pop-up dialogue box will open choose from the wide range of drawable resources and click “OK”.
    Adding a drawable resource to the activity
  • For adding an image file other than Android Studio drawable resources
    1. Click on the “Resource Manager” tab on the leftmost panel and select “Import Drawables” option.
      Select Import Drawables option to add image file
    2. Select the path of the image file in your computer and click “OK”. After that set the “Qualifier type” and “value” of the image file according to your need and click “Next” then “Import”.
      Providing value to Qualifier type for the image
    3. Drag the ImageView class in the activity area, a pop-up dialogue box will appear which contain your imported image file. Choose your image file and click “OK”, your image will be added in the activity.
      Adding image to the activity

Note: After adding an image set its constraints layout both vertically and horizontally otherwise it will show an error.

XML Attributes of ImageView

XML Attribute Use
android:id To uniquely identify an image view
android:src/app:srcCompat To add the file path of the inserted image
android:background To provide a background color to the inserted image
android:layout_width To set width of the image
android:layout_height To set height of the image
android:padding To add padding to the image from left, right, top or bottom of the view
android:scaleType To re-size the image or to move it in order to fix its size

The complete code for both XML and Kotlin file is given below.

activity_main.xml



filter_none

edit
close

play_arrow

link
brightness_4
code

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <ImageView
        android:id="@+id/GfG_full_logo"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.078"
        app:srcCompat="@drawable/full_logo" />
  
    <ImageView
        android:id="@+id/GfG_logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/GfG_full_logo"
        app:srcCompat="@drawable/logo" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

chevron_right


Note: All the attributes of the ImageView which are starting with app:layout_constraint are the vertical and horizontal constraints to fix the image position in the activity. This is very necessary to add the constraint to the ImageView otherwise, all the images will take the position (0, 0) of the activity layout.

Since in the activity, only 2 images have been added and nothing else is being done like touching a button, etc. So, the MainActivity.kt file will simply look like the below code.

MainActivity.kt

filter_none

edit
close

play_arrow

link
brightness_4
code

package com.example.sampleproject
  
    import androidx.appcompat.app.AppCompatActivity import android.os.Bundle
  
    class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
    }
}

chevron_right


Output

In this example, 2 images will be added in a activity and their attributes, XML code and Kotlin file code will be analysed. The activity will look like the image given below:
Android activity after adding 2 images




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

1


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.