How to get a semi transparent image on top of another image to hold text in android (screenshot provided)

Question

I have an image using an image view, towards the bottom of the image I want a semi transparent view (black in color) which will hold some text view in it. Something like this

enter image description here

I have got the text over the image, but now I am stuck on getting the black background sort of view. I tried

 <TextView 
 android:background="@color/lightGrey"
 android:text="Swiss Chalet - Play for a chance to win free app!"/>

however it only gives a grey background to the text. Anyone knows how can I achieve this?

You can use Frame Layout Its perfect for this kind of work. – newBie Oct 23 '13 at 05:57 — newBie, Oct 23 '13 at 05:57

score 6 · Accepted Answer · edited May 23 '17 at 11:55

6

Try something like this in your background

android:background="#80000000"

You can find more info on setting transparency here

edited May 23 '17 at 11:55

Community

1
1

answered Oct 22 '13 at 17:49

Manishika

5,478
2
22
28

I think you misunderstood my question, I have updated the question. Also look at the comment under Andrew's answer – Akshat Agarwal Oct 22 '13 at 17:55

Andrew Schuster · Answer 2 · 2014-07-07T12:42:03.943

6

In your xml, use

android:alpha=".4"

This will set the alpha value of the view. Alpha is the transparency. You can adjust to increase or decrease transparency.

Without knowing how you implemented your layout, this is a shot in the dark, but it might be helpful.

<TextView
    android:id="@+id/your_id_name"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:text="Your text"
    android:background:"@color/your_color"/>

edited Jul 07 '14 at 12:42

answered Oct 22 '13 at 17:50

Andrew Schuster

3,229
2
21
32

Im sorry, maybe I wasnt that accurate in explaining my problem, I have updated the question. the android:background="@color/lightGrey" I did was only on the textview that showed on top of the image, it gives me a background but only on the text, I want the background to start from just above the text and go all the way down to the end of the image – Akshat Agarwal Oct 22 '13 at 17:54
Would it be possible for you to post the whole xml for that particular view? There are a few ways to do this and I want to be sure to give you the most compatible way. – Andrew Schuster Oct 22 '13 at 18:06

score 2 · Answer 3 · answered Oct 22 '13 at 17:55

In your colors.xml file (or wherever you're defining the color "lightGrey"), you can specify the alpha channel by adding two digits to the front of the hex code of the color (in the format AARRGGBB).

So for example, if your lightGrey colour is #555555, listing it as

<color name="lightGrey">#CC55555</color>

instead will give the color as 20% transparent and 80% opaque. 00 represents full opacity (0% transparency) and FF would correspond to 100% transparency (invisible). Hope this helps!

score 0 · Answer 4 · answered Oct 22 '13 at 18:01

You could do it like this,

<FrameLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent">
    <FrameLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:alpha="0.4"
       android:background="@android:color/black"/>

   <TextView 
    android:background="@color/lightGrey"
    android:text="Swiss Chalet - Play for a chance to win free app!"/>
</FrameLayout>

score -1 · Answer 5 · edited Aug 11 '14 at 09:32

Try this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/icmsLrnArtListItem"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    android:layout_margin="3dp"
    android:padding="5dp" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="5dp" >

        <ImageView
            android:id="@+id/icmsImageThumb"
            android:layout_width="match_parent"
            android:layout_height="180dp"
            android:src="@drawable/ic_launcher"
            android:scaleType="fitXY" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:background="@android:color/darker_gray"
            android:textColor="@android:color/black"
            android:text="Image Top text"
            android:gravity="center"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@android:color/darker_gray"
            android:ellipsize="end"
            android:maxLines="2"
            android:text="Image Bottom text"
            android:textColor="@android:color/black"
            android:shadowColor="#FFFFFF"
            android:gravity="center"
            android:shadowDx="2"
            android:textStyle="bold"
            android:shadowDy="2"
            android:shadowRadius="2" />
    </FrameLayout>

</LinearLayout>

wont the framelayout make the textviews stack on top of one another? — Akshat Agarwal, Oct 23 '13 at 16:02

How to get a semi transparent image on top of another image to hold text in android (screenshot provided)

5 Answers5