Skip to main content

How to display the selected image in an ImageView using ImagePicker in Kotlin Android

How to display the selected image in an ImageView using ImagePicker in Kotlin Android.

Here is a step-by-step tutorial on how to display a selected image in an ImageView using ImagePicker in Kotlin for Android:

Step 1: Set up your project​

  • Create a new Android project in Kotlin.
  • Make sure you have the necessary dependencies in your project's build.gradle file:
implementation 'com.github.dhaval2404:imagepicker:1.7'
  • Sync your project to download the required dependencies.

Step 2: Set up permissions​

  • Open your app's AndroidManifest.xml file.
  • Add the following permissions to allow access to the device's storage:
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Step 3: Add ImagePicker button and ImageView to your layout​

  • Open your app's activity layout file (e.g., activity_main.xml).
  • Add a button to trigger the image selection:
<Button
    android:id="@+id/selectImageButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Select Image" />
  • Add an ImageView to display the selected image:
<ImageView
    android:id="@+id/selectedImageView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop" />

Step 4: Handle image selection​

  • Open your app's activity file (e.g., MainActivity.kt).
  • Import the necessary classes:
import com.github.dhaval2404.imagepicker.ImagePicker
import com.github.dhaval2404.imagepicker.listener.ImageListener
  • Inside your activity's onCreate method, initialize the ImagePicker button and ImageView:
val selectImageButton: Button = findViewById(R.id.selectImageButton)
val selectedImageView: ImageView = findViewById(R.id.selectedImageView)
  • Set an OnClickListener to the selectImageButton:
selectImageButton.setOnClickListener {
    ImagePicker.with(this)
        .galleryOnly()
        .compress(1024)
        .start { resultCode, data ->
            if (resultCode == Activity.RESULT_OK) {
                val fileUri = data?.data
                selectedImageView.setImageURI(fileUri)
            }
        }
}
  • In the above code, we use the ImagePicker library to open the device's image gallery and select an image. The selected image is then displayed in the selectedImageView using the setImageURI method.

Step 5: Test the app​

  • Build and run your app on an Android device or emulator.
  • Click the "Select Image" button to choose an image from the device's gallery.
  • The selected image should be displayed in the ImageView.

That's it! You have successfully implemented the functionality to display a selected image in an ImageView using ImagePicker in Kotlin for Android.