Android add traslucid overlayer to image

Question

I'm begginer in android. I'm developing an app, and I want this effect:

enter image description here

I think it is a background image, an overlay whit traslucid color, and a textView.

My layout is this:

<?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:id="@+id/backgroundImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:contentDescription="Description" />

<ImageView
    android:id="@+id/overlay"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:background="#AAFF0000"
    android:contentDescription="Description" />

<TextView
    android:id="@+id/textoOpcion"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:text="TextView" />

</RelativeLayout>

But this doesn't work.

Any idea to do it?

Thanks.

Excuse my poor english, I wanted to say that I could not get the effect I wanted. — hlastras, Dec 26 '14 at 18:41

M S Gadag · Accepted Answer · 2014-12-26T06:31:47.617

try like this i hope it will work for u..

this image is exist by giving textview background color as #44ff0000

u can chane the opacity of color by changing first two values of color code 00 to ff

#44ff0000 here 44 is opacity for coloor ff0000

enter image description here

<?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:id="@+id/backgroundImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:contentDescription="Description"
    android:src="@drawable/ic_launcher" />

<TextView
    android:id="@+id/textoOpcion"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/backgroundImage"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_alignRight="@+id/backgroundImage"
    android:background="#44000000"
    android:gravity="bottom"
    android:text="TextView"
    android:textColor="#ffffff" />

</RelativeLayout>

Thanks @m-s-gadag, that works better. But the problem now is, I want the text center in the image, but it is in a corner, and android:gravity don't center it. I will investigate the solution and post it. — hlastras, Dec 26 '14 at 18:45

JASON G PETERSON · Answer 2 · 2014-12-26T06:17:43.650

Try the following. I find FrameLayout works better for the compositing type stuff, and just set the background on the TextView itself -- no need for a separate ImageView.

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

<TextView
    android:id="@+id/textoOpcion"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:background="@color/whatever_you_like"
    android:text="TextView" />

<ImageView
    android:id="@+id/overlay"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:contentDescription="Description"
    android:src="@drawable/drawablewithYourSemiTransparentColor" />

</FrameLayout>

Thanks for your solution. I thinks it's a way, but it make a FC when I do a casting to `(TextView) findViewById(R.id.textoOpcion)`. Thanks for try in graphical editor. — hlastras, Dec 26 '14 at 18:54

score 0 · Answer 3 · edited Jan 24 '15 at 02:32

My solution:

I had add a view to see overlay color, and center the textView

In the solution of @M-S-Gadag i can't center the text:

enter image description here

But I want this:

enter image description here

The code to do the second image:

<?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:id="@+id/backgroundImage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:contentDescription="Description"/>

<View
    android:id="@+id/overlay"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/backgroundImage"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:layout_alignRight="@+id/backgroundImage"
    android:background="#99FF0000" />

<TextView
    android:id="@+id/textoOpcion"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:textSize="21sp"
    android:textColor="#ffffff" />

</RelativeLayout>

edit

<?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:id="@+id/backgroundImage"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:contentDescription="Description" />

    <View
        android:id="@+id/overlay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/backgroundImage"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignRight="@+id/backgroundImage"
        android:background="#99FF0000" />

    <TextView
        android:id="@+id/textoOpcion"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/backgroundImage"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_alignRight="@+id/backgroundImage"
        android:gravity="center"
        android:text="map"
        android:textColor="#ffffff"
        android:textSize="21sp" />

</RelativeLayout>

I'm sure that the code can be better, but this work.

Android add traslucid overlayer to image

3 Answers3