How would I display one view as an overlay of another?

Question

I have two views that take the whole screen and I want to display both views at the same time, one on top of the other. My layout looks like this:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <WebView 
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    />

    <org.example.myCustomView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    />

</LinearLayout>

Note that myCustomView uses onDraw (this method last statement is invalidate()) to draw custom graphics. The problem I am getting is that it only displays myCustomView, WebView is hidden. I tried to change the background colour of mycustomView to transparent but this makes no difference.

I would also like to have the ability to make myCustomView as an overlay on WebView or vice versa.

Solution 1

Use a RelativeLayout for starters.

You could use the ViewGroup.addView(View child, int index, ViewGroup.LayoutParams params) or a variant along with ViewGroup.removeView(View view) or ViewGroup.removeViewAt(int index).

This would obviously require you to inflate the views manually using LayoutInflater but you could keep a global reference to each after inflating and just flip between the two.

Solution 2

I'm not sure if you can do this when they are in the same xml file, but I know that if you move:

<org.example.myCustomView
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"   
    android:layout_height="fill_parent" />

to another xml file, and create another activity. set the content view to the xml file that contains the org.example.myCustomView and call that activity. in the manifest, when you add that activity, add a theme statement as so:

android:theme="@android:style/Theme.Dialog"

the full statement should look like this:

<activity android:name=".name_of_activity"  
    android:label="TextToBeOnTop"  
    android:theme="@android:style/Theme.Dialog">  
</activity>

the result will look like this (only it will be with your components instead):

although it mabey possible to do it when they are still in the same xml file. if it is possible, it would likely be done by leaving the manifest alone, and editing your costomeView to the following:

<org.example.myCustomView 
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    android:theme="@android:style/Theme.Dialog" />

(I added the theme statement into the CustomView )

if this isn't what you are looking for, than I would recoment something simmilar to what Nick Campion said, which was to change fillParent to wrapContent. you could do that, or you could choose what size you wanted it to be. here are two options you could use:

<org.example.myCustomView  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="50dip"  
    android:layout_height="50dip" /> 

(you could change "50dip" to whatever number you want as long as it ends with dip)

or:

<org.example.myCustomView  
    xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="wrap_content"  
    android:layout_height="wrap_content" />

Comments

[ace]

Thanks! I only changed LinearLayout to RelativeLayout and it worked. The other 2 answers did not work.

[Andrew Wyld]

FrameLayout is also good if you're not worried about positioning things relative to one another.

[RichieHH]

Overlay, which is his Q, is FrameLayout

[Potaito]

I found this (stackoverflow.com/a/6690607/2102122) solution to be much more reliable. The google documentation on crossfading two views (developer.android.com/training/animation/crossfade.html) also uses the FrameLayout to hold two views on top of each other.