Linear layout overlapping another linear layout

Question

I have two LinearLayouts in a RelativeLayout the problem is that the top linear layout is overlapping the bottom one a little bit.I tried everything. Please Somebody help me.Below is my XML File Or tell me how to do it programmatically. Like subtracting height of one linear layout from another.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:weightSum="1">

        <FrameLayout
            android:id="@+id/page_fragment"
            android:layout_width="150dp"
            android:layout_height="match_parent"
            android:background="@color/spinner_text_color" />

        <FrameLayout
            android:id="@+id/detail_fragment"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@color/white_bg"
            android:layout_weight="1"></FrameLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/spinner_text_color">

        <Button
            android:id="@+id/filterResetButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=".50"
            android:textColor="@color/white_bg"
            android:textAllCaps="false"
            android:background="@drawable/light_button_click"
            android:text="Reset All" />

        <Button
            android:id="@+id/filterApplyButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=".50"
            android:textAllCaps="false"
            android:background="@drawable/submit_order_click"
            android:textColor="@color/white_bg"
            android:text="Apply" />

    </LinearLayout>

</RelativeLayout>

add `layout_weight="1"` to both linear layouts. remove `weight_sum` and make them both `layout_height="match_parent"` — Opiatefuchs, Apr 27 '16 at 12:55
It's not working if i set both heights to match_parent for some reason the bottom layout is going up. — rakesh, Apr 27 '16 at 13:53
just look at it again. layout_weight: both must be 1, then layout_height will work with match_parent.... — Opiatefuchs, Apr 27 '16 at 13:54
this is also for your FrameLayouts inside the linearLayout. For one you set layout_weight="1", but not for the other. To set views to an equal size, they need the same value on layout_weight.... — Opiatefuchs, Apr 27 '16 at 13:56
No man it's not working....can u please test it in studio and let me know if t's working for u. — rakesh, Apr 27 '16 at 13:58
sorry @rakesh, now I am understanding your problem. I tried it at home and I just misunderstood you. You can do it easily in a linear layout as parent, and then the layout_weight attributes will work with a little change. I can give you an example later that evening (in 9 hours :) ) if it´s not fixed now..... — Opiatefuchs, Apr 28 '16 at 06:17
Thanks man...i got it. Used layout_weight="1" both the layouts and also used layout_above attribute. working fine. — rakesh, Apr 28 '16 at 16:48

score 2 · Answer 1 · answered Apr 27 '16 at 12:54

Try this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:weightSum="1"
        android:layout_above="@+id/linearLayout">

        <FrameLayout
            android:id="@+id/page_fragment"
            android:layout_width="150dp"
            android:layout_height="match_parent"
            android:background="@color/colorPrimary" />

        <FrameLayout
            android:id="@+id/detail_fragment"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@color/white"
            android:layout_weight="1"></FrameLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary"
        android:id="@+id/linearLayout">

        <Button
            android:id="@+id/filterResetButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=".50"
            android:textColor="@color/white"
            android:textAllCaps="false"
            android:background="@drawable/ic_authy"
            android:text="Reset All" />

        <Button
            android:id="@+id/filterApplyButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=".50"
            android:textAllCaps="false"
            android:background="@drawable/ic_arrow_32"
            android:textColor="@color/white"
            android:text="Apply" />

    </LinearLayout>

</RelativeLayout>

What's the logic of posting an answer while exactly same answer was posted by someone before your posting? — Kanchan Chowdhury, Apr 27 '16 at 13:00
yep...very interesting....exact the same post without an explenation. 2 Upvotes and the other one not? strange.... — Opiatefuchs, Apr 28 '16 at 06:13

score 2 · Answer 2 · answered Apr 27 '16 at 12:56

2

Use Relative Layout properties like

layout_below and layout_above

answered Apr 27 '16 at 12:56

Abhinav Pawar

421
3
12

Kanchan Chowdhury · Answer 3 · 2016-04-27T13:08:11.790

0

Try following code:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/bottomLayout"
    android:orientation="horizontal"
    android:weightSum="1">

    <FrameLayout
        android:id="@+id/page_fragment"
        android:layout_width="150dp"
        android:layout_height="match_parent"
        android:background="@color/spinner_text_color" />

    <FrameLayout
        android:id="@+id/detail_fragment"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@color/white_bg"
        android:layout_weight="1"></FrameLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/bottomLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@color/spinner_text_color">

    <Button
        android:id="@+id/filterResetButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight=".50"
        android:textColor="@color/white_bg"
        android:textAllCaps="false"
        android:background="@drawable/light_button_click"
        android:text="Reset All" />

    <Button
        android:id="@+id/filterApplyButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight=".50"
        android:textAllCaps="false"
        android:background="@drawable/submit_order_click"
        android:textColor="@color/white_bg"
        android:text="Apply" />

  </LinearLayout>

</RelativeLayout>

If the layouts are large and can't be accommodated in a single a screen then you should wrap both the linear layouts in a scrollView. Let me know if you face problem in using scrollView.

edited Apr 27 '16 at 13:08

answered Apr 27 '16 at 12:51

Kanchan Chowdhury

433
1
5
15

I tried this before not working...as per scrollview I want to show "reset all" and "apply" buttons all the time i don't want the user to scroll to find them as this is a filter options activity. I know it can be done programatically by subtracting one linear layout from other but i just don't know how to do it as i am a beginner. – rakesh Apr 27 '16 at 13:26
If you want the buttons to not scroll then you should wrap only the top layout in scrollview. And in the scrollview use the property android:layout_above="@+id/bottomLayout" – Kanchan Chowdhury Apr 27 '16 at 13:35
Ok. I am sorry i was not clear earlier. The framelayout's contains listviews and the problem occuring is that the last item in the listview is not being seen as that part is overlapping with he bottom layout. so even if i wrap the linear layout in a scroll view it doesn't solve my problem. – rakesh Apr 27 '16 at 13:41
If frame layouts contain listview then you can not wrap the top layout inside scroll view since listview is also a type of scrollview and a scrollview can not be inside another scrollview. – Kanchan Chowdhury Apr 27 '16 at 13:47
Ok. So i tried like you said but for some reason the scrollview is occupying only top 15 % of the screen there is a large gap b/w scrollview and the buttons – rakesh Apr 27 '16 at 13:49
Yes it will happen if you use a listview or a scrollview inside another scrollview. You can't do that. – Kanchan Chowdhury Apr 27 '16 at 13:50
can you give me an example of how to do it programmatically like get the height of the top layout and for height of the bottom layout subtract match parent with the height of top layout. – rakesh Apr 27 '16 at 13:56
Try the accepted answer : [http://stackoverflow.com/questions/21926644/get-height-and-width-of-a-layout-programatically] – Kanchan Chowdhury Apr 27 '16 at 14:03

score 0 · Answer 4 · answered Jan 11 '17 at 09:18

This is very easy you just have to set id to the Linear Layout at bottom like

**android:id="@+id/bottom_linearlayout"**

and set the upper Linear Layout "above" over the bottom ones "id", like this

**android:layout_above="@id/bottom_linearlayout"**

`<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_above="@id/bottom_linearlayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:weightSum="1">

        <FrameLayout
            android:id="@+id/page_fragment"
            android:layout_width="150dp"
            android:layout_height="match_parent"
            android:background="@color/spinner_text_color" />

        <FrameLayout
            android:id="@+id/detail_fragment"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@color/white_bg"
            android:layout_weight="1"></FrameLayout>
    </LinearLayout>

    <LinearLayout
        android:id="@+id/bottom_linearlayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/spinner_text_color">

        <Button
            android:id="@+id/filterResetButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=".50"
            android:textColor="@color/white_bg"
            android:textAllCaps="false"
            android:text="Reset All" />

        <Button
            android:id="@+id/filterApplyButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=".50"
            android:textAllCaps="false"
            android:textColor="@color/white_bg"
            android:text="Apply" />

    </LinearLayout>

</RelativeLayout>`

score 0 · Answer 5 · answered Aug 31 '17 at 12:04

you parent layout is linear layout so child is overlap each other

use my code

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:weightSum="1"
        android:layout_weight="90">

        <FrameLayout
            android:id="@+id/page_fragment"
            android:layout_width="150dp"
            android:layout_height="match_parent"
            android:background="@color/spinner_text_color" />

        <FrameLayout
            android:id="@+id/detail_fragment"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@color/white_bg"
            android:layout_weight="1"></FrameLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="10"
        android:layout_alignParentBottom="true"
        android:background="@color/spinner_text_color">

        <Button
            android:id="@+id/filterResetButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=".50"
            android:textColor="@color/white_bg"
            android:textAllCaps="false"
            android:background="@drawable/light_button_click"
            android:text="Reset All" />

        <Button
            android:id="@+id/filterApplyButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=".50"
            android:textAllCaps="false"
            android:background="@drawable/submit_order_click"
            android:textColor="@color/white_bg"
            android:text="Apply" />

    </LinearLayout>

</LinearLayout>

Linear layout overlapping another linear layout

5 Answers5