Search code examples
androidbackgroundandroid-imageviewtextviewopacity

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


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


Solution

  • 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)