android- transparent RelativeLayout

Question

I want to make an activity which has a gradient drawable as background and is going to show 4 panels (RelativeLayout) on top of it's background. now I want to make the 4 panels transparent(e.g. 50%) so that the gradient background could be seen, too. I searched google, but I found only ways to do this with activities not layouts. how to do what I want?

Answer 1

You can create a drawable with shape content. And put your styles in it.

Sample:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <solid android:color="#77ffffff"/>

</shape>

Create a file with a name such as sampleBackground.xml in the drawable folder in the res path. And set the background attribute of your panels to it:

android:background="@drawable/sampleBackground"

Answer 2

You can use alpha attribute for your layout if you want to make it transparent. It can be used in following way:-

<RelativeLayout
  android:id="@+id/yourRelativeLayoutID"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_marginLeft="20dp"
  android:layout_marginRight="20dp"
  android:alpha="0.7"
  android:gravity="bottom">
</RelativeLayout>

set the value of alpha between 0.1 to 1.0. It depends on level of transparency you want.

Answer 3

You can use this:

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent" >
</RelativeLayout>

Answer 4

I was able to get a transparent background on RelativeLayout elements by specifying a background color:

<RelativeLayout
    android:layout_height="match_parent"
    android:layout_width="wrap_content"
    android:background="@color/modal_background" >
</RelativeLayout>

And in my colors.xml I created a color called modal_background with an alpha value. This particular example is black (#000000) with an alpha value of CC:

<resources>
    <item name="modal_background" type="color">#CC000000</item>
</resources>