create account

Applying filter effects to image view in android development by andrixyz

View this thread on: hive.blogpeakd.comecency.com
· @andrixyz · (edited)
$50.72
Applying filter effects to image view in android development
#### What Will I Learn?

- Integrate the image filter library using gradle dependency
- Creating the imageview to be filtered and change the scaleType
- Apply filter effects to the imageview

#### Requirements

- Android Studio 3.0 (recommended)
- Gradle dependencies
- Understanding of android development using Java

#### Difficulty

- Basic

#### Tutorial Contents
Filter effects are used to change the appearance of an image or part of an image by altering the shades and colors of the pixels in some manner. For example, we give some contrast, brightness, color over lay and so on to an image. Filter effects are often used in social media application like instagram, facebook, path, snapchat, etc. In this tutorial, you will learn how to apply filter effects to image view in android. Okay, let's get started.

<b>Integrate project via gradle</b>

This is the most important step and don't forget this step. First of all, go to build.gradle (module:app) and add this dependency line ```compile 'com.github.zomato:androidphotofilters:1.0.1'```. After done, hit the sync button to be able to use this photo filter library. See this image for the reference.

![sadasdas.PNG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520837818/deexuwrehhmjxw2ffo7y.png)

After completed, we are going to the next step. Because we can use the photofilter library now.

<b>Creating the image and applying some effects</b>

The next thing we are gonna do is to create the image view. Go to your activity or fragment layout.xml. We are creating the imageview that use constraintlayout as its parent. Note that our image view will have constraintTop to top of parent and constraintLeft to left of parent. So, our image is position on top left on the screen. And, we change the scaleType to ```centerCrop``` to make the image resize proportionally. Write these xml code in your layout xml,

```
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.professional.andri.demoapp.MainActivity">

    <ImageView
        android:id="@+id/image_for_filter"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:scaleType="centerCrop"
        android:src="@drawable/task_3"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"/>

</android.support.constraint.ConstraintLayout>
```
Note that we also give the image id, so we can reference it to our Java class later. And we have the height to fixed size which is 300 dp.

Okay, now let's move on to our activity class. Don't forget to get the reference and attach to an image view variable first using this line ```ImageView imageView = findViewById(R.id.image_for_filter);```.
Make sure to run your app first to see if the image already scale to centerCrop and its default before using filter.

![sdadadad.PNG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520844609/qlozdo6zurjc73qedvg6.png)

Next, we are going to import the photo filter module to our class to be able to use the image filter library properly. Below the declaration of the class, write this code.
```
static
    {
        System.loadLibrary("NativeImageProcessor");
    }
```
It will looks like this in your class.

![sdsadasdsad.PNG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520843793/jwconvlprpxz3t78aqok.png)

The next thing we are gonna apply is to apply the filter. Follow these steps:
- Instantiate the Filter library first using this line ```Filter imageFilter = new Filter();```
- After that, we add the subfilter to that our declared imageFilter. Write down this code.
```imageFilter.addSubFilter(new ColorOverlaySubfilter(100, .2f, .5f, .0f));```. This color overlay subfilter that we wrote has 4 parameters. The first parameter is the depth value ranging from 0-255 {Defining intensity of color overlay}.  The second parameter until the fourth parameter are red, green and blue value consecutively that between 0 - 1. So, i used the 0.2 f red value, 0.5 green value and 0.0 blue value.
- Next, we must to this step, otherwise it will leads to illegalstateexception error because by default decodeResource returns immutable copy of bitmap which can't be modified . We need to change the bitmap factory options to be mutable so we can modify the bitmap of an image then we can apply filter there. Write these codes.
```
BitmapFactory.Options opts = new BitmapFactory.Options();
opts.inMutable = true;
```
- Then, we change our image view to bitmap by decodeResource using the image view we have and opts that we made earlier so we can apply filter in it. Write this code .
```
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
                R.drawable.task_3, opts);
```
- After done, we are going to process the filter using the ```processFilter``` method that receive bitmap as its parameter. Write this line. ```Bitmap outputImage = imageFilter.processFilter(bitmap);```
- And set the image bitmap to see the filter effect using ```setImageBitmap``` method and give the outputImage that we store the process of the filter. Write this code.
```imageView.setImageBitmap(outputImage);```. After all have been done, try to run your app.

You should see something like this.  Notice the difference with the normal image view above that we run before. 

![dasdasdlsa;das.PNG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520845472/raodue7vjv9yoxvejdyx.png)

Of course we can apply additional  subfilter such as tone effect though. In the filter part, add these lines. 
```
Filter imageFilter = new Filter();
Point[] rgbKnots;
rgbKnots = new Point[3];
rgbKnots[0] = new Point(0, 0);
rgbKnots[1] = new Point(175, 139);
rgbKnots[2] = new Point(255, 255);
 imageFilter.addSubFilter(new ColorOverlaySubfilter(100, .2f, .5f, .0f));
 imageFilter.addSubFilter(new ToneCurveSubfilter(rgbKnots, null, null, null));
```
Notice we are using Point array that represent geometry that is from the photo library. See the ```newToneCurveSubfilter(rgbKnots, null, null, null));```. That is we add the subfilter to the image.
The result will be like this. 

![dasdasdasda.PNG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520846415/eapmuu3uith3dz2jfxa1.png)

Also, we can have additional subfilter again using brightness and another filter just add the subfilter to the filter instance that follow the above steps. If we add brightness and constrast to the subfilter using these codes.
```
imageFilter.addSubFilter(new BrightnessSubfilter(30));
imageFilter.addSubFilter(new ContrastSubfilter(1.1f));
```

It will results like this.

![dasdasdasdadad.PNG](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520846642/j3sccynagxsgsgsrxjvm.png)

This is the final Java code. You can play around with the code of course depending on your need.
```
package com.professional.andri.demoapp;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ImageView;

import com.zomato.photofilters.geometry.Point;
import com.zomato.photofilters.imageprocessors.Filter;
import com.zomato.photofilters.imageprocessors.subfilters.BrightnessSubfilter;
import com.zomato.photofilters.imageprocessors.subfilters.ColorOverlaySubfilter;
import com.zomato.photofilters.imageprocessors.subfilters.ContrastSubfilter;
import com.zomato.photofilters.imageprocessors.subfilters.ToneCurveSubfilter;

public class MainActivity extends AppCompatActivity {
    static
    {
        System.loadLibrary("NativeImageProcessor");
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView imageView = findViewById(R.id.image_for_filter);
        Filter imageFilter = new Filter();
        Point[] rgbKnots;
        rgbKnots = new Point[3];
        rgbKnots[0] = new Point(0, 0);
        rgbKnots[1] = new Point(175, 139);
        rgbKnots[2] = new Point(255, 255);
        imageFilter.addSubFilter(new ColorOverlaySubfilter(100, .2f, .5f, .0f));
        imageFilter.addSubFilter(new ToneCurveSubfilter(rgbKnots, null, null, null));
        imageFilter.addSubFilter(new BrightnessSubfilter(30));
        imageFilter.addSubFilter(new ContrastSubfilter(1.1f));

        BitmapFactory.Options opts = new BitmapFactory.Options();
        opts.inMutable = true;
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
                R.drawable.task_3, opts);

        Bitmap outputImage = imageFilter.processFilter(bitmap);
        imageView.setImageBitmap(outputImage);



    }
}
```
The difference of normal image view and the the image with some filter effects.

![Untitled-1.jpg](https://res.cloudinary.com/hpiynhbhq/image/upload/v1520847149/qvi8bwzihu7jggp8nyxj.jpg)

Okay, we're done. This kind of library also often used as the background effect of an app. You can also play around with the effect you want and dive in. Thank you for reading this guide.

<br /><hr/><em>Posted on <a href="https://utopian.io/utopian-io/@andrixyz/applying-filter-effects-to-image-view-in-android-development">Utopian.io -  Rewarding Open Source Contributors</a></em><hr/>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 40 others
properties (23)
authorandrixyz
permlinkapplying-filter-effects-to-image-view-in-android-development
categoryutopian-io
json_metadata"{"community":"utopian","app":"utopian/1.0.0","format":"markdown","repository":{"id":60839877,"name":"AndroidPhotoFilters","full_name":"Zomato/AndroidPhotoFilters","html_url":"https://github.com/Zomato/AndroidPhotoFilters","fork":false,"owner":{"login":"Zomato"}},"pullRequests":[],"platform":"github","type":"tutorials","tags":["utopian-io","android","imageview","filtereffect","tutorial"],"users":["drawable","Override","andrixyz"],"links":["https://res.cloudinary.com/hpiynhbhq/image/upload/v1520837818/deexuwrehhmjxw2ffo7y.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1520844609/qlozdo6zurjc73qedvg6.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1520843793/jwconvlprpxz3t78aqok.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1520845472/raodue7vjv9yoxvejdyx.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1520846415/eapmuu3uith3dz2jfxa1.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1520846642/j3sccynagxsgsgsrxjvm.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1520847149/qvi8bwzihu7jggp8nyxj.jpg"],"image":["https://res.cloudinary.com/hpiynhbhq/image/upload/v1520837818/deexuwrehhmjxw2ffo7y.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1520844609/qlozdo6zurjc73qedvg6.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1520843793/jwconvlprpxz3t78aqok.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1520845472/raodue7vjv9yoxvejdyx.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1520846415/eapmuu3uith3dz2jfxa1.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1520846642/j3sccynagxsgsgsrxjvm.png","https://res.cloudinary.com/hpiynhbhq/image/upload/v1520847149/qvi8bwzihu7jggp8nyxj.jpg"],"moderator":{"account":"cha0s0000","time":"2018-03-12T13:32:17.858Z","reviewed":true,"pending":false,"flagged":false},"questions":[{"question":"Is the project description formal?","answers":[{"value":"Yes it’s straight to the point","selected":true,"score":10},{"value":"Need more description ","selected":false,"score":5},{"value":"Not too descriptive","selected":false,"score":0}],"selected":0},{"question":"Is the language / grammar correct?","answers":[{"value":"Yes","selected":true,"score":20},{"value":"A few mistakes","selected":false,"score":10},{"value":"It's pretty bad","selected":false,"score":0}],"selected":0},{"question":"Was the template followed?","answers":[{"value":"Yes","selected":true,"score":10},{"value":"Partially","selected":false,"score":5},{"value":"No","selected":false,"score":0}],"selected":0},{"question":"Is there information about the additional frameworks?","answers":[{"value":"Yes, everything is explained","selected":true,"score":5},{"value":"Yes, but not enough","selected":false,"score":3},{"value":"No details at all","selected":false,"score":0}],"selected":0},{"question":"Is there code in the tutorial?","answers":[{"value":"Yes, and it’s well explained","selected":true,"score":5},{"value":"Yes, but no explanation","selected":false,"score":3},{"value":"No","selected":false,"score":0}],"selected":0},{"question":"Is the tutorial explains technical aspects well enough?","answers":[{"value":"Yes, it teaches how and why about technical aspects","selected":true,"score":5},{"value":"Yes, but it’s not good/enough","selected":false,"score":3},{"value":"No, it explains poorly","selected":false,"score":0}],"selected":0},{"question":"Is the tutorial general and dense enough?","answers":[{"value":"Yes, it’s general and dense","selected":true,"score":5},{"value":"Kinda, it might be more generalized","selected":false,"score":3},{"value":"No, it’s sliced unnecessarily to keep part number high","selected":false,"score":0}],"selected":0},{"question":"Is there an outline for the tutorial content at the beginning of the post","answers":[{"value":"Yes, there is a well prepared outline in “What will I learn?” or another outline section","selected":true,"score":5},{"value":"Yes, but there is no proper listing for every step of the tutorial or it’s not detailed enough","selected":false,"score":3},{"value":"No, there is no outline for the steps.","selected":false,"score":0}],"selected":0},{"question":"Is the visual content of good quality?","answers":[{"value":"Yes","selected":true,"score":5},{"value":"Yes, but bad quality","selected":false,"score":3},{"value":"No","selected":false,"score":0}],"selected":0},{"question":"Is this a tutorial series?","answers":[{"value":"Yes","selected":false,"score":5},{"value":"Yes, but first part","selected":false,"score":3},{"value":"No","selected":true,"score":0}],"selected":2},{"question":"Is the tutorial post structured?","answers":[{"value":"Yes","selected":true,"score":5},{"value":"Not so good","selected":false,"score":3},{"value":"No","selected":false,"score":0}],"selected":0}],"score":75}"
created2018-03-12 09:35:27
last_update2018-03-12 13:32:30
depth0
children4
last_payout2018-03-19 09:35:27
cashout_time1969-12-31 23:59:59
total_payout_value35.481 HBD
curator_payout_value15.236 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length9,534
author_reputation1,144,619,513,316
root_title"Applying filter effects to image view in android development"
beneficiaries
0.
accountutopian.pay
weight2,500
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id43,871,350
net_rshares20,107,328,641,213
author_curate_reward""
vote details (104)
@cha0s0000 ·
Thank you for the contribution. It has been approved.

You can contact us on [Discord](https://discord.gg/uTyJkNm).
**[[utopian-moderator]](https://utopian.io/moderators)**
properties (22)
authorcha0s0000
permlinkre-andrixyz-applying-filter-effects-to-image-view-in-android-development-20180312t133237779z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-03-12 13:32:36
last_update2018-03-12 13:32:36
depth1
children0
last_payout2018-03-19 13:32:36
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length172
author_reputation30,983,518,016,225
root_title"Applying filter effects to image view in android development"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id43,908,119
net_rshares0
@steemitboard ·
Congratulations @andrixyz! You received a personal award!

<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@andrixyz/birthday1.png</td><td>1 Year on Steemit</td></tr></table>

<sub>_[Click here to view your Board](https://steemitboard.com/@andrixyz)_</sub>


**Do not miss the last post from @steemitboard:**
<table><tr><td><a href="https://steemit.com/christmas/@steemitboard/christmas-challenge-send-a-gift-to-to-your-friends-the-party-continues"><img src="https://steemitimages.com/64x128/http://i.cubeupload.com/kf4SJb.png"></a></td><td><a href="https://steemit.com/christmas/@steemitboard/christmas-challenge-send-a-gift-to-to-your-friends-the-party-continues">Christmas Challenge - The party continues</a></td></tr><tr><td><a href="https://steemit.com/christmas/@steemitboard/christmas-challenge-send-a-gift-to-to-your-friends"><img src="https://steemitimages.com/64x128/http://i.cubeupload.com/kf4SJb.png"></a></td><td><a href="https://steemit.com/christmas/@steemitboard/christmas-challenge-send-a-gift-to-to-your-friends">Christmas Challenge - Send a gift to to your friends</a></td></tr></table>

> Support [SteemitBoard's project](https://steemit.com/@steemitboard)! **[Vote for its witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1)** and **get one more award**!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-andrixyz-20181229t041902000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2018-12-29 04:19:03
last_update2018-12-29 04:19:03
depth1
children0
last_payout2019-01-05 04:19:03
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,341
author_reputation38,975,615,169,260
root_title"Applying filter effects to image view in android development"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id77,526,916
net_rshares0
@steemitboard ·
Congratulations @andrixyz! You received a personal award!

<table><tr><td>https://steemitimages.com/70x70/http://steemitboard.com/@andrixyz/birthday2.png</td><td>Happy Birthday! - You are on the Steem blockchain for 2 years!</td></tr></table>

<sub>_You can view [your badges on your Steem Board](https://steemitboard.com/@andrixyz) and compare to others on the [Steem Ranking](https://steemitboard.com/ranking/index.php?name=andrixyz)_</sub>


###### [Vote for @Steemitboard as a witness](https://v2.steemconnect.com/sign/account-witness-vote?witness=steemitboard&approve=1) to get one more award and increased upvotes!
properties (22)
authorsteemitboard
permlinksteemitboard-notify-andrixyz-20191229t043009000z
categoryutopian-io
json_metadata{"image":["https://steemitboard.com/img/notify.png"]}
created2019-12-29 04:30:09
last_update2019-12-29 04:30:09
depth1
children0
last_payout2020-01-05 04:30:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length620
author_reputation38,975,615,169,260
root_title"Applying filter effects to image view in android development"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id93,824,919
net_rshares0
@utopian-io ·
### Hey @andrixyz I am @utopian-io. I have just upvoted you!
#### Achievements
- WOW WOW WOW People loved what you did here. GREAT JOB!
- You have less than 500 followers. Just gave you a gift to help you succeed!
- Seems like you contribute quite often. AMAZING!
#### Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. <a href="https://discord.gg/zTrEMqB">Participate on Discord</a>. Lets GROW TOGETHER!
- <a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1">Vote for my Witness With SteemConnect</a>
- <a href="https://v2.steemconnect.com/sign/account-witness-proxy?proxy=utopian-io&approve=1">Proxy vote to Utopian Witness with SteemConnect</a>
- Or vote/proxy on <a href="https://steemit.com/~witnesses">Steemit Witnesses</a>

[![mooncryption-utopian-witness-gif](https://steemitimages.com/DQmYPUuQRptAqNBCQRwQjKWAqWU3zJkL3RXVUtEKVury8up/mooncryption-s-utopian-io-witness-gif.gif)](https://steemit.com/~witnesses)

**Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x**
properties (22)
authorutopian-io
permlinkre-andrixyz-applying-filter-effects-to-image-view-in-android-development-20180313t082603600z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"community":"utopian","app":"utopian/1.0.0"}
created2018-03-13 08:26:03
last_update2018-03-13 08:26:03
depth1
children0
last_payout2018-03-20 08:26:03
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length1,141
author_reputation152,955,367,999,756
root_title"Applying filter effects to image view in android development"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id44,089,997
net_rshares0