Quick Start Guide

Create Some Columns

Now we have our nice list of Person objects we need to create some columns in our grid, in order to display our Person data fields. Firstly we need to provide our ShinobiGridView with an AdapterSpec instance. The AdapterSpec object tells the grid how many rows it will contain. We then need to tell the ShinobiGridView how many columns we require, and what data they will contain.

Still in our QuickStartActivity.java, in the onCreate method, add the following code:

shinobiGridView.setAdapterSpec(new AdapterSpec() {
    public int getRowCount() {
       return people.size();

shinobiGridView.addColumn(Column.create(new TextColumnSpec("Name", new PropertyBinder<CharSequence>() {
    public CharSequence bind(int rowIndex) {
       Person person = people.get(rowIndex);
       return person.name;

shinobiGridView.addColumn(Column.create(new TextColumnSpec("Age", new PropertyBinder<CharSequence>() {
    public CharSequence bind(int rowIndex) {
       Person person = people.get(rowIndex);
       return Integer.toString(person.age);

As before you will need to import some classes to make it compile.

As we know our Person objects currently have two fields, name and age. As such we need to specify a column for each, and request it be added to our grid. In the above code you can see that for both name and age we call the addColumn method on our ShinobiGridView. This method expects a Column to be passed to it. To address this we use the Column class’ create factory method.

This method in turn expects a ColumnSpec object. You may provide your own implementation of ColumnSpec when creating a Column, however, here we are using one of the pre-made ColumnSpecs provided by the shinobigrids library: TextColumnSpec. We pass to its constructor a title for the Column and an anonymous instance of a PropertyBinder object. As you can see here we implement the single bind method, in which we obtain and return the appropriate value from our Person.

The ShinobiGridView will, by default, size its rows and columns so that they all fit into the available space, and no space is wasted. In cases where there are many data items to display, their size is scaled down to fit, without the need for scroll bars. Conversely, when there are few data items, their size is increased, to give the appearance of ‘padding’. This avoids any large voids of open space in the ShinobiGridView, in favor of a uniform appearance.

In some cases, this behavior may not be suitable for your needs. As such you may like to tell the ShinobiGridView how you would like your rows and columns to be sized. You can set both a minimum and a default row height and column width. It is important to understand the relationship between the two values. A default row height/column width, if set will be honored, regardless of any minimum row height/column width that has been set. Where a default value has not been set, the ShinobiGridView will attempt to space the rows and columns out evenly, but will not reduce the row height beyond the minimum row height and the column width beyond the minimum column width.

For our quick start example application we wish to set the height of our rows to be 50dp (device independent pixels) and the width of our columns to be a minimum of 500dp. We define these values in an XML file (res/values/dimens.xml):

    <dimen name="column_width">500dp</dimen>
    <dimen name="row_height">50dp</dimen>

Setting the height of our rows and width of our columns is really quite simple. To set the default row height you simply provide a value, in pixels, to the setDefaultRowHeight method. By retrieving the row height from the resources, Android will do the dp to px conversion for us. Add the following to the onCreate method of the QuickStartActivity.java file:

int rowHeight = getResources().getDimensionPixelSize(R.dimen.row_height);

Setting the column width is very similar:

int columnWidth = getResources().getDimensionPixelSize(R.dimen.column_width);

If you run your application you should have a fully functional ShinobiGridView, looking something similar to that below:

A basic grid

<< Previous: Create some data