Search code examples
androidviewandroid-relativelayout

Overlapping Views in Android


Is it possible to have overlapping views in Android? I would like to have an ImageView with a transparent png in the front and another view in the background.

edit:

This is what I have at the moment, the problem is that the image in the imageView is not transparent, the parts that should be transparent are just black.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/gallerylayout"
>
<Gallery android:id="@+id/overview"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    />

 <ImageView android:id="@+id/navigmaske"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/navigmask"
    /> 

</RelativeLayout>

edit:

I got it to work, it was a theme file from another programmer on the team. Just changed this

<item name="android:background">#FF000000</item>

to this

<item name="android:background">#00000000</item>

Solution

  • Android handles transparency across views and drawables (including PNG images) natively, so the scenario you describe (a partially transparent ImageView in front of a Gallery) is certainly possible.

    If you're having problems it may be related to either the layout or your image. I've replicated the layout you describe and successfully achieved the effect you're after. Here's the exact layout I used.

    <RelativeLayout 
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:id="@+id/gallerylayout"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">
      <Gallery
        android:id="@+id/overview"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
      />
      <ImageView
        android:id="@+id/navigmaske"
        android:background="#0000"      
        android:src="@drawable/navigmask"
        android:scaleType="fitXY"
        android:layout_alignTop="@id/overview"
        android:layout_alignBottom="@id/overview"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content"
      />
    </RelativeLayout>
    

    Note that I've changed the parent RelativeLayout to a height and width of fill_parent as is generally what you want for a main Activity. Then I've aligned the top and bottom of the ImageView to the top and bottom of the Gallery to ensure it's centered in front of it.

    I've also explicitly set the background of the ImageView to be transparent.

    As for the image drawable itself, if you put the PNG file somewhere for me to look at I can use it in my project and see if it's responsible.