Overlapping controls in LinearLayout

Question

Here's a screenshot of the issue:

The bottom buttons need to have their heights respected..

Here's what I've tried: layout_below height constraints

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/blackish"
    >

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:gravity="center"
        android:layout_marginRight="10dp"
        android:columnWidth="100dp"
        android:numColumns="auto_fit"
        android:verticalSpacing="50dp"
        android:horizontalSpacing="10dp"
        android:stretchMode="spacingWidthUniform"
        android:background="@color/blackish"
        android:layout_toStartOf="@+id/bottomButtons"
        />


    <RelativeLayout
        android:id="@+id/bottomButtons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/gridview"
        >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="button1"
            android:layout_alignParentBottom="true"
            android:id="@+id/button" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:text="button2"
            android:layout_alignParentBottom="true"
            android:id="@+id/button2" />

    </LinearLayout>
    </RelativeLayout>
</android.support.constraint.ConstraintLayout>

I imagine the issue is the GridView has "match parent" as it's height, I couldn't seem to use google well enough to find "match until buttons are reached."

https://stackoverflow.com/questions/7519160/android-overlay-a-view-ontop-of-everything — RonTLV, Aug 22 '18 at 16:53

score 0 · Answer 1 · answered Aug 22 '18 at 17:00

You can use LinearLayout instead of ConstraintLayout,and give android:layout_weight="1" to gridview as below.

eg.-

<?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:background="@color/blackish"
android:orientation="vertical"
>

<GridView
    android:layout_weight="1"
    android:id="@+id/gridview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentTop="true"
    android:gravity="center"
    android:layout_marginRight="10dp"
    android:columnWidth="100dp"
    android:numColumns="auto_fit"
    android:verticalSpacing="50dp"
    android:horizontalSpacing="10dp"
    android:stretchMode="spacingWidthUniform"
    android:background="@color/blackish"
    android:layout_toStartOf="@+id/bottomButtons"
    />


<RelativeLayout
    android:id="@+id/bottomButtons"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/gridview"
    >

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text="button1"
        android:layout_alignParentBottom="true"
        android:id="@+id/button" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:text="button2"
        android:layout_alignParentBottom="true"
        android:id="@+id/button2" />

</LinearLayout>
</RelativeLayout>
</LinearLayout>

score 0 · Answer 2 · answered Aug 22 '18 at 17:01

You had mixed attributes from various types of layouts that conflicted or were not applicable. Try this:

<?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"
    android:background="@color/blackish">

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:gravity="center"
        android:layout_marginEnd="10dp"
        android:layout_marginBottom="1dp"
        android:columnWidth="100dp"
        android:numColumns="auto_fit"
        android:verticalSpacing="50dp"
        android:horizontalSpacing="10dp"
        android:stretchMode="spacingWidthUniform"
        android:background="@color/blackish"
        android:layout_above="@+id/bottomButtons" />


    <RelativeLayout
        android:id="@+id/bottomButtons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:text="button1"
                android:id="@+id/button" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:text="button2"
                android:id="@+id/button2" />

        </LinearLayout>
    </RelativeLayout>
</RelativeLayout>

score 0 · Answer 3 · answered Aug 22 '18 at 17:22

ConstraintLayouts alone is powerful enough to make a responsive layout without having a nested hierarchy. I have edited your XML, the layout can be implemented without having a need of LinearLayout or RelativeLayout.

Just change the height of GridView to 0dp, set the vertical weight to 1 and add constraints for bottom and top as below for the widgets.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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"
    android:background="@color/blackish">

    <GridView
        android:id="@+id/gridview"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:background="@color/blackish"
        android:columnWidth="100dp"
        android:gravity="center"
        android:horizontalSpacing="10dp"
        android:numColumns="auto_fit"
        android:stretchMode="spacingWidthUniform"
        android:verticalSpacing="50dp"
        app:layout_constraintVertical_weight="1"
        app:layout_constraintBottom_toTopOf="@id/button2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="5dp"
        android:text="button1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/button2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="5dp"
        android:text="button2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toEndOf="@id/button" />
</android.support.constraint.ConstraintLayout>

Overlapping controls in LinearLayout

3 Answers3