Overlapping Views in Android

Question

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>

What you've got should work -- Are you sure the Gallery has visible contents and that the navigmaske drawable is a PNG with transparency? — Reto Meier, Jun 07 '09 at 17:09
Yes, the gallery is visibile without the overlay and I'm sure that the PNG is transparent — Alexander Stolz, Jun 07 '09 at 20:45

score 71 · Accepted Answer · edited Oct 02 '13 at 23:00

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.

Nice! I tried setting an ImageView background to #0000 (and @android:color/transparent) … to no avail. If I try to fade it (alpha from 1.0 down to 0.0) it fades to black instead of fading to transparent. This is on Android 2.0. — Joe D'Andrea, Dec 15 '09 at 03:19
A-ha! I was using LinearLayout. I changed it to Relative, then put the ImageView last. Now the fade "just works" … yay! Thanks tons for the code/tip. That cued me as to my goof. — Joe D'Andrea, Dec 15 '09 at 03:39
Hi im using same xml layout coding but my transparent image is not displayed.It shows only black screen. Anything i want to add in my code. — David, Nov 26 '10 at 12:58
Considering the functionality, I'd say `FrameLayout` should be preferred in general for such purposes, for the sake of the much lower layout overhead. However, for API < 11, FrameLayout can't handle the above combination of propagating the second child's height to the first child correctly, so `RelativeLayout` is your only option in this case; [see here](http://stackoverflow.com/q/15780884/1856738). — class stacker, Apr 04 '13 at 06:11

score 9 · Answer 2 · edited Apr 26 '12 at 10:05

9

Also, take a look at FrameLayout, that's how the Camera's Gallery application implements the Zoom buttons overlay.

edited Apr 26 '12 at 10:05

Lucifer

29,392
25
90
143

answered Jun 08 '09 at 13:45

reflog

7,587
1
42
47

1

I've always gone for `FrameLayout` which I find perfect for such purposes. However, I only now found out that prior to API 11, `FrameLayout` fails to propagate the maximum measured height to all of its children, [see here](http://stackoverflow.com/q/15780884/1856738). Hence, for supporting Android 2, one has to use `RelativeLayout` unless one goes for a predetermined height. – class stacker Apr 04 '13 at 06:16

score 7 · Answer 3 · edited Jul 25 '22 at 12:29

7

If you want to add your custom Overlay screen on Layout, you can create a Custom Linear Layout and get control of drawing and key events. You can my tutorial- Overlay on Android Layout- http://prasanta-paul.blogspot.com/2010/08/overlay-on-android-layout.html

edited Jul 25 '22 at 12:29

Ramesh R

7,009
4
25
38

answered Aug 12 '10 at 03:43

Prasanta

71
1
1

Certainly a nice experiment, thank you for sharing the code. But this can simply be achieved with `FrameLayout` unless your specific scenario is affected by a pre-API 11 bug, [see here](http://stackoverflow.com/q/15780884/1856738), in which case you still can use `RelativeLayout`. – class stacker Apr 04 '13 at 06:13

score 1 · Answer 4 · answered Nov 06 '14 at 13:54

1

The simples way arround is to put -40dp margin at the buttom of the top imageview

answered Nov 06 '14 at 13:54

алекс кей

821
9
11

score 1 · Answer 5 · edited Jul 25 '22 at 12:30

1

A visible gallery changes visibility which is how you get the gallery over other view overlaps. the Home sample app has some good examples of this technique.

edited Jul 25 '22 at 12:30

Ramesh R

7,009
4
25
38

answered Jun 07 '09 at 17:31

Fred Grott

3,505
1
23
18

score 0 · Answer 6 · answered Aug 29 '21 at 16:03

Now with Jetpack Compose in android, you should use Box for overlapping views. Example.

Box(modifier = Modifier.fillMaxWidth().fillMaxHeight()){
        RecipesList(viewModel.recipes.value)
        Snackbar()
    }

Here RecipesList and Snackbar are composabes positioned one on top of the other in the composition order

Check out this for Jetpack Compose samples - https://androidlearnersite.wordpress.com/2021/08/03/jetpack-compose-1-0-0-sample-codes/

score -3 · Answer 7 · answered Jun 07 '09 at 15:04

-3

Yes, that is possible. The challenge, however, is to do their layout properly. The easiest way to do it would be to have an AbsoluteLayout and then put the two images where you want them to be. You don't need to do anything special for the transparent png except having it added later to the layout.

answered Jun 07 '09 at 15:04

Prashast

5,645
3
30
31

17

AbsoluteLayout is now depreciated. Nobody should use it anymore. – num1 Jan 15 '12 at 21:53

Overlapping Views in Android

7 Answers7

Linked