How to add two gradients(top-bottom and bottom-top) in a single image view in android?

Question

I am trying to add gradient to an imageview on both top and bottom side of the image. I dont want to add a textview on top of image view. How do I implement it?

Answer 1

It appears that your simple and clean solution would be to wrap ImageView with FrameLayout and use foreground property as follows:

Layout

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:foreground="@drawable/gradient">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/male"/>
</FrameLayout>

And gradient just in case

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">

    <gradient
        android:startColor="#33000000"
        android:centerColor="@android:color/transparent"
        android:endColor="#33000000"
        android:angle="90"/>
</shape>

Produces this:

A FrameLayout is relatively simple structure which will not add complexity to your view hierarchy, as opposed to RelativeLayout for example, which will cause extra measurements.

If you absolutely have to avoid adding any extra wrapper views, then your next option would be creating a CustomView, extending from ImageView and overriding onDraw() method and manually covering your existing canvas with pixels from gradient bitmap.