Search code examples
c#xamarin.androidmultiple-columnsgrid-layout

Xamarin.Android - GridLayout: Columns not visible


I'm working on a Xamarin.Android app, and I wish to use a GridLayout to display a simple form. However, the GridLayout doesn't display all the entry boxes found in the second column. If I place the items ( EditText Controls) in Column 0, I they become visible. But if I set layout_Column="1, they disappear. Does anyone have a suggestion? Below is 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:background="#d4d8d1"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <GridLayout
        android:rowCount="7"
        android:columnCount="3"
        android:columnOrderPreserved="false"
        android:layout_marginLeft="25dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="30dp"
        android:layout_marginBottom="8dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center_vertical"
        android:orientation="horizontal"
        >
        <TextView
            android:text="Name:"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_row="0"
            android:layout_column="0"
            android:textSize="20dp"
            android:layout_marginTop="5dp"
            android:layout_marginRight="5dp"
            />
        <EditText
            android:id="@+id/nameTxt"
            android:inputType="text"
            android:text="Item Name"
            android:layout_row="0"
            android:layout_column="1"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="8dp"
            android:textSize="20dp"
            android:minWidth="200dp"
            android:padding="2dp"
            android:layout_width="wrap_content"
            android:background="#eee"
            android:textColor="#001"
        />
        <TextView
            android:text="Unit Price:"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_row="1"
            android:layout_column="0"
            android:layout_marginTop="5dp"
            android:textSize="20dp"
            android:layout_marginRight="5dp"
            />
        <EditText
            android:id="@+id/priceTxt"
            android:text="Unit Price"
            android:layout_row="1"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="8dp"
            android:layout_column="1"
            android:textColor="#0000"
            android:textSize="20dp"
            android:layout_width="fill_parent"
        />
        <TextView
            android:text="Category:"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_row="2"
            android:layout_column="0"
            android:layout_marginTop="5dp"
            android:textSize="20dp"
            android:layout_marginRight="5dp"
            />
        <Spinner
            android:layout_row="2"
            android:layout_column="1"
            android:padding="1dp"
            android:entries="@array/item_category"
            android:backgroundTint="#D11F08"
            android:layout_marginLeft="8dp"
            android:layout_marginTop="5dp"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/categorySpinner" />
        <TextView
            android:text="Quantity:"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_row="3"
            android:layout_column="0"
            android:textSize="20dp"
            android:layout_marginTop="5dp"
            android:layout_marginRight="5dp"
            />
        <EditText
            android:id="@+id/qtyTxt"
            android:text="Quantity"
            android:layout_row="3"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="8dp"
            android:layout_column="1"
            android:textColor="#0000"
            android:textSize="20dp"
            android:layout_width="fill_parent"
        />
        <TextView
            android:text="Total Price:"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:layout_row="4"
            android:layout_column="0"
            android:textSize="20dp"
            android:layout_marginTop="5dp"
            android:layout_marginRight="5dp"
            />
        <EditText
            android:id="@+id/totalPriceTxt"
            android:text="Total Price"
            android:layout_row="4"
            android:layout_marginTop="5dp"
            android:layout_marginLeft="8dp"
            android:layout_column="1"
            android:textColor="#0000"
            android:textSize="20dp"
            android:layout_width="fill_parent"
        />
        <Button
            android:id="@+id/saveBtn"
            android:text="Save"
            android:layout_row="5"
            android:layout_column="0"
            android:background="@drawable/buttonstyle"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="100dp"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:layout_width="match_parent"
            />
    </GridLayout>

</LinearLayout>

Solution

  • The error is caused on the button, you need to set the columnspan.

    Add the code below of button.

     <Button
            android:layout_columnSpan="2"
            android:id="@+id/saveBtn"
            android:text="Save"
            android:layout_row="5"
            android:layout_column="0"
    
            android:background="@drawable/pink"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="100dp"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:layout_width="match_parent"
            />
    

    enter image description here