Android – Build Image Filters Like Instagram using Kotlin

Many social media apps nowadays provide a feature within their application to edit photos by applying some beautiful filters to them and making them more beautiful. We can get to see these types of filters on Instagram and Snapchat. In this article, we will be building an application in which we will be adding Instagram Image filters to our image on android using Kotlin. A sample video is given below to get an idea about what we are going to do in this article.

Note: If you are looking to build this application in android using Java. Check out the following article: How to build Image Filters like Instagram in Android using Java

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Kotlin as the programming language.

Step 2: Add dependency and JitPack Repository

Navigate to the Gradle Scripts > build.gradle(Module:app) and add the below dependency in the dependencies section.  

implementation 'com.github.mukeshsolanki:photofilter:1.0.2'

Add the JitPack repository to your build file. Add it to your root build.gradle at the end of repositories inside the allprojects{ } section.

allprojects {
repositories {
  …
  maven { url “https://jitpack.io” }
    }
}

After adding this dependency sync your project and now we will move towards its implementation.  

Step 3: Adding an image to the drawable folder

Copy your image and then Navigate to app > res > drawable folder. Right click on it and paste to add your image to drawable folder. 

Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<?xml version="1.0" encoding="utf-8"?>
<!--on below line we are creating a swipe to refresh layout-->
<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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!--Imageview for our original image-->
    <ImageView
        android:id="@+id/idIVOriginalImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/idHSV"
        android:layout_centerHorizontal="true"
        android:layout_margin="20dp"
        android:padding="5dp"
        android:src="@drawable/dog" />

    <!--horizontal scroll view for displaying
        all our image filters-->
    <HorizontalScrollView
        android:id="@+id/idHSV"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="20dp"
        android:scrollbars="none">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <!--We are creating a linear layout for displaying
                each item in horizontal scroll view-->
            <LinearLayout
                android:id="@+id/idLLVignette"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:orientation="vertical">

                <!--We are displaying the image view how it
                    will look after applying the filter-->
                <ImageView
                    android:id="@+id/idIVOne"
                    android:layout_width="140dp"
                    android:layout_height="140dp"
                    android:layout_gravity="center"
                    android:src="@drawable/dog" />

                <!--Text view for displaying our filter name-->
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="4dp"
                    android:text="Filter 1"
                    android:textAlignment="center"
                    android:textColor="@color/black" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/idLLTint"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/idIVTwo"
                    android:layout_width="140dp"
                    android:layout_height="140dp"
                    android:layout_gravity="center"
                    android:src="@drawable/dog" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="4dp"
                    android:text="Filter 2"
                    android:textAlignment="center"
                    android:textColor="@color/black" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/idLLTemperature"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/idIVThree"
                    android:layout_width="140dp"
                    android:layout_height="140dp"
                    android:layout_gravity="center"
                    android:src="@drawable/dog" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="4dp"
                    android:text="Filter 3"
                    android:textAlignment="center"
                    android:textColor="@color/black" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/idLLSharpen"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/idIVFour"
                    android:layout_width="140dp"
                    android:layout_height="140dp"
                    android:layout_gravity="center"
                    android:src="@drawable/dog" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="4dp"
                    android:text="Filter 4"
                    android:textAlignment="center"
                    android:textColor="@color/black" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/idLLSepia"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/idIVFive"
                    android:layout_width="140dp"
                    android:layout_height="140dp"
                    android:layout_gravity="center"
                    android:src="@drawable/dog" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="4dp"
                    android:text="Filter 5"
                    android:textAlignment="center"
                    android:textColor="@color/black" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/idLLSaturate"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/idIVSix"
                    android:layout_width="140dp"
                    android:layout_height="140dp"
                    android:layout_gravity="center"
                    android:src="@drawable/dog" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="4dp"
                    android:text="Filter 6"
                    android:textAlignment="center"
                    android:textColor="@color/black" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/idLLRotate"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/idIVSeven"
                    android:layout_width="140dp"
                    android:layout_height="140dp"
                    android:layout_gravity="center"
                    android:src="@drawable/dog" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="4dp"
                    android:text="Filter 7"
                    android:textAlignment="center"
                    android:textColor="@color/black" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/idLLPosterize"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/idIVEight"
                    android:layout_width="140dp"
                    android:layout_height="140dp"
                    android:layout_gravity="center"
                    android:src="@drawable/dog" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="4dp"
                    android:text="Filter 8"
                    android:textAlignment="center"
                    android:textColor="@color/black" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/idLLNone"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/idIVNine"
                    android:layout_width="140dp"
                    android:layout_height="140dp"
                    android:layout_gravity="center"
                    android:src="@drawable/dog" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="4dp"
                    android:text="Filter 9"
                    android:textAlignment="center"
                    android:textColor="@color/black" />

            </LinearLayout>

            <LinearLayout
                android:id="@+id/idLLNegative"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:orientation="vertical">

                <ImageView
                    android:id="@+id/idIVTen"
                    android:layout_width="140dp"
                    android:layout_height="140dp"
                    android:layout_gravity="center"
                    android:src="@drawable/dog" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="4dp"
                    android:text="Filter 10"
                    android:textAlignment="center"
                    android:textColor="@color/black" />

            </LinearLayout>

        </LinearLayout>

    </HorizontalScrollView>
</RelativeLayout>

Step 5: Working with the MainActivity.kt file

Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Comments are added inside the code to understand the code in more detail.

Kotlin

package com.gtappdevelopers.kotlingfgproject

import android.graphics.Bitmap
import android.graphics.BitmapFactory
import android.os.Bundle
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import com.mukesh.image_processing.ImageProcessor

class MainActivity : AppCompatActivity() {

    // on below line we are creating variables.
    lateinit var oneIV: ImageView
    lateinit var twoIV: ImageView
    lateinit var threeIV: ImageView
    lateinit var fourIV: ImageView
    lateinit var fiveIV: ImageView
    lateinit var sixIV: ImageView
    lateinit var sevenIV: ImageView
    lateinit var eightIV: ImageView
    lateinit var nineIV: ImageView
    lateinit var tenIV: ImageView
    lateinit var originalIV: ImageView

    lateinit var bmp: Bitmap
    lateinit var onebmp: Bitmap
    lateinit var twobmp: Bitmap
    lateinit var threebmp: Bitmap
    lateinit var fourbmp: Bitmap
    lateinit var fivebmp: Bitmap
    lateinit var sixbmp: Bitmap
    lateinit var sevenbmp: Bitmap
    lateinit var eightbmp: Bitmap
    lateinit var ninebmp: Bitmap
    lateinit var tenbmp: Bitmap

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

        // creating a variable for our image processor.
        val processor = ImageProcessor()

        // initializing bitmap with our image resource.
        bmp = BitmapFactory.decodeResource(resources, R.drawable.dog)

        // on below line we are initializing
        // our variable with their ids.
        oneIV = findViewById(R.id.idIVOne);
        twoIV = findViewById(R.id.idIVTwo);
        threeIV = findViewById(R.id.idIVThree);
        fourIV = findViewById(R.id.idIVFour);
        fiveIV = findViewById(R.id.idIVFive);
        sixIV = findViewById(R.id.idIVSix);
        sevenIV = findViewById(R.id.idIVSeven);
        eightIV = findViewById(R.id.idIVEight);
        nineIV = findViewById(R.id.idIVNine);
        tenIV = findViewById(R.id.idIVTen);
        originalIV = findViewById(R.id.idIVOriginalImage);

        // below line is use to add tint effect to our original
        // image bitmap and storing that in one bitmap.
        onebmp = processor.tintImage(bmp, 90)

        // after storing it to one bitmap
        // we are setting it to imageview.
        oneIV.setImageBitmap(onebmp)

        // below line is use to apply gaussian blur effect
        // to our original image bitmap.
        twobmp = processor.applyGaussianBlur(bmp);
        twoIV.setImageBitmap(twobmp);

        // below line is use to add sepia toning effect
        // to our original image bitmap.
        threebmp = processor.createSepiaToningEffect(bmp, 1, 2.0, 1.0, 5.0);
        threeIV.setImageBitmap(threebmp);

        // below line is use to apply saturation
        // filter to our original image bitmap.
        fourbmp = processor.applySaturationFilter(bmp, 3);
        fourIV.setImageBitmap(fourbmp);

        // below line is use to apply snow effect
        // to our original image bitmap.
        fivebmp = processor.applySnowEffect(bmp);
        fiveIV.setImageBitmap(fivebmp);

        // below line is use to add gray scale
        // to our image view.
        sixbmp = processor.doGreyScale(bmp);
        sixIV.setImageBitmap(sixbmp);

        // below line is use to add engrave effect
        // to our image view.
        sevenbmp = processor.engrave(bmp);
        sevenIV.setImageBitmap(sevenbmp);

        // below line is use to create a contrast
        // effect to our image view.
        eightbmp = processor.createContrast(bmp, 1.5);
        eightIV.setImageBitmap(eightbmp);

        // below line is use to add shadow effect
        // to our original bitmap.
        ninebmp = processor.createShadow(bmp);
        nineIV.setImageBitmap(ninebmp);

        // below line is use to add flea
        // effect to our image view.
        tenbmp = processor.applyFleaEffect(bmp);
        tenIV.setImageBitmap(tenbmp);

        // on below line we are adding click listeners
        // for all image views.
        oneIV.setOnClickListener {
            // on clicking on each filter we are
            // setting that filter to our original image.
            originalIV.setImageBitmap(onebmp)
        }

        twoIV.setOnClickListener {
            // on clicking on each filter we are
            // setting that filter to our original image.
            originalIV.setImageBitmap(twobmp)
        }

        threeIV.setOnClickListener {
            // on clicking on each filter we are
            // setting that filter to our original image.
            originalIV.setImageBitmap(threebmp)
        }
        fourIV.setOnClickListener {
            // on clicking on each filter we are
            // setting that filter to our original image.
            originalIV.setImageBitmap(fourbmp)
        }
        fiveIV.setOnClickListener {
            // on clicking on each filter we are
            // setting that filter to our original image.
            originalIV.setImageBitmap(fivebmp)
        }
        sixIV.setOnClickListener {
            // on clicking on each filter we are
            // setting that filter to our original image.
            originalIV.setImageBitmap(sixbmp)
        }
        sevenIV.setOnClickListener {
            // on clicking on each filter we are
            // setting that filter to our original image.
            originalIV.setImageBitmap(sevenbmp)
        }
        eightIV.setOnClickListener {
            // on clicking on each filter we are
            // setting that filter to our original image.
            originalIV.setImageBitmap(eightbmp)
        }
        nineIV.setOnClickListener {
            // on clicking on each filter we are
            // setting that filter to our original image.
            originalIV.setImageBitmap(ninebmp)
        }
        tenIV.setOnClickListener {
            // on clicking on each filter we are
            // setting that filter to our original image.
            originalIV.setImageBitmap(tenbmp)
        }
    }
}

Now run your application to see the output of the application. 

Output: