Wednesday, April 20, 2016

Android: Distribute Grid Layout Row and Column Equally

Step by step tutorial guiding you to distribute the grid layout row and column size equally.
Grid Layout in Android is best for displaying your data in grid. You may argue me that you can use nested Linear Layout to display your data in grid. But the problem is that nested Linear Layout is hard to handle when you want to merge cell in grid. the more merged cell you have, the more complex you have to work using nest linear layout.

However, when you decided to use grid layout, the grid column and row size may not be distributed equally. Sometimes the size will automatically reduces to zero if there is no data on entire row or column.

In this tutorial, I will guide you on how to distribute the grid layout row and column size equally like this



The gray-black rows and column is used for debugging only. you can disabled it easily as I will describe in tutorial.

1In file dimens.xml of your project, set gridLayout_debugColumnSize value to be size of the column guide. This is for debugging only. You can set this value to zero after finish debugging.


2To make the grid layout compatible with old android version, you should add this code in your build.gradle file of application module
?
1
compile 'com.android.support:gridlayout-v7:(yourLastestSDKVersion)'


3Now, it's time to add grid layout. Open your layout XML File and place this code
?
1
2
3
4
5
6
7
8
9
10
<android.support.v7.widget.GridLayout
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_alignParentLeft="true"
   android:layout_alignParentStart="true"
   android:layout_alignParentTop="true"
   app:columnCount="(numberOfColumnsYouWant + 1)"
   app:rowCount="(numberOfRowsYouWant + 1)">
 
</android.support.v7.widget.GridLayout>


4This step is to add row/column guide. This is used for debugging only.
Place this code inside GridLayout
?
1
2
3
4
5
6
7
8
9
<TextView
   android:background="@android:color/darker_gray"
   app:layout_gravity="fill_horizontal"
   app:layout_columnWeight="1"
   app:layout_rowWeight="0"
   app:layout_column="(running column number from 1 to max column number)"
   app:layout_row="0"
   android:height="@dimen/gridLayout_debugColumnSize"
   android:text=""/>

?
1
2
3
4
5
6
7
8
9
<TextView
   android:background="@android:color/darker_gray"
   app:layout_gravity="fill_vertical"
   app:layout_columnWeight="0"
   app:layout_rowWeight="1"
   app:layout_column="0"
   app:layout_row="(running row number from 1 to max row number)"
   android:width="@dimen/gridLayout_debugColumnSize"
   android:text=""/>

Note: for cell[0][0], use this code instead
?
1
2
3
4
5
6
7
8
9
<TextView
   android:background="@android:color/holo_red_dark"
   app:layout_columnWeight="0"
   app:layout_rowWeight="0"
   app:layout_column="0"
   app:layout_row="0"
   android:width="@dimen/gridLayout_debugColumnSize"
   android:height="@dimen/gridLayout_debugColumnSize"
   android:text=""/>


5Then, you can add anything inside using this format
?
1
2
3
4
5
6
7
8
9
<yourControlName
   app:layout_column="(coloumn position you want)"
   app:layout_row="(row position you want)"
   app:layout_columnSpan="(column span size)"
   app:layout_rowSpan="(row span size)"
   app:layout_gravity="fill"
   android:layout_width="0dp"
   android:layout_height="0dp"
/>

For example

Note: You can hide the row/column guide by set gridLayout_debugColumnSize value in step 1 to 0dp.


Full code

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context="com.example.piyapan039285.helloworld.GridLayoutMainActivity">
 
   <android.support.v7.widget.GridLayout
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_alignParentLeft="true"
       android:layout_alignParentStart="true"
       android:layout_alignParentTop="true"
       app:columnCount="6"
       app:rowCount="5"
       android:id="@+id/android.support.v7.widget.GridLayout">
 
       <TextView
           android:background="@android:color/holo_red_dark"
           app:layout_columnWeight="0"
           app:layout_rowWeight="0"
           app:layout_column="0"
           app:layout_row="0"
           android:width="@dimen/gridLayout_debugColumnSize"
           android:height="@dimen/gridLayout_debugColumnSize"
           android:text=""/>
 
       <TextView
           android:background="@android:color/darker_gray"
           app:layout_gravity="fill_horizontal"
           app:layout_columnWeight="1"
           app:layout_rowWeight="0"
           app:layout_column="1"
           app:layout_row="0"
           android:height="@dimen/gridLayout_debugColumnSize"
           android:text=""/>
 
       <TextView
           android:background="@android:color/black"
           app:layout_gravity="fill_horizontal"
           app:layout_columnWeight="1"
           app:layout_rowWeight="0"
           app:layout_column="2"
           app:layout_row="0"
           android:height="@dimen/gridLayout_debugColumnSize"
           android:text=""/>
 
       <TextView
           android:background="@android:color/darker_gray"
           app:layout_gravity="fill_horizontal"
           app:layout_columnWeight="1"
           app:layout_rowWeight="0"
           app:layout_column="3"
           app:layout_row="0"
           android:height="@dimen/gridLayout_debugColumnSize"
           android:text=""/>
 
       <TextView
           android:background="@android:color/black"
           app:layout_gravity="fill_horizontal"
           app:layout_columnWeight="1"
           app:layout_rowWeight="0"
           app:layout_column="4"
           app:layout_row="0"
           android:height="@dimen/gridLayout_debugColumnSize"
           android:text=""/>
 
       <TextView
           android:background="@android:color/darker_gray"
           app:layout_gravity="fill_horizontal"
           app:layout_columnWeight="1"
           app:layout_rowWeight="0"
           app:layout_column="5"
           app:layout_row="0"
           android:height="@dimen/gridLayout_debugColumnSize"
           android:text=""/>
 
       <TextView
           android:background="@android:color/darker_gray"
           app:layout_gravity="fill_vertical"
           app:layout_columnWeight="0"
           app:layout_rowWeight="1"
           app:layout_column="0"
           app:layout_row="1"
           android:width="@dimen/gridLayout_debugColumnSize"
           android:text=""/>
 
       <TextView
           android:background="@android:color/black"
           app:layout_gravity="fill_vertical"
           app:layout_columnWeight="0"
           app:layout_rowWeight="1"
           app:layout_column="0"
           app:layout_row="2"
           android:width="@dimen/gridLayout_debugColumnSize"
           android:text=""/>
 
       <TextView
           android:background="@android:color/darker_gray"
           app:layout_gravity="fill_vertical"
           app:layout_columnWeight="0"
           app:layout_rowWeight="1"
           app:layout_column="0"
           app:layout_row="3"
           android:width="@dimen/gridLayout_debugColumnSize"
           android:text=""/>
 
       <TextView
           android:background="@android:color/black"
           app:layout_gravity="fill_vertical"
           app:layout_columnWeight="0"
           app:layout_rowWeight="1"
           app:layout_column="0"
           app:layout_row="4"
           android:width="@dimen/gridLayout_debugColumnSize"
           android:text=""/>
 
       <Button
           app:layout_column="1"
           app:layout_row="1"
           app:layout_columnSpan="1"
           app:layout_rowSpan="1"
           app:layout_gravity="fill"
           android:layout_width="0dp"
           android:layout_height="0dp"
           android:text="1"/>
 
       <Button
           app:layout_column="2"
           app:layout_row="1"
           app:layout_columnSpan="3"
           app:layout_rowSpan="1"
           app:layout_gravity="fill"
           android:layout_width="0dp"
           android:layout_height="0dp"
           android:text="2"/>
 
       <Button
           app:layout_column="2"
           app:layout_row="2"
           app:layout_columnSpan="2"
           app:layout_rowSpan="2"
           app:layout_gravity="fill"
           android:layout_width="0dp"
           android:layout_height="0dp"
           android:text="3"/>
 
       <Button
           app:layout_column="1"
           app:layout_row="4"
           app:layout_columnSpan="4"
           app:layout_rowSpan="1"
           app:layout_gravity="fill"
           android:layout_width="0dp"
           android:layout_height="0dp"
           android:text="4"/>
 
   </android.support.v7.widget.GridLayout>
 
</RelativeLayout>


Happy Coding!
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)