Make ImageView have dark transparency

Question

I want to add the transparent black color on top of the image and make it darker.

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

                <ImageView
                    android:id="@+id/rest_image"
                    android:layout_width="match_parent"
                    android:layout_height="150dp"
                    android:adjustViewBounds="true"
                    android:scaleType="centerCrop"
                    />
            </RelativeLayout>

I can set the alpha parameter but the color change is in white. I want to make the darker image like this. How can i do it in xml or Java code. I will set it based on condition.?

Thanks.

You can create a darker `shape` and use as background on a `FrameLayout` . — Aytek Sökmen, Oct 04 '17 at 13:06

score 47 · Accepted Answer · edited Sep 09 '20 at 08:47

47

What you need is called tinting. Apply a tint to your ImageView:

<ImageView
    ...
    app:tint="#6F000000"
    />

edited Sep 09 '20 at 08:47

poppinjay13

18
6

answered Oct 04 '17 at 13:08

azizbekian

60,783
13
169
249

6

This didn't work for me without adding `android:tintMode="src_atop"`. – javaxian Jul 25 '22 at 11:29

score 6 · Answer 2 · answered Jun 19 '21 at 14:56

You can add foreground tint with tint mode.

Make sure you add alpha channel in your foreground color.

foreground="##AARRGGBB"

AA = alpha channel in HEX R,G,B = Red, Blue, Green.

<ImageView
            android:id="@+id/vidthumbnail"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:foreground="#96222f3e"
            android:foregroundTintMode="src_atop"/>

score 5 · Answer 3 · answered Oct 04 '17 at 13:08

Easiest/Fastest solution would be in XML

Add a second layer (can be a View, doesn't have to be an ImageView) on top of your ImageView, with the desired color/alpha. Show/Hide it when needed.

            <ImageView
                android:id="@+id/rest_image"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                />

            <View
                android:id="@+id/overlay_image"
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:background=“@color/yourColorWithAlpha"
                />
        </RelativeLayout>

score 2 · Answer 4 · edited Jun 20 '20 at 09:12

Try this second imageview will set the transparent color. Adjust the height according to your need.

500000 - last 4 digits stands for black color and first two stands for alpha you want to set.

                      <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">
        
                        <ImageView
                            android:id="@+id/rest_image"
                            android:layout_width="match_parent"
                            android:layout_height="150dp"
                            android:adjustViewBounds="true"
                            android:scaleType="centerCrop"
                            />
    
                          <ImageView 
                            android:layout_width="match_parent"
                            android:layout_height="150dp" 
                            android:background="#500000"
                            />
                    </RelativeLayout>

Make ImageView have dark transparency

4 Answers4

500000 - last 4 digits stands for black color and first two stands for alpha you want to set.