Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overlay over an ImageView on Android

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:

enter image description here

Is there anyway to do this via XML?

like image 258
cesarferreira Avatar asked Dec 27 '13 16:12

cesarferreira


People also ask

How do I overlay one image over another android?

Tap Edit and choose an image from your Photo Library or Stock Images. Scroll through the bottom menu and tap on Overlays.

How do I put text over a picture on android?

There are many ways. You use RelativeLayout or AbsoluteLayout. With relative, you can have the image align with parent on the left side for example and also have the text align to the parent left too... then you can use margins and padding and gravity on the text view to get it lined where you want over the image.

How do I move one view to the top of another android?

The FrameLayout is the simplest ViewGroup and stacks the Views in the order they're defined in layout XML (or added programmatically); the first will be lower, and the last will be on top. Here is the actual layout XML with the two overlapping TextView boxes.

Is ImageView clickable in android?

Using clickable imagesYou can turn any View , such as an ImageView , into a button by adding the android:onClick attribute in the XML layout. The image for the ImageView must already be stored in the drawable folder of your project.


1 Answers

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.

like image 126
adityajones Avatar answered Sep 21 '22 08:09

adityajones