10

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

Background on the name

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

current result

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

Onik
  • 19,396
  • 14
  • 68
  • 91
Jeremy
  • 2,516
  • 8
  • 46
  • 80

6 Answers6

24

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)

Phantômaxx
  • 37,901
  • 21
  • 84
  • 115
9

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
Phantômaxx
  • 37,901
  • 21
  • 84
  • 115
vipul mittal
  • 17,343
  • 3
  • 41
  • 44
1

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"/>
Dreagen
  • 1,733
  • 16
  • 21
1

Try adding

android:alpha="0.5"

to the TextView, it should make it semi transparent

gile
  • 368
  • 1
  • 7
1

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

Community
  • 1
  • 1
Jagadesh Seeram
  • 2,630
  • 1
  • 16
  • 29
0
<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>
Sush
  • 3,864
  • 2
  • 17
  • 35