Search code examples
androidxmlandroid-gridlayout

How GridLayout works when specifying the columnspan and rowspan

I have made a layout desing for my listview in an Android project. It's like that;

enter image description here

I have read and researched on other gridlayout samples and I have written this xml in accordance with I have got.

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/card_background"
    android:columnCount="30"
    android:orientation="horizontal"
    android:rowCount="6"
    android:id="@+id/grid_layout_notification">

    <com.ei.dizitakip.android.CircledNetworkImageView
        android:id="@+id/fancy_notification_thumbnail"
        android:layout_columnSpan="5"
        android:layout_rowSpan="6"
        />

    <TextView
        android:layout_columnSpan="25"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:id="@+id/fancy_title"
        android:textColor="@color/color_primary_dark" />

    <ImageView
        android:layout_columnSpan="2"
        android:id="@+id/fancy_season_icon"
        android:src="@mipmap/season_icon"
        android:background="@android:color/transparent"
         />

    <TextView
        android:layout_columnSpan="10"
        android:id="@+id/fancy_status_text"
        android:gravity="center_vertical" />

    <ImageView
        android:layout_columnSpan="2"
        android:id="@+id/fancy_domain_icon"
        android:src="@mipmap/www_icon"
        android:background="@android:color/transparent"
        />

    <TextView
        android:layout_columnSpan="11"
        android:id="@+id/fancy_domain_text"
        android:gravity="center_vertical" />

</GridLayout>

As you have realized that the code is far from the design. What am I missing about GridLayouts? This is the first time I have been used it and I used the same approach with LinearLayout's layout_weight. Really appreciated any code samples, approach or technique.

Solution

  • You should use android:layout_gravity to specify the size of a grid. This is an example from the Android Developers Blog

    To achieve this design;

    enter image description here

    code;

    <?xml version="1.0" encoding="utf-8"?>
<GridLayout
        xmlns:android="http://schemas.android.com/apk/res/android"

        android:layout_width="match_parent"
        android:layout_height="match_parent"

        android:useDefaultMargins="true"
        android:alignmentMode="alignBounds"
        android:columnOrderPreserved="false"

        android:columnCount="4"
        >

    <TextView
            android:text="Email setup"
            android:textSize="32dip"

            android:layout_columnSpan="4"
            android:layout_gravity="center_horizontal"
            />

    <TextView
            android:text="You can configure email in just a few steps:"
            android:textSize="16dip"

            android:layout_columnSpan="4"
            android:layout_gravity="left"
            />

    <TextView
            android:text="Email address:"

            android:layout_gravity="right"
            />

    <EditText
            android:ems="10"
            />

    <TextView
            android:text="Password:"

            android:layout_column="0"
            android:layout_gravity="right"
            />

    <EditText
            android:ems="8"
            />

    <Space
            android:layout_row="4"
            android:layout_column="0"
            android:layout_columnSpan="3"
            android:layout_gravity="fill"
            />

    <Button
            android:text="Next"

            android:layout_row="5"
            android:layout_column="3"
            />
</GridLayout>

    You need the use <Space> tag as well to achieve your design.