I will try to give you a snippet, but to be honest, there is no point of using a GridView for your case since all you items are there on the screen anyway. You can create a couple of LinearLayout
s in a small loop that will get the result.
I would advice you to set the columnWidth on Runtime according to the screen width.
And your adapter should be fed with the column width and height to set them when inflating child views. And in this case, you need to get rid of numColumns. Remember that using numColumns along with columnWidth makes no sense especially when you want to fill the whole space. If you want to set the numColumns, remove the columnWidth.
SOLUTION:
Here is the outcome:
First, we create our layout. In my case, it is the MainActivity
's layout and is called activity_main.xml
. (Notice there is no GridView because I'll add that later in code):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<TextView
android:id="@+id/header"
android:background="#444"
android:gravity="center"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textColor="@android:color/white"
android:text="Dynamic Static GridView" />
<TextView
android:id="@+id/footer"
android:gravity="center"
android:background="#444"
android:textColor="@android:color/white"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="Shush" />
</RelativeLayout>
Our GridView element's layout is here in the item_grid.xml
:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="#fff"
android:layout_height="match_parent" >
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>
Now the trick is in MainActivity (I have commented some of the code for you to understand):
package com.example.dynamicstaticgridview;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.GridView;
import android.widget.RelativeLayout;
import android.app.Activity;
import android.graphics.Color;
/**
* @author Sherif elKhatib
*
*/
public class MainActivity extends Activity {
private static String items[]; //these are temporary items :p do not use them
static {
items = new String[7*7];
for(int i=0;i<7*7;i++) {
items[i] = String.valueOf(i);
}
}
int numberOfColumns = 7; //defaulting to 7, you can change it when you know
int numberOfRows = 7; //defaulting to 7, you can change it when you know
GridView mGrid;
ArrayAdapter<String> mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
params.addRule(RelativeLayout.BELOW, R.id.header);
params.addRule(RelativeLayout.ABOVE, R.id.footer);
mGrid = new GridView(this) {
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
if(!calculated)
getDimens();
}
};
mGrid.setVerticalSpacing(0);
mGrid.setHorizontalSpacing(0);
mGrid.setStretchMode(GridView.NO_STRETCH);
mGrid.setBackgroundColor(Color.rgb(100, 10, 10));
((RelativeLayout)findViewById(R.id.rootview)).addView(mGrid, params);
}
private int mCellWidth;
private int mCellHeight;
boolean calculated = false;
protected void getDimens() {
calculated = true;
//here you might have some rounding errors
//thats why you see some padding around the GridView
mCellWidth = mGrid.getWidth()/numberOfColumns;
mCellHeight = mGrid.getHeight()/numberOfRows;
mGrid.setColumnWidth(mCellWidth);
mGrid.setNumColumns(numberOfColumns);
mAdapter = new ArrayAdapter<String>(this, R.layout.item_grid, R.id.text, items) {
@Override
public View getView(int position, View convertView, ViewGroup parent) {
GridView.LayoutParams params = null;
if(convertView == null) {
params = new GridView.LayoutParams(mCellWidth, mCellHeight);
}
convertView = super.getView(position, convertView, parent);
if(params != null) {
convertView.setLayoutParams(params);
}
return convertView;
}
};
mGrid.setAdapter(mAdapter);
}
}
COMMENTS:
You'd really better find a decent algorithm to choose mCellWidth
, mCellHeight
, numberOfColumns
, and numberOfRows
.
Button
's background. How do you inflate the row layout in thegetView
method? Do you useinflater.inflate(R.layout.gridcelllayout, parent, false);
?