how to implement this layout design where views are on top of another view

Question

I have to code a layout, where on the view overlaps on another view. In the design when I click on bt1 Linearlayout will we visible on exactly below the bt1 with small animation. I can design the animation and everything of the layout except on a thought how to put the LinearLayout on bt3 and bt4.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background">

<TableLayout
    android:id="@+id/lv1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/custom_toolbar"
    android:layout_marginTop="5dp"
    android:orientation="horizontal">

    <TableRow>

        <Button
            android:id="@+id/bt1"
            android:layout_width="0dp"
            android:layout_height="35dp"
            android:layout_marginEnd="2.5dp"
            android:layout_marginStart="3dp"
            android:layout_weight="1"
            android:background="@color/darkgrey"
            android:fontFamily="@font/brandon_re"
            android:text="button1"
            android:textColor="@color/defaultWhite"
            android:textSize="15dp" />

        <Button
            android:id="@+id/bt2"
            android:layout_width="0dp"
            android:layout_height="35dp"
            android:layout_marginEnd="3dp"
            android:layout_marginStart="2.5dp"
            android:layout_weight="1"
            android:background="@color/darkgrey"
            android:fontFamily="@font/brandon_re"
            android:text="button2"
            android:textColor="@color/defaultWhite"
            android:textSize="15dp" />
    </TableRow>
</TableLayout>

<LinearLayout
    android:id="@+id/lv2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/lv1"
    android:layout_alignBottom="@+id/lv1">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="130dp"

        />
</LinearLayout>

<Button
    android:id="@+id/bt3"
    android:layout_width="match_parent"
    android:layout_height="35dp"
    android:layout_marginEnd="3dp"
    android:layout_marginStart="2.5dp"
    android:layout_weight="1"
    android:background="@color/darkgrey"
    android:fontFamily="@font/brandon_re"
    android:layout_below="@+id/lv1"
    android:layout_marginTop="20dp"
    android:text="button3"
    android:textColor="@color/defaultWhite"
    android:textSize="15dp" />
<Button
    android:id="@+id/bt4"
    android:layout_width="match_parent"
    android:layout_height="35dp"
    android:layout_marginEnd="3dp"
    android:layout_marginStart="2.5dp"
    android:layout_weight="1"
    android:background="@color/darkgrey"
    android:fontFamily="@font/brandon_re"
    android:layout_below="@+id/bt3"
    android:layout_marginTop="20dp"
    android:text="button4"
    android:textColor="@color/defaultWhite"
    android:textSize="15dp" />
</RelativeLayout>

Possible duplicate of [Overlapping Views in Android](https://stackoverflow.com/questions/961944/overlapping-views-in-android) — Tomer Shemesh, Sep 04 '18 at 14:03
@reiner.luke example picture is not enough to ask question in stack overflow.. — Gowthaman M, Sep 04 '18 at 14:08

Mohamed Mohaideen AH · Accepted Answer · 2018-09-04T15:51:40.307

Use layout_below property of relative layout.

Change your linear layout code to after button code & add buttons inside one layout.

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    >
... 
/* buttons */

</RelativeLayout>     

<LinearLayout
        android:id="@+id/lv2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/lv1">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="130dp"

            />
    </LinearLayout>

Complete Code

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TableLayout
        android:id="@+id/lv1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:orientation="horizontal">

        <TableRow>

            <Button
                android:id="@+id/bt1"
                android:layout_width="0dp"
                android:layout_height="35dp"
                android:layout_marginEnd="2.5dp"
                android:layout_marginStart="3dp"
                android:layout_marginLeft="3dp"
                android:layout_marginRight="2.5dp"
                android:layout_weight="1"
                android:text="button1"
                android:textSize="15dp" />

            <Button
                android:id="@+id/bt2"
                android:layout_width="0dp"
                android:layout_height="35dp"
                android:layout_marginEnd="3dp"
                android:layout_marginStart="2.5dp"
                android:layout_marginLeft="3dp"
                android:layout_marginRight="2.5dp"
                android:layout_weight="1"
                android:text="button2"
                android:textSize="15dp" />
        </TableRow>
    </TableLayout>


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

    <Button
        android:id="@+id/bt3"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:layout_marginEnd="3dp"
        android:layout_marginStart="2.5dp"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="2.5dp"
        android:layout_weight="1"
        android:layout_marginTop="20dp"
        android:text="button3"
        android:textSize="15dp" />

    <Button
        android:id="@+id/bt4"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        android:layout_marginEnd="3dp"
        android:layout_marginStart="2.5dp"
        android:layout_marginLeft="3dp"
        android:layout_marginRight="2.5dp"
        android:layout_weight="1"
        android:layout_below="@+id/bt3"
        android:layout_marginTop="20dp"
        android:text="button4"
        android:textSize="15dp" />

</RelativeLayout>

<LinearLayout
    android:id="@+id/lv2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/white"
    >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="130dp"

        />
</LinearLayout>

</RelativeLayout>

You must use background of overlap layout to see overlaping..

If is use `Relativelayout` i would get the position of `TextView` where I want. But it will not overlap on the `bt3` and `bt4`. — kathode, Sep 04 '18 at 15:47
Did you put `bt3` & `btn4` inside relative layouts & place your overlap linear layout code below.. — Mohamed Mohaideen AH, Sep 04 '18 at 15:49

score -2 · Answer 2 · edited Sep 04 '18 at 19:50

-2

First of all, you have to use more than one layout in your main layout for this purpose. First, make your parent layout orientation vertical then

In the first layout design your button. in the second layout View.

edited Sep 04 '18 at 19:50

user229044

232,980
40
330
338

answered Sep 04 '18 at 14:11

Vishal Sharma

1,051
2
8
15

1

I posted code for you to inspect. please tell me what i am doing wrong. I need `LinearLayout` on top of `bt3` and `bt4`. Just like it overlaps on one another. – kathode Sep 04 '18 at 14:22
1

Your answers have a *lot* of formatting problems, please take some time to learn how Markdown works. Specifically, please try to indent your code correctly, and please stop using the `>` character to highlight parts of your answers, it's for blockquotes. – user229044 Sep 04 '18 at 19:53

how to implement this layout design where views are on top of another view

2 Answers2