Search code examples
javaandroidandroid-layoutdatagrid

spreading a DataGrid across the screen will all it's items visible

I'm writing my first android application. I'm using android 2.3.3 SDK. the game is kind of a cards game that has a 4x4 grid of cards on the screen.

when the game starts the only thing visible on the screen is the datagrid (no menus or nothing).

so the GameActivity layout is the following:

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/faces_grid_view"
    android:numColumns="4"
    android:verticalSpacing="1dp"
    android:horizontalSpacing="1dp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
>
</GridView>

this is the relevant code of the onCreate function of the GameActivity class:

          Display display = getWindowManager().getDefaultDisplay();
            final int width  = display.getWidth();
            final int height = display.getHeight();

            final int bottomPadding=150;
             //Display display = getWindowManager().getDefaultDisplay();
            gameTurns = new ArrayList<GameTurn>();
            imageWidth=width/4;
            imageHeight=(height-bottomPadding)/4;
            imageAdapter = new ImageAdapter(this,imageWidth,imageHeight);
            facesGridView = (GridView) findViewById(R.id.faces_grid_view);
            facesGridView.setAdapter(imageAdapter);

in the onCreate() code I'm getting the defaultDisplaySize, divide it by 4 so i'll know the max height and width that an image can take.

  • for some reason I need to add a bottomPadding. I checked it on galaxy note and galaxy tab 10.1 and maybe the getDefaultDisplay also returns the space of the bottom toolbar of the tablet itself so the pictures overlap the all screen without any padding.

as you can see I set an adapter for the GridView. the adapter extends BaseAdapter and i paste to his constructor the width and height the I calculated earlier.

the getView function of the adapter contains the following:

      public View getView(int position, View convertView, ViewGroup parent) {
            ImageView imageView;
            if (convertView == null) {  // if it's not recycled, initialize some attributes
                imageView = new ImageView(mContext);
                LayoutParams param = new    LinearLayout.LayoutParams(this.imageWidth,this.imageHeight);
                imageView.setLayoutParams(new GridView.LayoutParams(param));
                imageView.setAdjustViewBounds(true);
                imageView.setScaleType(ScaleType.CENTER_INSIDE);
                imageView.setPadding(1,1,1,1);
            } else {
                imageView = (ImageView) convertView;
            }

so a couple of questions:

  1. is there a way just to configure the datagrid to be visible on the all screen and to show all items with no scrolling without configuration the image width or height ? why do I need to work so hard for such a simple task?
  2. if I do need to calculate stuff myself, is there a way to get the actual Activity height and width so I won't need to add any padding? welp I want it to work on all scree sizes in landscape and portrait.

I tired to change and play with the configuration for many days and that's the best I've achieved so far so any information regarding the issue would be greatly appreciated.

update

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="*"
    android:weightSum="4" >

<TableRow
    android:id="@+id/tableRow1"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_weight="1"
     >
<ImageView
    android:id="@+id/imageView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/face"
    android:onClick="onItemClick"
     />
<ImageView
    android:id="@+id/imageView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/face"
    android:onClick="onItemClick"
     />
<ImageView
    android:id="@+id/imageView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/face"
    android:onClick="onItemClick"
     />
<ImageView
    android:id="@+id/imageView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/face"
    android:onClick="onItemClick"
     />

</TableRow>
<TableRow
    android:id="@+id/tableRow2"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_weight="1"
     >
<ImageView
    android:id="@+id/imageView5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/face"
    android:onClick="onItemClick"
     />
<ImageView
    android:id="@+id/imageView6"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/face"
    android:onClick="onItemClick"
     />
<ImageView
    android:id="@+id/imageView7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/face"
    android:onClick="onItemClick"
     />
<ImageView
    android:id="@+id/imageView8"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/face"
    android:onClick="onItemClick"
     />

</TableRow>
    <TableRow
    android:id="@+id/tableRow3"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_weight="1"
    >
<ImageView
    android:id="@+id/imageView9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/face"
    android:onClick="onItemClick"
     />
<ImageView
    android:id="@+id/imageView10"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/face"
    android:onClick="onItemClick"
     />
<ImageView
    android:id="@+id/imageView11"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/face"
    android:onClick="onItemClick"
     />
<ImageView
    android:id="@+id/imageView12"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/face"
    android:onClick="onItemClick"
     />

</TableRow>
    <TableRow
    android:id="@+id/tableRow4"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_weight="1"
    >
<ImageView
    android:id="@+id/imageView13"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/face"
    android:onClick="onItemClick"
     />
<ImageView
    android:id="@+id/imageView14"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/face"
    android:onClick="onItemClick"
     />
<ImageView 
    android:id="@+id/imageView15"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/face"
    android:onClick="onItemClick"
     />
<ImageView
    android:id="@+id/imageView16"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:contentDescription="@string/face"
    android:onClick="onItemClick"
     />

</TableRow>

</TableLayout>

this xml file results in a 4 images centered and spread vertically (this fits the all screen so there may be more below).

screenshot .

what did i miss? :)

thanks!

Kfir

Solution

  • is there a way just to configure the datagrid to be visible on the all screen and to show all items with no scrolling without configuration the image width or height ? why do I need to work so hard for such a simple task?

    This is a simple task just that you're using the wrong widget. You would generally use a GridView if the grid of cells is bigger than the screen so you could benefit from the GridView's recycling mechanism(to improve performance and to don't get in trouble with the app's memory). This is not your case as you want all the cells to be visible.

    I would use a TableLayout with width and height set to FILL_PARENT(with stretchColumns set to * so the row columns will have the same width) which will contain four TableRows(with layout_weight set to 1(and weighSum set to 4 for the parent TableLayout) so they will have equal height), also the layout_height for the TableRow will be set to 0dp. Each TableRow will contain four ImageViews.

    if I do need to calculate stuff myself, is there a way to get the actual Activity height and width so I won't need to add any padding? Help I want it to work on all scree sizes in landscape and portrait.

    I would advise you to use the solution I posted above. If you still want to use the GridView then make it fill all the width/height (by using fill_parent and not wrap_content like you did for the layout_width/height) and in the onCreate method use a Handler to post a Runnable in which you retrieve the GridView's LayoutParams and use those to set up the adapter.