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:

enter image description here

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?

Alexandru Cristescu · Accepted Answer · 2014-01-10T15:57:43.133

189

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>

Here is the result

edited Jan 10 '14 at 15:57

answered Jul 14 '11 at 08:44

Alexandru Cristescu

3,898
3
19
22

15

In this code, what makes the `TextView` on top? is it because it comes second in the listing? – Adam Johns Aug 14 '14 at 01:45
16

As FrameLayout docs say: Child views are drawn in a stack, with the most recently added child on top. Considering that xml layout is parsed from top to bottom then TextView item is drawn on top as the last one in the xml. – Maciej Pigulski Oct 08 '14 at 12:05
I am trying this but with Scrollview as FrameLayout's 1st child and TextView as 2nd child. But here it is not showing the scrollview in the backgroung. Any help. – Raju Nov 13 '14 at 10:21
1

Thank you brother! This answer was exactly what I'm looking for! Great! @Raju: Place the following FrameLayout before the LAST closing tag of your layout (whole screen)... Now reference it and do your onClick- or onTouch-method as usual. – Martin Pfeffer Apr 15 '15 at 19:06
1

FrameLayout is the right choice here, but it's also worth noting that RelativeLayout would behave the same way in having child views stack on top of each other as they're added. (I was new to Android and wrongly thought that only FrameLayout could accomplish stacking after reading this answer. Whoopsie) – Luke May 13 '17 at 21:39
True, but RelativeLayout are more expensive, so I wouldn't use them for this simple application. For example, RelativeLayouts do two passes of measuring when laying out the components. Now if you start nesting them that becomes a problem since the number of measurements increases exponentially (e.g. 3 nested measure the views 8 times). Just something to consider, particularily if placing the layout in a recyclerview with many items. – Alexandru Cristescu May 14 '17 at 22:33

Raj Yadav · Answer 2 · 2018-03-05T07:56:00.610

FrameLayout is not the better way to do this:

Use RelativeLayout instead. You can position the elements anywhere you like. The element that comes after, has the higher z-index than the previous one (i.e. it comes over the previous one).

Example:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimary"
        app:srcCompat="@drawable/ic_information"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is a text."
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="8dp"
        android:padding="5dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:background="#A000"
        android:textColor="@android:color/white"/>
</RelativeLayout>

score 4 · Answer 3 · answered Apr 15 '15 at 19:12

The answer, given by Alexandru is working quite nice. As he said, it is important that this "accessor"-view is added as the last element. Here is some code which did the trick for me:

        ...

        ...

            </LinearLayout>

        </LinearLayout>

    </FrameLayout>

</LinearLayout>

<!-- place a FrameLayout (match_parent) as the last child -->
<FrameLayout
    android:id="@+id/icon_frame_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</FrameLayout>

</TabHost>

in Java:

final MaterialDialog materialDialog = (MaterialDialog) dialogInterface;

FrameLayout frameLayout = (FrameLayout) materialDialog
        .findViewById(R.id.icon_frame_container);

frameLayout.setOnTouchListener(
        new OnSwipeTouchListener(ShowCardActivity.this) {

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

3 Answers3

Linked