Add Image overlay on ImageView with custom color

Question

I have an ImageView. I want to add a transparent overlay on top of it, but I have no idea how to do it. For example this is my image:

I want to add my overlay on it so it looks like this:

As you can see there is a black overlay on it, the point is that I want to make this overlay customizable and its color must change. I don't know even which keywords I should search in order to find a good result.

I'm not sure what you mean... but if you use FrameLayout with 2 Image views. then the second one will be on top of the first one — Roee N, Oct 25 '16 at 11:57
@RoeeN thanks for your answer, In fact I can have two imageViews but How I make an overlay with different colors in android? — Majid Hojati, Oct 25 '16 at 12:10
you can just give it a background color. and set the alpha level that should give you some coloring affect. — Roee N, Oct 25 '16 at 12:48
@RoeeN thanks very much but It seems it covers all of my other image,As you can see In my question I need sth like what Is here https://i.stack.imgur.com/EH5fM.jpg — Majid Hojati, Oct 25 '16 at 12:49

Ahmad Aghazadeh · Answer 1 · 2016-10-25T12:17:52.583

   <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
          <bitmap android:src="@drawable/android_red"
            android:gravity="center" />
        </item>
        <item android:top="10dp" android:left="10dp">
          <bitmap android:src="@drawable/android_green"
            android:gravity="center" />
        </item>
        <item android:top="20dp" android:left="20dp">
          <bitmap android:src="@drawable/android_blue"
            android:gravity="center" />
        </item>

Or programmatically

public static Bitmap overlay(Bitmap bmp1, Bitmap bmp2) {
            Bitmap bmOverlay = Bitmap.createBitmap(bmp1.getWidth(), 

    bmp1.getHeight(), bmp1.getConfig());
                Canvas canvas = new Canvas(bmOverlay);
                canvas.drawBitmap(bmp1, new Matrix(), null);
                canvas.drawBitmap(bmp2, 0, 0, null);
                return bmOverlay;
            }

Or use FrameLayout

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    android:background="#000000">
   <FrameLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:padding="20dp"
       android:background="@android:color/holo_red_dark">
      <LinearLayout
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:padding="20dp"
          android:orientation="vertical"
          android:background="@android:color/holo_purple">

          <ImageView
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              ...
              ">

          <ImageView
              android:layout_width="match_parent"
              android:layout_height="match_parent"
               ...
               />
      </LinearLayout>

    </LinearLayout>
  </FrameLayout>
 </LinearLayout>

Thanks very much, But In fact I am using Glide and so It seems I must use two seprate imageViews..The problem is how to create the overlay layer with different colors? — Majid Hojati, Oct 25 '16 at 12:12

Roee N · Accepted Answer · 2016-10-25T13:13:32.007

2

shader.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:startColor="#00000000"
        android:centerColor="#7d000000"
        android:endColor="#7d000000"
        android:dither="true"
        />
</shape>


<ImageView

    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/bla2" />

<View
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/shader"/>

I think this is what you mean, you'll have to play with the gradient a little to get it the exact same way you want

edited Oct 25 '16 at 13:13

answered Oct 25 '16 at 13:04

Roee N

502
2
4
17

Thanks..Yes this is exactly what I need.Can I change the shaders color programmatic? – Majid Hojati Oct 25 '16 at 13:24
1

never tried... you can probably create it programmaticly and update it check this out http://stackoverflow.com/questions/6115715/how-do-i-programmatically-set-the-background-color-gradient-on-a-custom-title-ba – Roee N Oct 25 '16 at 13:27

Add Image overlay on ImageView with custom color

2 Answers2