How-To: Style the Grid

This how-to guide will show you how you can style your grid at various different levels of involvement. For a more in-depth look at styling options for the ShinobiGridView head over to the Control Overview: Styling section.

When you first create a ShinobiGridView you will notice that by default it has a standard theme applied to it. You may, of course, want to make your grid a bit more individual and that is where styling comes into the picture.

Styling the Whole Grid

The first aspect of styling that we will look at is applying a theme to the whole grid. The easiest way to do this is to create our own theme for the grid in XML so that we just need to set the properties once.

In our res/values/styles.xml file (or Resources/values/Styles.xml for Xamarin) we create a separate style which just specifies the background color of each alternate row so that it appears with a light blue background. As we have set the parent of this style to the ShinobiGridTheme.Light, which is one of the default provided themes, our custom theme will inherit all of the other values in that theme.

<style name="MyGridTheme" parent="ShinobiGridTheme.Light">
    <item name="sg_itemAlternateBackgroundColor">#c1dfff</item>
</style>

Tip: For a full list of styleable attributes see R.styleable.ShinobiGridTheme.

Now that we have created our custom theme we need to apply it to our ShinobiGridView and again we will be doing this in the XML. To do this we just need to add two lines to our activity’s layout file. The first declares a namespace which allows us to use the XML attributes defined in our library:

xmlns:shinobi="http://schemas.android.com/apk/res-auto"

Here we’ve called the namesapce shinobi but you can call it anything you like except android.

The second line then uses an attribute defined in our library, sg_gridTheme, to apply our custom theme to the grid:

shinobi:sg_gridTheme="@style/MyGridTheme"

Putting that altogether your layout file should contain the following:

<com.shinobicontrols.grids.core.ShinobiGridView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:shinobi="http://schemas.android.com/apk/res-auto"
    android:id="@+id/grid"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    shinobi:sg_gridTheme="@style/MyGridTheme"/>

Styling a Single Column

Now that we have applied a style to the whole grid, the next stage of styling that we will look at is on a column level. A ColumnSpec defines certain properties and behaviors of a Column, so it is here where you may want to add the ability to change certain visual aspects of your column. This is exactly what we have done with the TextColumnSpec, an implementation of ColumnSpec we have provided specifically for working with text-based data. It has several styles which have various methods on them that allow you to change the appearance of the TextViews contained within its Column.

In our demo we are using the TextColumnSpec to create our Columns. Now, we want to make the text in the first Column bold, regardless of whether the item is selected or on an alternate row or not. Doing this is simple - all we need to do is hold on to a reference to the TextColumnSpec when we create the Column and set the appropriate properties on the relevant style objects.

Java

TextColumnSpec idColumnSpec = new TextColumnSpec("ID", new PropertyBinder<CharSequence>() {
    @Override
    public CharSequence bind(int rowIndex) {
        Person person = people.get(rowIndex);
        return Integer.toString(person.ID);
    }
});
idColumnSpec.getDefaultStyle().setTypeface(Typeface.DEFAULT_BOLD);
idColumnSpec.getAlternateStyle().setTypeface(Typeface.DEFAULT_BOLD);
idColumnSpec.getSelectedStyle().setTypeface(Typeface.DEFAULT_BOLD);
shinobiGridView.addColumn(Column.create(idColumnSpec));

C#

TextColumnSpec idColumnSpec = new TextColumnSpec("ID", new IdPropertyBinder(people));
idColumnSpec.DefaultStyle.Typeface = Typeface.DefaultBold;
idColumnSpec.AlternateStyle.Typeface = Typeface.DefaultBold;
idColumnSpec.SelectedStyle.Typeface = Typeface.DefaultBold;
shinobiGridView.AddColumn(Column.Create(idColumnSpec));
[...]

class IdPropertyBinder : Java.Lang.Object, IPropertyBinder
{
    readonly List<Person> people;

    public IdPropertyBinder(List<Person> people)
    {
        this.people = people;
    }

    public Java.Lang.Object Bind(int rowIndex)
    {
        Person person = people[rowIndex];
        return person.id.ToString();
    }
}

Here we are obtaining the TextColumnStyle objects from the TextColumnSpec that control the visual appearance of non-header items in the Column: the Default Style, the Alternate Style and the Selected Style. In order to make the text bold in this Column, regardless of selection state or particular row, we set the Typeface for all of these styles to one that is bold.

The TextColumnStyle class provides a number of other styling options including setting the text color, text size and background color.

Styling the Gridlines

The final aspect of our styling demo is to alter the appearance of the gridlines. Gridlines are drawn by ‘ItemDecoration’ objects. The ShinobiGridView can have separate ItemDecorations for its header and for its main body of data, and by default it is given a HeaderItemDecoration and DataItemDecoration. These are ItemDecoration implementations included with the library which should suffice in the majority of cases but you are free to provide your own implementations.

In our demo we want to style the header row gridlines so that the gridlines are twice the size of the data row gridlines making them stand out from the rest of the grid.

To change the style of the header gridlines we first need to get the HeaderItemDecoration from the grid:

Java

HeaderItemDecoration headerItemDecoration = shinobiGridView.getDefaultHeaderItemDecoration();

C#

HeaderItemDecoration headerItemDecoration = shinobiGridView.DefaultHeaderItemDecoration;

Once we have the HeaderItemDecoration we can simply change the line thickness:

XML (dimens.xml)

<resources>
    [...]
    <dimen name="header_line_thickness">2dp</dimen>
</resources>

Java

headerItemDecoration.setLineThickness(getResources().getDimensionPixelSize(R.dimen.header_line_thickness));

C#

headerItemDecoration.LineThickness = Resources.GetDimensionPixelSize(Resource.Dimension.header_line_thickness);

With that final change we have come to the end of this how-to on styling your ShinobiGridView. If you run the code sample you should see a styled grid, looking something similar to that below.

A styled grid

See the related code sample: Grid Styling Sample in the samples/grid-styling folder of your product download.