How to manage a gridview

Question

I have the following code for Gridview (for creating a calendar).

<GridView android:id="@+id/calendar" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_above="@+id/rl1" android:layout_below="@+id/ll2" android:columnWidth="250dp" android:numColumns="7" > </GridView> 

Grid_Cell is as follows.

 <?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:background="@drawable/calendar_button_selector" > <Button android:id="@+id/calendar_day_gridcell" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/calendar_button_selector" android:gravity="center" android:textAppearance="?android:attr/textAppearanceSmall" android:textColor="#000" android:textSize="14.47sp" > </Button> <TextView android:id="@+id/num_events_per_day" style="@style/calendar_event_style" android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" > </TextView> 

I want to set a space between rows and columns.

The existing view is as follows.

Please help me ... Thanks at Advance.

Answer 1

I will try to give you a snippet, but to be honest, it makes no sense to use a GridView for your business, since all your elements are on screen anyway. You can create a LinearLayout pair in a small loop that will get the result.

I would advise you to set columnWidth in Runtime according to the width of the screen.

And your adapter must be provided 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 together with columnWidth does not really matter, especially if you want to fill the entire space. If you want to set numColumns, remove columnWidth.

Decision

Here is the result: First we create our layout. In my case, this is the MainActivity layout and is called activity_main.xml . (Note that the GridView is missing because I will add this later in the 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 element of the GridView element is here in 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 in MainActivity (I commented on the code you need 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 better find the appropriate algorithm for choosing mCellWidth , mCellHeight , numberOfColumns and numberOfRows .

Answer 2

Maybe I'm wrong, but as far as I know, GridView is an AdapterView , which in your case means that you cannot dynamically, through xml, format the height of your elements so that they always fill the entire parent. This is not how the grid views (and list views and other types of adapters) work.

These types of “scrollable containers” can be considered as microfilm readers that existed in “modern libraries” a long time ago. You need to understand that the data really has nothing to do with the real viewer, you just use your viewer ( GridView in your case) with the correction and height to pan the elements of the subclass, which also have the width of their correction and height.

As I can see, you are trying to explicitly target the most angular case, when the data just has the same geometric size as the window of your viewer.

A few tips:

Instead, you can take a look at GridLayout . GridLayout is presented at API level 14 (IceCream Sandwich), so you may have to reconsider the versioning strategy (if I'm not completely mistaken, it should also be included in the v7 support package for backward compatibility on older platforms, in which case you can simply add a jar to your application to support older API levels).

Another TableLayout would be to use TableLayout with the corresponding table rows and what not. TableLayout has been TableLayout since day one, so there is no problem with feedback, but they tend to become very complex. If you plan to repeatedly restart your view or scroll through the months, I'm not sure if this solution is for you (due to the large number of layout routes).

The third solution is that you still use the GridView , but you measure its height and dynamically set the correction height for your elements with an enlarged grid from the grid view adapter based on the measured GridView height (In other words: make sure that you enter the aforementioned corner case).

If you are using a GridView , you will also need to get rid of the vertical spacing. The android:stretchMode on a GridView that you could play with . You can also try different (negative?) Sizes of the android:verticalSpacing attribute.

Good luck with your calendar submission!

Answer 3

If you want to specify the height and width in the gridview, set the relative layout outside the gridview and give android: layout_width and android: layout_height for your relative layout. Then specify the width and height of the grid in match_parent. After that, if you want to give the exact height and width to the elements of the gridview element first, you must know the exact width and height of all the cells, and you must determine the column width according to this, for example, for this code

  <GridView android:id="@+id/calendar" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_above="@+id/rl1" android:layout_below="@+id/ll2" android:columnWidth="250dp" android:numColumns="7" > </GridView> 

If you do not have the appearance of 1000dp, you will never get 4 cells in one row in good shape, but only gridview will try to determine its own cell width.

for your situation, your gridview calendar should look something like this:

 <GridView android:id="@+id/calendar" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_above="@+id/rl1" android:layout_below="@+id/ll2" android:columnWidth="50dp" android:numColumns="7" > </GridView> 

Answer 4

This seems to be the solution for you http://www.anddev.org/how_to_display_gridview_with_gridlines_and_borders-t11099.html

Answer 5

Try setting these two values ​​in XML for your GridView :

 android:horizontalSpacing="0dp" android:verticalSpacing="0dp" 

You probably want to remove the android:columnWidth .