Open In App

How to Build Image Filters like Instagram in Android?

Improve
Improve
Like Article
Like
Save
Share
Report

Now a day many social media apps provide so many filters that we can use to make our image inside the app more beautiful and attractive. This type of feature is generally seen in Instagram, Snapchat, and many socials media apps. In this article, we will take a look at the implementation of this Instagram-like filter section in Android. 

What we are going to build in this article? 

We will be building a simple application in which we will be displaying an ImageView and we will provide different types of image filtering options below. After clicking on each image filter that filter will be applied to our original image. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Image Filters like Instagram in Android Sample GIF

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java 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: 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"?>
<RelativeLayout 
    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="300dp"
        android:layout_centerHorizontal="true"
        android:layout_margin="20dp"
        android:padding="5dp"
        android:src="@drawable/image" />
  
    <!--horizontal scroll view for displaying
        all our image filters-->
    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idIVOriginalImage"
        android:layout_marginTop="20dp">
  
        <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/image" />
  
                <!--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/image" />
  
                <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/image" />
  
                <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/image" />
  
                <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/image" />
  
                <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/image" />
  
                <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/image" />
  
                <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/image" />
  
                <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/image" />
  
                <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/image" />
  
                <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 4: Working with the MainActivity.java file

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

Java




import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
  
import androidx.appcompat.app.AppCompatActivity;
  
import com.mukesh.image_processing.ImageProcessor;
  
public class MainActivity extends AppCompatActivity {
  
    // creating a bitmap for our original
    // image and all image filters.
    Bitmap bitmap;
      
    // creating a variable for image view.
    ImageView oneIV, twoIV, threeIV, fourIV, fiveIV, sixIV, sevenIV, eightIV, nineIV, tenIV, originalIV;
    Bitmap oneBitMap, twoBitMap, threeBitmap, fourBitMap, fiveBitMap, sixBitMap, sevenBitMap, eightBitMap, nineBitMap, tenBitMap;
      
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // creating a variable for our image processor.
        ImageProcessor processor = new ImageProcessor();
          
        // initializing bitmap with our image resource.
        bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image);
          
        // initializing image views for our filters 
        // and original image on which we will 
        // be applying our filters.
        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.
        oneBitMap = processor.tintImage(bitmap, 90);
          
        // after storing it to one bitmap 
        // we are setting it to imageview.
        oneIV.setImageBitmap(oneBitMap);
          
        // below line is use to apply gaussian blur effect
        // to our original image bitmap.
        twoBitMap = processor.applyGaussianBlur(bitmap);
        twoIV.setImageBitmap(twoBitMap);
          
        // below line is use to add sepia toing effect 
        // to our original image bitmap.
        threeBitmap = processor.createSepiaToningEffect(bitmap, 1, 2, 1, 5);
        threeIV.setImageBitmap(threeBitmap);
         
        // below line is use to apply saturation
        // filter to our original image bitmap.
        fourBitMap = processor.applySaturationFilter(bitmap, 3);
        fourIV.setImageBitmap(fourBitMap);
          
        // below line is use to apply snow effect 
        // to our original image bitmap.
        fiveBitMap = processor.applySnowEffect(bitmap);
        fiveIV.setImageBitmap(fiveBitMap);
          
        // below line is use to add gray scale
        // to our image view.
        sixBitMap = processor.doGreyScale(bitmap);
        sixIV.setImageBitmap(sixBitMap);
          
        // below line is use to add engrave effect 
        // to our image view.
        sevenBitMap = processor.engrave(bitmap);
        sevenIV.setImageBitmap(sevenBitMap);
          
        // below line is use to create a contrast 
        // effect to our image view.
        eightBitMap = processor.createContrast(bitmap, 1.5);
        eightIV.setImageBitmap(eightBitMap);
          
        // below line is use to add shadow effect 
        // to our original bitmap.
        nineBitMap = processor.createShadow(bitmap);
        nineIV.setImageBitmap(nineBitMap);
          
        // below line is use to add flea
        // effect to our image view.
        tenBitMap = processor.applyFleaEffect(bitmap);
        tenIV.setImageBitmap(tenBitMap);
          
        // below line is use to call on click 
        // listener for our all image filters.
        initializeOnCLickListerns();
    }
  
    private void initializeOnCLickListerns() {
        oneIV.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // on clicking on each filter we are 
                // setting that filter to our original image.
                originalIV.setImageBitmap(oneBitMap);
            }
        });
          
        twoIV.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                originalIV.setImageBitmap(twoBitMap);
            }
        });
  
        threeIV.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                originalIV.setImageBitmap(threeBitmap);
            }
        });
  
        fourIV.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                originalIV.setImageBitmap(fourBitMap);
            }
        });
  
        fiveIV.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                originalIV.setImageBitmap(fiveBitMap);
            }
        });
  
        sixIV.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                originalIV.setImageBitmap(sixBitMap);
            }
        });
  
        sevenIV.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                originalIV.setImageBitmap(sevenBitMap);
            }
        });
  
        eightIV.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                originalIV.setImageBitmap(eightBitMap);
            }
        });
  
        nineIV.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                originalIV.setImageBitmap(nineBitMap);
            }
        });
  
        tenIV.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                originalIV.setImageBitmap(tenBitMap);
            }
        });
    }
}


The image used in this project is added to the drawable folder. For navigating the image, Navigate to the app > res > drawable and you will find the image in that folder. Now run the app and see the output of the code below : 

Output: 

Note: The app will take some time to load though we are using bitmap and it takes time to decode the image to the bitmap.



Last Updated : 21 Jan, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads