First view above / overlapping second in LinearLayout

Question

Is it possible to show the first view in a LinearLayout overlapping the second?

I would like to layout my views like so:

<LinearLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_alignParentRight="true" >

    <TextView
        android:id="@+id/firstTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrapContent" />

    <TextView
        android:id="@+id/secondTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

But I need my first view from the layout, firstTextView, to be placed on top of (overlapping) secondTextView. Is this possible? I am using the LinearLayout because I'm also playing with the margins to get an overlapping effect.

Answer 1

What worked for me and probably will work for you is that:

1. Wrap your 2 TextViews with RelativeLayout instead of LinearLayout and set android:clipChildren="false". This will prevent the overlapping portion from being clipped.
2. Layout the 2nd TextView below the first TextView
3. In the code, call bringToFront() on the first TextView. By default, the first textview is drawn first and will be below the second textview. Calling bringToFront() will change that order.

So the layout can be something like this:

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

<TextView
    android:id="@+id/firstTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#00000000"
    android:text="First View" />

<TextView
    android:id="@+id/secondTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/firstTextView"
    android:background="#00000000"
    android:layout_marginTop="-13dp"
    android:text="Second View"/>
</RelativeLayout>

and:

TextView firstTextView = (TextView)findViewById(R.id.firstTextView);
firstTextView.bringToFront();

Answer 2

If all you want is to overlap the two views vertically, then use this XML:

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

    <TextView
        android:id="@+id/firstTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00000000"
        android:text="First View" />

    <TextView
        android:id="@+id/secondTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00000000"
        android:layout_marginTop="-13dp"
        android:text="Second View"/>
</LinearLayout>

Answer 3

Or you can stick with Linear Layout, but place a RelativeLayout within it, as a child. You can than place your TextViews withing the RelativeLayout, so they'll inheret properties from RelativeLayout. You can then still use your LinearLayout for other views. http://developer.android.com/reference/android/widget/RelativeLayout.html

Answer 4

By assigning margin value "<0" we can overlap the views. But Relative layout is preferable when we need o overlap views.

Answer 5

I know this is an old question, but in case anyone is looking for this again as I was today - I have a dynamically build layout so I don't really have a specific xml rather a separate view I want to add ontop of my stack depending on certain settings; @GabeSechan 's comment let me in the right direction, I used -bottom margin to bring the second view up, inserted the new view at position 0

LinearLayout stack = (LinearLayout) findViewById(R.id.mystackview);//get your stack

stack.addView(getView(count), 0); //place it at the top

public View getView(){
        TextView view = menuLayout.findViewById(R.id.myview);

    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(size, size);
    layoutParams.setMargins(0, 0, 0, -size));//this pulls the view back up to overlap evenly
    layoutParams.setMarginEnd(0);
    layoutParams.setMarginStart(size);

    if (view.getParent() != null)
        ((ViewGroup) view.getParent()).removeView(view);
    view.setLayoutParams(layoutParams);
    view.setZ(1);//this then sets the zindex above the other layout and hey presto, almost a simple css style fix

    return view;
}

Answer 6

The Android System leaves you an entrance to change children's drawing order.

1. Define a custom LinearLayout called ReverseDrawingOrderLLayout
2. Enable isChildrenDrawingOrderEnabled = true
3. Override getChildDrawingOrder to change your children's drawing order
4. Put your layout into the ReverseDrawingOrderLLayout

    <com.example.widget.ReverseDrawingOrderLLayout

        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <TextView
            android:layout_marginRight="-10dp"
            android:background="@color/b_normal"
            android:layout_width="120dp"
            android:layout_height="100dp" />

        <TextView
            android:background="@color/r_normal"
            android:layout_marginTop="10dp"
            android:layout_marginRight="-10dp"
            android:layout_width="120dp"
            android:layout_height="100dp" />

        <TextView
            android:background="@color/g_normal"
            android:layout_marginTop="20dp"
            android:layout_width="120dp"
            android:layout_height="100dp" />
    </com.example.widget.ReverseDrawingOrderLLayout>

Result