Skip to main content

How to add image filters to the selected image using ImagePicker in Kotlin Android

How to add image filters to the selected image using ImagePicker in Kotlin Android.

Here is a detailed step-by-step tutorial on how to add image filters to a selected image using ImagePicker in Kotlin for Android:

Step 1: Set up your project​

  • Create a new Android project in Android Studio.
  • Make sure you have the necessary dependencies added to your project. In your app-level build.gradle file, add the following dependencies:
implementation 'com.github.bumptech.glide:glide:4.12.0'
implementation 'com.zomato:androidphotofilters:1.0.1'

Step 2: Add the necessary permissions​

  • Open your AndroidManifest.xml file and add the following permissions:
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

Step 3: Set up ImagePicker library​

  • Add the ImagePicker library to your project by adding the following dependency to your app-level build.gradle file:
implementation 'com.github.esafirm.android-image-picker:imagepicker:2.0.0'
  • Sync your project to download the library.

Step 4: Create a layout file​

  • Create a layout file for your main activity (e.g., activity_main.xml). Add an ImageView and a Button to select an image:
<ImageView
    android:id="@+id/imageView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop" />

<Button
    android:id="@+id/selectButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Select Image" />

Step 5: Implement ImagePicker functionality​

  • In your MainActivity.kt file, import the necessary classes:
import com.esafirm.imagepicker.features.ImagePicker
import com.esafirm.imagepicker.model.Image
  • Declare the necessary variables:
private lateinit var imageView: ImageView
private lateinit var selectButton: Button
  • Initialize the variables in the onCreate() method:
imageView = findViewById(R.id.imageView)
selectButton = findViewById(R.id.selectButton)
  • Set a click listener for the selectButton to open the image picker:
selectButton.setOnClickListener {
    ImagePicker.create(this)
        .single()
        .start()
}
  • Override the onActivityResult() method to handle the selected image:
override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
    super.onActivityResult(requestCode, resultCode, data)
    if (ImagePicker.shouldHandle(requestCode, resultCode, data)) {
        val image: Image? = ImagePicker.getFirstImageOrNull(data)
        if (image != null) {
            applyFilter(image.path)
        }
    }
}

Step 6: Apply image filters​

  • Add the following method to apply filters to the selected image:
private fun applyFilter(imagePath: String) {
    val bitmap = BitmapFactory.decodeFile(imagePath)
    val filteredBitmap: Bitmap = FilterUtils.applyFilter(bitmap, FilterType.GRAYSCALE)
    imageView.setImageBitmap(filteredBitmap)
}
  • In this example, we are applying a grayscale filter to the selected image. You can explore other filter types provided by the AndroidPhotoFilters library.

Step 7: Run the app​

  • Connect your device or emulator and run the app.
  • Click the "Select Image" button and choose an image from the gallery.
  • The selected image will be displayed in the ImageView with the applied filter.

That's it! You have successfully added image filters to a selected image using ImagePicker in Kotlin for Android. You can further enhance the app by adding more filter options and customizations as per your requirements.