My main layout main.xml simply contains two LinearLayouts:
LinearLayout
hosts a VideoView
and a Button
,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?
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>