Arpit Patel Arpit Patel - 2 months ago 17
Android Question

Row span and column span best layout for design

How to implement design like this i am not sure how to do that sorry for the blurry image.

I have three options


  1. Linear Layout with weightsum (Hard)

  2. TableLayout (Not support column span)

  3. GridLayout (Don't know)



enter image description here

I tried this table layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">

<TextView
android:id="@+id/space1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="3dp"
android:text="Fir 08 Jul 10:44GMT +01 " />

<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:shrinkColumns="*"
android:stretchColumns="*">

<TableRow
android:id="@+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:padding="5dp">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:layout_span="4"
android:background="#FFFFFF"
android:gravity="center"
android:padding="3dp"
android:text="ATP Singles Winmbeldon"
android:textColor="#000000" />
</TableRow>

<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="A"
android:textColor="#000000" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="B"
android:textColor="#000000" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="C"
android:textColor="#000000" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="D"
android:textColor="#000000" />
</TableRow>

<TableRow
android:id="@+id/tableRow3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="E"
android:textColor="#000000" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="F"
android:textColor="#000000" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="G"
android:textColor="#000000" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="H"
android:textColor="#000000" />
</TableRow>

<TableRow
android:id="@+id/tableRow4"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="I"
android:textColor="#000000" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="J"
android:textColor="#000000" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="K"
android:textColor="#000000" />

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="1dp"
android:background="#FFFFFF"
android:gravity="center"
android:text="L"
android:textColor="#000000" />
</TableRow>

</TableLayout>


</LinearLayout>

Answer

android.support.v7.widget.GridLayout fits your situation.

In your build.gradle (any versions may be ok):

compile "com.android.support:gridlayout-v7:24.1.1"

In your layout xml file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        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="@android:color/white"
        android:orientation="vertical"
        android:padding="16dp">

    <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="3dp"
            android:paddingBottom="3dp"
            android:text="Fir 08 Jul 10:44GMT +01"/>

    <android.support.v7.widget.GridLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/darker_gray"
            app:columnCount="8">

        <!--
          Header Row
        -->

        <TextView
                style="@style/CellStyle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                app:layout_columnSpan="7"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:padding="3dp"
                android:background="@android:color/darker_gray"
                android:text="ATP Singles Winmbeldon"
                android:textColor="@android:color/white"/>

        <!-- Spacer for green -->
        <View
                style="@style/CellSpacerStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"/>


        <!--
          First Row  SF 13:00
         -->

        <!-- Title -->
        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_rowSpan="2"
                android:text="SF\n13:00"/>

        <!-- Sore 1 -->
        <TextView
                style="@style/CellStyle"
                android:layout_height="@dimen/row_height"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_rowSpan="1"
                android:text="Raonic M. (6)"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="6"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="4"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="3"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="4"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="5"/>

        <!-- GreenView -->
        <FrameLayout
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:layout_marginLeft="@dimen/border_size"
                android:paddingTop="@dimen/border_size"
                android:background="@android:color/white">

            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/green_circle"/>

        </FrameLayout>


        <!-- Sore 2 -->
        <TextView
                style="@style/CellStyle"
                android:layout_height="@dimen/row_height"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_rowSpan="1"
                android:text="Federer R. (3)"/>


        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="4"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="6"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="7"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="7"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="5"/>


        <!-- GreenView -->
        <FrameLayout
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:layout_marginLeft="@dimen/border_size"
                android:paddingTop="@dimen/border_size"
                android:background="@android:color/white">

            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/green_circle"/>

        </FrameLayout>


        <!--
        Second Row  SF 15:00
         -->

        <!-- Title -->
        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_rowSpan="2"
                android:text="SF\n15:00"/>

        <!-- Sore 1 -->
        <TextView
                style="@style/CellStyle"
                android:layout_height="@dimen/row_height"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_rowSpan="1"
                android:text="Berdych T.(10)"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="6"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="4"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="3"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="4"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="5"/>


        <!-- GreenView -->
        <FrameLayout
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:layout_marginLeft="@dimen/border_size"
                android:paddingTop="@dimen/border_size"
                android:background="@android:color/white">

            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/green_circle"/>

        </FrameLayout>


        <!-- Sore 2 -->
        <TextView
                style="@style/CellStyle"
                android:layout_height="@dimen/row_height"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                app:layout_rowSpan="1"
                android:text="Murray A (2)"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="4"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="6"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:gravity="center"
                android:text="7"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="7"/>

        <TextView
                style="@style/CellStyle"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:text="5"/>

        <!-- GreenView -->
        <FrameLayout
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:layout_marginLeft="@dimen/border_size"
                android:paddingTop="@dimen/border_size"
                android:background="@android:color/white">

            <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:src="@drawable/green_circle"/>

        </FrameLayout>

        <!--
         Bottom Brders
        -->
        <View
                android:layout_width="0dp"
                android:layout_height="@dimen/border_size"
                app:layout_columnSpan="7"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"/>

        <View
                android:layout_width="0dp"
                android:layout_height="@dimen/border_size"
                android:layout_marginLeft="@dimen/border_size"
                app:layout_columnWeight="1"
                app:layout_rowWeight="1"
                android:background="@android:color/white"/>

    </android.support.v7.widget.GridLayout>

</LinearLayout>

In your style.xml:

<resources>
    ...
    <style name="CellStyle">
        <item name="android:layout_marginTop">@dimen/border_size</item>
        <item name="android:layout_marginLeft">@dimen/border_size</item>
        <item name="android:background">@android:color/white</item>
        <item name="android:gravity">center</item>
    </style>

    <style name="CellSpacerStyle">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">0dp</item>
        <item name="android:layout_marginLeft">@dimen/border_size</item>
        <item name="android:background">@android:color/white</item>
    </style>
    ...
</resources>

In your dimens.xml:

<resources>
    ...
    <dimen name="border_size">1px</dimen>
    <dimen name="row_height">54dp</dimen>
    ...
</resources>

The result is below:

enter image description here

Attributes of GridLayout [document]

  • app:columnCount is the number of columns of Gridlayout.
  • app:rowCount is the number of rows of Gridlayout.

Attributes of GridLayout' children [document]

  • app:layout_columnSpan is the number of column occupied by this view.
  • app:layout_rowSpan is the number of span occupied by this view.