How to set background opacity of a textview placed on to of ImageView

Question

I would like to achieve the following result where there is a transparent background over the name.:

So far this is what i have done (ignore the black border surrounding the image):

i would like to have a transparent background (actually a colored background with its opacity adjusted).

Here is the XML code i have been using:

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="5dp">

<ImageView
    android:id="@+id/iconItem"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_gravity="center"
    android:src="@drawable/shout_ic"/>
<TextView
    android:id="@+id/textItem"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:layout_alignBottom="@+id/iconItem"
    android:paddingBottom="5dip"
    android:textSize="10sp"
    android:textColor="#FFF"/>
</RelativeLayout>

Can anyone points me to the right direction on how to achieve such things? Thx

Answer 1

In your TextView definition, add:

android:background="#8888"

888 being a mid grey (888888), with 8 being a mid alpha (88)

OR

android:background="#8000"

000 being a black (000000), with 8 being a mid alpha (88)

Answer 2

You can set background color through xml as shown in other answers.

Also dynamically you can getBackgtound and set alpha.

textItem.getBackground().setAlpha(100); // int value between 0 and 255

Answer 3

Add the background property to your text view like this:

<TextView
android:id="@+id/textItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:layout_alignBottom="@+id/iconItem"
android:paddingBottom="5dip"
android:textSize="10sp"
android:textColor="#FFF"
android:background="#70000000"/>

Answer 4

Add android:background to the textView

<TextView
  android:id="@+id/textItem"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_centerHorizontal="true"
  android:layout_centerVertical="true"
  android:layout_alignBottom="@+id/iconItem"
  android:background="#80000000"
  android:paddingBottom="5dip"
  android:textSize="10sp"
  android:textColor="#FFF"/>

And you can change the Transparency according to the percentage

Check this understanding the Color codes in android

Answer 5

<FrameLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:orientation="vertical"
 android:padding="5dp">

<ImageView
android:id="@+id/iconItem"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/shout_ic"/>
 <TextView
android:id="@+id/textItem"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_alignBottom="@+id/iconItem"
android:paddingBottom="5dip"
android:textSize="10sp"
android:textColor="#FFF"/>
</FrameLayout>

Answer 6

Try adding

android:alpha="0.5"

to the TextView, it should make it semi transparent