How to show one layout on top of the other programmatically in my case?

Question

My main layout main.xml simply contains two LinearLayouts:

• The 1st LinearLayout hosts a VideoView and a Button,
• The 2nd LinearLayout hosts an EditText, and this LinearLayout has set the visibility value to "GONE" (android:visibility="gone")

like below:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"         android:layout_height="fill_parent"      android:layout_width="fill_parent"         android:orientation="vertical" >     <LinearLayout          android:id="@+id/first_ll"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:orientation="horizontal"      >         <VideoView              android:id="@+id/my_video"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_weight="9"         />          <Button             android:id="@+id/my_btn"             android:layout_width="30dip"              android:layout_height="30dip"             android:layout_gravity="right|bottom"                 android:layout_weight="1"         />      </LinearLayout>      <LinearLayout          android:id="@+id/second_ll"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:paddingTop="2dip"          android:visibility="gone"     >         <EditText              android:id="@+id/edit_text_field"             android:layout_height="40dip"             android:layout_width="fill_parent"             android:layout_weight="5"             android:layout_gravity="center_vertical"         />      </LinearLayout> </LinearLayout> 

I successfully implemented the feature that when the Button (with id my_btn) is pressed, the 2nd LinearLayout with EditText field is shown, with the following Java code:

LinearLayout secondLL = (LinearLayout) findViewById(R.id.second_ll);  Button myBtn = (Button) findViewById(R.id.my_btn); myBtn.setOnClickListener(new OnClickListener(){     @Override     public void onClick(View v){         int visibility = secondLL.getVisibility();          if(visibility==View.GONE)             secondLL.setVisibility(View.VISIBLE);      } });  

With the above Java code, the 2nd LinearLayout with EditText is shown like appending below the 1st LinearLayout which makes sense.

BUT, What I need is: when Button(id: my_btn) is pressed, the 2nd LinearLayout with EditText is shown on top of the 1st LinearLayout, which looks like the 2nd LinearLayout with EditText is rising from the bottom of screen, and the 2nd LinearLayout with EditText only occupy part of the screen from bottom, that's the 1st LinearLayout still visible, like the image below showed:

So, when Button(id: my_btn) is pressed how to show the 2nd LinearLayout with EditText on top of the 1st LinearLayout instead of appending 2nd LinearLayout below 1st LinearLayout programmatically?

Answer 1

Use a FrameLayout with two children. The two children will be overlapped. This is recommended in one of the tutorials from Android actually, it's not a hack...

Here is an example where a TextView is displayed on top of an ImageView:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:layout_width="fill_parent"   android:layout_height="fill_parent">    <ImageView       android:layout_width="fill_parent"      android:layout_height="fill_parent"       android:scaleType="center"     android:src="@drawable/golden_gate" />    <TextView     android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:layout_marginBottom="20dip"     android:layout_gravity="center_horizontal|bottom"      android:padding="12dip"      android:background="#AA000000"     android:textColor="#ffffffff"      android:text="Golden Gate" />  </FrameLayout>