Eclipse/editor shows a transparent View, but when deploying to device - no transparency

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

The box around the green circle is transparent

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

enter image description here

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

What have you tried to do? Comment out first ImageView - still black? No? Then add android:background="@android:color/transparent" — Leonidos, Jan 10 '13 at 21:24
Set tools:context. Then exlipse will your correct theme to render your layout. http://stackoverflow.com/questions/11078487/whats-toolscontext-in-android-layout-files — Leonidos, Jan 10 '13 at 21:26
@Leonidos I tried removing ImageViews and some other stuff, didnt keep track if all the things I tried, been at it for hours now... — Ted, Jan 10 '13 at 21:40

score 0 · Accepted Answer · edited Sep 09 '21 at 20:11

0

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>

edited Sep 09 '21 at 20:11

halfer

19,824
17
99
186

answered Jan 10 '13 at 21:55

Ted

19,727
35
96
154

I have just found the same thing ) only API 17 in eclipse shows thransparency. Other API levels use black color as default fill color for shapes – Leonidos Jan 10 '13 at 21:57
The problem is that now I cannot create the "bevel effect" anymore... The strokes overlap, so its only one colour now... – Ted Jan 10 '13 at 22:32
I think you can make it with 9-patch image – Leonidos Jan 10 '13 at 22:39
Yes, problem with 9-patches is that... they are images =) I'd prefer not to use images for these sort of things, seems so overkill. I cannot grasp why the Android team hasnt added a simple android:stroke-left="1dp" or something like that, so you can define each bordes color, alpha etc... – Ted Jan 10 '13 at 23:56
Regarding 9-patches: http://stackoverflow.com/questions/14270042/9-patch-drawable-behaving-badly-weird-artefacts-what-is-wrong-here/14270354#14270354 – Ted Jan 11 '13 at 08:26

Eclipse/editor shows a transparent View, but when deploying to device - no transparency

1 Answers1