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

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

Here's a step-by-step tutorial on how to add image overlays to a selected image using ImagePicker in Kotlin Android:

Step 1: Set up the project

1. Open Android Studio and create a new project.
2. Add the following dependencies to your app's build.gradle file:

implementation 'com.github.dhaval2404:imagepicker:1.7'
implementation 'com.github.bumptech.glide:glide:4.11.0'

3. Sync the project to download the dependencies.

Step 2: Add permissions to the manifest

1. Open the 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: Create layout files

1. Create a new XML layout file called 'activity_main.xml' and add an ImageView and a Button to it:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY" />

    <Button
        android:id="@+id/selectImageButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Select Image"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp" />

</RelativeLayout>

Step 4: Implement image selection logic

1. Open the MainActivity.kt file and add the following code:

class MainActivity : AppCompatActivity() {

    private lateinit var imageView: ImageView
    private lateinit var selectImageButton: Button

    private val REQUEST_CODE_IMAGE_PICKER = 100

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        imageView = findViewById(R.id.imageView)
        selectImageButton = findViewById(R.id.selectImageButton)

        selectImageButton.setOnClickListener {
            openImagePicker()
        }
    }

    private fun openImagePicker() {
        ImagePicker.with(this)
            .galleryOnly()
            .compress(1024)
            .start(REQUEST_CODE_IMAGE_PICKER)
    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        if (requestCode == REQUEST_CODE_IMAGE_PICKER && resultCode == Activity.RESULT_OK) {
            val imageUri = data?.data
            imageUri?.let { uri ->
                Glide.with(this)
                    .load(uri)
                    .into(imageView)
            }
        }
    }
}

Step 5: Add image overlay

1. Create a new XML layout file called 'layout_image_overlay.xml' and add an ImageView with the desired overlay image as a background:

<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/your_overlay_image" />

Step 6: Add image overlay logic

1. Modify the MainActivity.kt file as follows:

class MainActivity : AppCompatActivity() {

    private lateinit var imageView: ImageView
    private lateinit var selectImageButton: Button

    private val REQUEST_CODE_IMAGE_PICKER = 100

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        imageView = findViewById(R.id.imageView)
        selectImageButton = findViewById(R.id.selectImageButton)

        selectImageButton.setOnClickListener {
            openImagePicker()
        }
    }

    private fun openImagePicker() {
        ImagePicker.with(this)
            .galleryOnly()
            .compress(1024)
            .start(REQUEST_CODE_IMAGE_PICKER)
    }

    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        if (requestCode == REQUEST_CODE_IMAGE_PICKER && resultCode == Activity.RESULT_OK) {
            val imageUri = data?.data
            imageUri?.let { uri ->
                showImageWithOverlay(uri)
            }
        }
    }

    private fun showImageWithOverlay(imageUri: Uri) {
        val overlayView = LayoutInflater.from(this).inflate(R.layout.layout_image_overlay, null)
        val overlayImage = overlayView.findViewById<ImageView>(R.id.imageView)
        Glide.with(this)
            .load(imageUri)
            .into(overlayImage)

        imageView.setImageBitmap(null)
        imageView.addView(overlayView)
    }
}

That's it! You have successfully implemented image overlays using ImagePicker in Kotlin Android.