How to Build Image Filters like Instagram in Android?

21 Jan, 2021
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. 
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. 
Chapters
descriptions off, selected
captions settings, opens captions settings dialog
captions off, selected
English
This is a modal window.
Beginning of dialog window. Escape will cancel and close the window.
End of dialog window.
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: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="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 : 
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.
android
Technical Scripter 2020
Android
Java
Technical Scripter
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.