Android (Xamarin) gridlayout in linearlayout

Question

I'm working on an android application where the main menu looks something like this:

Main menu

To do this, I'm using a linearlayout to seperate the screen 40/60 - accomplished using layout_weight for the height.

Then, I split the 60% portion of the linearlayout using a gridlayout and placed buttons into the grids. However, the screen comes up as completely empty. Here's my xml code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:background="@drawable/background">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="0.6"
        android:gravity="bottom">
        <GridLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:rowCount="2"
            android:columnCount="2">
            <Button
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_row="0"
                android:layout_column="0"
                android:background="@android:color/transparent"
                android:text="Click me"
                android:textAllCaps="false"
                android:textColor="@color/dark_blue" />
            <Button
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_row="0"
                android:layout_column="1"
                android:background="@android:color/transparent"
                android:text="Click me"
                android:textAllCaps="false"
                android:textColor="@color/dark_blue" />
            <Button
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_row="1"
                android:layout_column="0"
                android:background="@android:color/transparent"
                android:text="Click me"
                android:textAllCaps="false"
                android:textColor="@color/dark_blue" />
            <Button
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:layout_row="1"
                android:layout_column="1"
                android:background="@android:color/transparent"
                android:text="Click me"
                android:textAllCaps="false"
                android:textColor="@color/dark_blue" />
        </GridLayout>
    </LinearLayout>
<!--Other code-->
</RelativeLayout>

Any help is appreciated, thanks!

Answer 1

I've thought of that as well, but thought that gridlayout is a more efficient performance wise, and also doesn't repeat code. In the event I need more buttons, for example 8 buttons, then I would require 4 linear layouts. Would that be acceptable?

I think what you need is Grid View with android:numColumns="2" and then use adapter to fill your buttons in each cell.

Here is tutorial about using GridView in Xamarin.Android and you can have a look: Grid View.

Answer 2

why you don't use a Simple LinearLayout like this :

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.6"
        android:gravity="bottom"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:orientation="vertical">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="356dp"></LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="76dp">

            <Button
                android:text="Button"
                android:layout_width="175dp"
                android:layout_height="73dp"
                android:id="@+id/button3" />

            <Button
                android:text="Button"
                android:layout_width="match_parent"
                android:layout_height="76dp"
                android:id="@+id/button2" />
        </LinearLayout>

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <Button
                android:text="Button"
                android:layout_width="175dp"
                android:layout_height="73dp"
                android:id="@+id/button1" />

            <Button
                android:text="Button"
                android:layout_width="match_parent"
                android:layout_height="76dp"
                android:id="@+id/button4" />

        </LinearLayout>
    </LinearLayout>
    <!--Other code-->
</RelativeLayout>