Question

I am building an UI with some transparency. I have managed to get different buttons and layouts to be transparent, so I was a bit surprised when a View that I wanted to be somewhat transparent started to behave weirdly.

The View in question shows up as partly transparent in Eclipse, when viewing the layout in “designer”. But when I deploy it to a device (Samsung S2, Android 4), then that particular View is solid black instead.

Its a bit messy to explain how its built, but I’ll try.

First, how I want it to look (transparency, how it looks in Eclipse):

This is how it looks when deployed to the device (no transparency):

The first question:

Why does Eclipse/designer differ from the deployed version? I have cleaned the project several times, I have restarted Eclipse etc.

The next step is to take a look at how the structure is.

The simplified version:

[activity_main] –> [LinearLayout] –> [includes “logobar”]

The “logobar” looks like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dp"
    android:background="#80000000" >

    <RadioGroup
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

        <!-- Here is the box, and then the green circle inside the box -->
        <FrameLayout
            android:layout_width="50dp"
            android:layout_height="30dp"
            android:layout_marginLeft="10dp"
            android:background="@drawable/status_background"
            android:padding="0dp" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/bullet_ball_glass_green" />
        </FrameLayout>
        <!-- end of box -->

        <ImageView
            android:id="@+id/logo"
            android:layout_width="220dip"
            android:layout_height="55dip"
            android:background="@android:color/transparent"
            android:paddingLeft="10dp"
            android:src="@drawable/logo_demo" >
        </ImageView>
    </RadioGroup>

</RelativeLayout>

And here is the drawable “status_background” (layered for some bevel effect):

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <stroke
                android:width="1px"
                android:color="#77000000" />

            <corners android:radius="5dp" >
            </corners>
        </shape>
    </item>
    <item
        android:left="1dip"
        android:top="1dp">
        <shape android:shape="rectangle" >
            <stroke
                android:width="1px"
                android:color="#77ffffff" />

            <corners android:radius="5dp" >
            </corners>
        </shape>
    </item>
    <item
        android:left="1dip"
        android:top="1dp">
        <shape android:shape="rectangle" >
            <solid android:color="#11FFFFFF"/>
            <corners android:radius="5dp" >
            </corners>
        </shape>
    </item>
</layer-list>

Second question then:
Can anyone tell me what Im doing wrong here? =) Thanks

Answer 1

As usual, after trying for hours, I go to the beloved Stack Overflow, and, as often before, I manage to solve the issue (well, one part of it), shortly after posting here.

So, I cannot explain why Eclipse shows transparency, but the device didn’t. Weird behaviour.

However, if I change the status_background as below, then it works in both:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/transparent"/>
            <stroke android:width="1px" android:color="#77000000" />
            <corners android:radius="5dp"></corners>
        </shape>
    </item>
    <item android:left="1dip" android:top="1dp">
        <shape android:shape="rectangle" >
            <solid android:color="@android:color/transparent"/>
            <stroke android:width="1px" android:color="#77ffffff" />
            <corners android:radius="5dp" ></corners>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#11FFFFFF"/>
            <corners android:radius="5dp" ></corners>
        </shape>
    </item>
</layer-list>