CODEWITHSUNDEEP
androidxmlandroid-layouttransparency
Akshat Agarwal
Akshat Agarwal

Reputation: 2847

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

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?

Upvotes: 3

Views: 5367

Answers (5)

Hareshkumar Chhelana
Hareshkumar Chhelana

Reputation: 24848

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>

Upvotes: -1

Andrew Schuster
Andrew Schuster

Reputation: 3229

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"/>

Upvotes: 6

Sivakumar S
Sivakumar S

Reputation: 681

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>

Upvotes: 0

physphil
physphil

Reputation: 233

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!

Upvotes: 2

Manishika
Manishika

Reputation: 5574

Try something like this in your background 

android:background="#80000000"

You can find more info on setting transparency here

Upvotes: 6

Related Questions