How to apply different colour filters on an image in android?

Question

I can't figure out how can we apply filters over an image.

In this case I want the image to be darker (black, 40% transparency, layer on top of the image would give me the result I want). However, it will be helpful (in future) if I know how to put a layer over an image of any color (with some transparency) to make it more visually compatible with the other UI elements of the app.

How it looks now.

How I want it to look on the app (the above image has been edited in Adobe illustrator but the app repeatedly crashes if I use it even though its size is not large)

Also, I suspect there must be a way to do this in android studio without the need of any image editing software.

Correct me if I am wrong ;)

image have a background and src attributes or use ColorFilter — Charuක, Dec 28 '16 at 04:45
Possible duplicate of [android black color at 85% opacity](http://stackoverflow.com/questions/6024867/android-black-color-at-85-opacity) — Patel Pinkal, Dec 28 '16 at 04:56
for opacity see this - http://stackoverflow.com/a/17239853/7235539 — Patel Pinkal, Dec 28 '16 at 04:58

score 12 · Accepted Answer · edited May 23 '17 at 11:46

12

This is what i do ,

 imageView =(ImageView) findViewById(R.id.image_view) ;
 imageView.getDrawable().setColorFilter(0x76ffffff, PorterDuff.Mode.MULTIPLY );

color range [0x00000000 -0xffffffff]

If you don't understand the pattern this might help you

Red - 0xffff0000

green -0xff00ff00

blue - 0xff0000ff

your request average black color 0xff555555

change color codes as you want > here

out put

Further more :

setColorFilter params : (int color, PorterDuff.Mode mode)

What does PorterDuff.Mode mean

edited May 23 '17 at 11:46

Community

1
1

answered Dec 28 '16 at 05:02

Charuක

12,953
5
50
88

2

your `here` link is dead – N J Dec 28 '16 at 05:07
@Charuka Thanks a lot for taking time to show the output. Appreciate it! – Raunaq Shah Dec 28 '16 at 06:40

score 1 · Answer 2 · edited Dec 28 '16 at 17:24

You can use android:foreground property of a object to set a color over any object. here i used an ImageView to show a image and android:foreground to put a filter!

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/yourImage"
    android:foreground="#60000000" />
</RelativeLayout>

if you want to do this a layout then use android:background property instead of android:src for the source of image.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/yourImage"
    android:foreground="#60000000">

</RelativeLayout>

score 0 · Answer 3 · edited Dec 28 '16 at 17:25

Try this:

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/black"/>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:alpha=".5"
            android:src="@drawable/your_naruto_img"/>

    </RelativeLayout>

Of course you can adjust the opacity accordingly by changing android:alpha [0 - 1].

Hope this helps!

Opacity and color filter is completely different thing! – Sadiq Md Asif Dec 28 '16 at 04:53 — Sadiq Md Asif, Dec 28 '16 at 04:53

score 0 · Answer 4 · answered Dec 28 '16 at 04:49

0

Generate a 9 patch image using any online tool for the darker image and use that 9 patch in your app. it will work.

answered Dec 28 '16 at 04:49

rajvir singh

111
1
3
9

score 0 · Answer 5 · edited Dec 30 '16 at 08:33

Try this:

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

    <ImageView
        android:id="@+id/backImage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#66000000"
        android:scaleType="fitXY"/>
</RelativeLayout>

You can set the image to the background of a RelativeLayout. Use the imageview tag and set background with transparent color which you want to set.

Please don't deface your post by rolling back our improvements. — FelixSFD, Dec 30 '16 at 08:33

score 0 · Answer 6 · edited Dec 20 '17 at 11:59

0

What worked for me was

ImageView backgroundimage = FindViewById<ImageView>(Resource.Id.img_view);
backgroundimage.SetColorFilter(Color.Argb(200,0,0,0), PorterDuff.Mode.Overlay);

after trying all the above answers. Hope it helps someone .

edited Dec 20 '17 at 11:59

Dmitriy

5,525
12
25
38

answered Dec 20 '17 at 11:37

Annu

449
6
18

How to apply different colour filters on an image in android?

6 Answers6

Linked