First view above / overlapping second in LinearLayout

RileyE picture RileyE · Jun 7, 2013 · Viewed 28.9k times · Source

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

Tony Vu picture Tony Vu · Oct 16, 2014

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();