Overlay over an ImageView on Android

Question

So I have a list of images that come from the web, I don't know which color are they and I want to place a text over the ImageView.

My idea is to place the ImageView, an image overlay with transparency gradient over that ImageView and the text above it. I want to mimic this behaviour:

Is there anyway to do this via XML?

Answer 1

When you write the XML for your list items which get inflated in the getView(...) of whatever ListAdapter you've written you can surely do this.

Something like this for the list item:

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

  <ImageView
    android:layout_width="320dp"
    android:layout_height="240dp"
    android:background="#ACACAC"/>

  <RelativeLayout
    android:layout_width="320dp"
    android:layout_height="240dp"
    android:background="@drawable/gradient">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Here is your text"
        android:textColor="#000000"
        android:layout_alignParentBottom="true"/>

  </RelativeLayout>

</RelativeLayout>

Then you create that drawable/gradient. For that you can recycle the answer from here.

Answer 2

Thanks to adityajones I managed to get there :) So although this is my right answer, I'll mark his as the correct one!

<?xml version="1.0" encoding="utf-8"?>

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="200dp"
    android:scaleType="centerCrop"
    android:src="@drawable/image" />

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="200dp"
    android:background="@drawable/gradient_image" >

    <TextView
        android:id="@+id/text"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_margin="6dp"
        android:layout_marginBottom="18dp"
        android:shadowColor="#000"
        android:shadowRadius="7.0"
        android:text="This is some random text"
        android:textColor="@color/white"
        android:textSize="22sp" />
</RelativeLayout>

Answer 3

I'd use a FrameLayout or RelativeLayout. The first View you add to either should be the background ImageView, then obviously you'll need some TextViews and Other ImageViews [or Buttons, or ImageButtons, etc]

Seems like a reasonable layout: a background image, and then one additional view in each corner.

For the gradient, you'll probably want a separate Layout/View at the bottom with a gradient drawable as the background, although I can imagine you might be able to get away with setting the background of one of your TextViews as the gradient.

Answer 4

You do not have to use a gradient drawable file or set it in your xml.. you can do this pragmatically using GradientDrawable Class as explained in this related Question (Create a radial gradient programmatically) then set it as a background for a layout that covers your ImageView, this gives you ability to use different colors and orientations