How to add a fully transparent to semi-transparent gradient in Android

Question

I have a situation where I want to add an image view doing the same effect as this app

Screenshot

As you notice there is a drawable or something hiding the bottom side of the view adding a transparent gradient. How can I achieve the same effect?

Matthew Strukov · Answer 1 · 2019-09-01T11:22:21.873

4

Place this drawable in the bottom of your layout:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#FFFFFF"
        android:endColor="@android:color/transparent"
        android:angle="90" />
</shape>

Your layout:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white" > 
    <View
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:background="@drawable/gradient"
        android:layout_gravity="bottom"/>

</FrameLayout>

edited Sep 01 '19 at 11:22

answered Sep 01 '19 at 11:17

Matthew Strukov

321
1
5

I don't believe this is the answer as this draws a gradient from "white" to transparent. – Mo Dev Sep 01 '19 at 11:19
You have to change the color to what you need – Matthew Strukov Sep 01 '19 at 11:23
In your example start color is blue. – Matthew Strukov Sep 01 '19 at 11:24
And what if the background is an image not a solid color? – Mo Dev Sep 01 '19 at 11:24

score 2 · Accepted Answer · answered Sep 01 '19 at 11:18

2

Well, you can use fadingEdge attribute of the listView in your xml. Make a listView, then add items xml (images in particular as you've mentioned above).

android:fadingEdge="horizontal" android:fadingEdgeLength="30dp" android:fillViewport="false" android:requiresFadingEdge="vertical"

answered Sep 01 '19 at 11:18

Shariq Shaikh

111
7

And how can this be possible with a Recyclerview (my current view) – Mo Dev Sep 01 '19 at 11:20
I searched for a Recyclerview view equivalent and found an identical code as you wrote above. Thanks! – Mo Dev Sep 01 '19 at 11:34
android:requiresFadingEdge="horizontal|vertical" This will workout for you. And sure, anytime, bro! :) – Shariq Shaikh Sep 02 '19 at 20:41

score 0 · Answer 3 · answered Sep 01 '19 at 11:20

0

I think you can change alpha value of that image View. Go through this and this for more details.

answered Sep 01 '19 at 11:20

Wimukthi Rajapaksha

381
5
11

How to add a fully transparent to semi-transparent gradient in Android

3 Answers3