Alpha-gradient on Android

Question

I need to create an alpha-gradient on the edge of the ImageView. Preferably using only XML.

Image for example

also take a look at here: http://stackoverflow.com/a/5088137/4270676 should also work for an ImageView. — Lucker10, Jul 18 '16 at 10:21

score 26 · Answer 1 · answered Jan 15 '13 at 20:07

26

Here the solution

the image look like below picture

enter image description here

code for that:

Prepare shape drawable

res/drawable/gradient_shape.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
            android:startColor="#00FFFFFF"
            android:endColor="#FFFFFFFF"
            android:type="linear" />
</shape>

Define layout: activity_main.xml:

<ImageView
    android:id="@+id/photo"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/photo"
    android:src="@drawable/gradient_shape" />

here drawable/photo is just jpeg in drawables folder

EDIT for more information refer this Tutorial

answered Jan 15 '13 at 20:07

Dixit Patel

6,179
1
31
42

1

@ffp27 this is the right solution for u & same as your image & to do transparent refer my answer's tutorial & hope this help u. – Dixit Patel Jan 15 '13 at 20:12
36

No it's a wrong answer. This just puts a alpha/white gradient shape overlay on the image. It doesn't make part of the original image transparent in any way. – Edward van Raak Aug 17 '13 at 17:38
1

It's the correct answer you just need to change the start and end color – user2512888 Sep 19 '14 at 06:57
1

but how can i use this effect in every border of the imageview? – DysaniazzZ Sep 01 '16 at 01:47
1

A "real" alpha gradient is not available with xml. Adding another layer of a gradient with color (since unfortunately there is no colorless pure-alpha color code for android) would pollute the gradient with the color, it's FFFFFF in this case. To achieve colorless gradient you'll probably need to for a ComposeShader like mentioned here: https://stackoverflow.com/a/40395350/3591480 – Teng-pao Yu Sep 07 '17 at 08:10
Setting the actual image as background messes up the scaling. I prefer using a layer-list drawable (see my answer below) – joe1806772 Aug 07 '20 at 08:08

score 4 · Answer 2 · answered Oct 23 '14 at 14:17

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <gradient
                android:startColor="#00FFFFFF"
                android:endColor="#FFFFFFFF"
                android:type="linear" />
    </shape>

perfect transperancy. Make sure that the View below gradient is actually below and not just touching Gradient shape View.

If you have main RelativeLayout, ListView and View(Background:Gradient )

make sure that Gradient View is on top, of the ListView, and not a side. If Your gradient is aside it will be transparent by RelativeLayout Background Color and not by ListView .

i hope you understand what i want to say.

Jeremy YANG · Answer 3 · 2019-06-19T15:29:19.087

2

For transparency :

android:startColor="@null"

Or you can use a 8-digit hex color like that :

android:startColor="#FF000000"

The first two FF are for the alpha of the color, 00 is fully transparent and FF opaque

edited Jun 19 '19 at 15:29

answered Jun 19 '19 at 09:45

Jeremy YANG

21
4

score 1 · Accepted Answer · answered Aug 07 '20 at 08:12

Need to code a custom ImageView if you want colorless transparency.

If your background is a static color, here's my preferred workaround:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/your_image"/>

    <item>
        <shape android:shape="rectangle">
            <gradient android:startColor="#00efefef"
                android:endColor="#ffefefef"
                android:angle="270"
                android:type="linear"/>
        </shape>
    </item>
</layer-list>

Alpha-gradient on Android

4 Answers4

Linked