Search code examples
androidxmlandroid-layoutandroid-studiogrid-layout

GridLayout not showing as I expect

Sorry, I'm not doing well with layouts. I'm trying to add a button, next to another button, next to some text fields. When I say the button is in column 3, on the preview it leaps of the screen to the right... what am I doing wrong?

enter image description here

<GridLayout
        android:id="@+id/mainGrid"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:columnCount="3"
        android:rowCount="8"
        android:layout_margin="16dp"
        android:layout_marginBottom="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"
        android:layout_marginEnd="16dp">

        <ListView
            android:id="@+id/itemListView"
            android:layout_width="match_parent"
            android:layout_height="350dp"
            android:layout_column="0"
            android:layout_columnSpan="3"
            android:layout_row="0" />

        <TextView
            android:id="@+id/Instructions"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:layout_columnSpan="3"
            android:layout_row="1"
            android:text="Enter details of item to add to you timer list below. Enter the times in seconds. The finish by refers to if you need an item to finish before the end, again in seconds." />

        <EditText
            android:id="@+id/itemName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:layout_columnSpan="2"
            android:layout_row="2"
            android:ems="10"
            android:hint="Item to add"
            android:inputType="textPersonName" />

        <EditText
            android:id="@+id/itemTime"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:layout_row="3"
            android:ems="10"
            android:hint="Time in seconds"
            android:inputType="time"
            android:nextFocusDown="@+id/finishTime"
            android:nextFocusForward="@+id/finishTime"
            android:nextFocusRight="@+id/finishTime" />

        <EditText
            android:id="@+id/finishTime"
            android:layout_width="120dp"
            android:layout_height="wrap_content"
            android:layout_column="0"
            android:layout_row="4"
            android:ems="10"
            android:hint="Seconds it needs to finish by"
            android:inputType="time" />

        <Button
            android:id="@+id/addItem"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_margin="16dp"
            android:layout_row="3"
            android:layout_rowSpan="2"
            android:onClick="addItem"
            android:padding="16dp"
            android:text="Add" />

        <Button
            android:id="@+id/timerButton"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_column="1"
            android:layout_margin="16dp"
            android:layout_row="5"
            android:layout_rowSpan="2"
            android:text="Start Timer" />


    </GridLayout>
</android.support.constraint.ConstraintLayout>

Solution

  • Please check below answer, i have added LinearLayout and weightSum to keep

    it like EditText -> Button -> Button.

    <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:id="@+id/mainGrid"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:weightSum="5" >

        <ListView
            android:id="@+id/itemListView"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="3"
            android:padding="5dp" />

        <TextView
            android:id="@+id/Instructions"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:layout_weight="0.7"
            android:gravity="start|left"
            android:padding="5dp"
            android:singleLine="false"
            android:text="Enter details of item to add to you timer list below. Enter the times in seconds. The finish by refers to if you need an item to finish before the end, again in seconds." />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1.3"
            android:orientation="horizontal"
            android:weightSum="2" >

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:orientation="vertical" >

                <EditText
                    android:id="@+id/itemName"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:ems="10"
                    android:hint="Item to add"
                    android:inputType="textPersonName" />

                <EditText
                    android:id="@+id/itemTime"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:ems="10"
                    android:hint="Time in seconds"
                    android:inputType="time"
                    android:nextFocusDown="@+id/finishTime"
                    android:nextFocusForward="@+id/finishTime"
                    android:nextFocusRight="@+id/finishTime" />

                <EditText
                    android:id="@+id/finishTime"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:ems="10"
                    android:hint="Seconds it needs to finish by"
                    android:inputType="time" />
            </LinearLayout >

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:orientation="horizontal" >

                <Button
                    android:id="@+id/addItem"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_margin="16dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:onClick="addItem"
                    android:padding="16dp"
                    android:text="Add" />

                <Button
                    android:id="@+id/timerButton"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_margin="16dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="Start Timer" />
            </LinearLayout >
        </LinearLayout >
    </LinearLayout >
</LinearLayout >