Skip to content

Grid Object Cell

Grid Object Cell is a wrapper around Grid Table Row and Object Cell, and changes its layout automatically based on the form factor.

Example

A Grid Object Cell behaves as a Grid Table Row on a tablet: Grid Object Cell Tablet Example While on a phone it behaves as an Object Cell: Grid Object Cell Phone Example

Usage

Grid Object Cell can be used inside a RecyclerView, ListView or other ViewGroups. The example code below will assume the parent view is RecyclerView. GridTableRow is a FrameLayout and adds GridTableRow or ObjectCell as the sole child view. It serves as a convenient way to use GridTableRow and ObjectCell. Not all APIs in GridTableRow and ObjectCell are exposed, to further customize GridTableRow and ObjectCell, call getGridTableRow() or getObjectCell() respectively based on form factor.

Construction

Grid Object Cell can be created either by the constructor in code or by declaring a GridObjectCell element in XML like this:

1
2
3
4
5
6
7
<com.sap.cloud.mobile.fiori.object.GridObjectCell
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="wrap_content"
    android:layout_width="match_parent">

</com.sap.cloud.mobile.fiori.object.GridObjectCell>

Since Grid Object Cell is a thin wrapper, no additional XML attributes are defined for it. Given the dynamic nature, nearly all of the configuration should be done in code. Then the XML can be inflated in a RecyclerView.Adapter.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
public ViewHolder onCreateViewHolder(
        ViewGroup parent, int viewType) {
    Context context = parent.getContext();
            LayoutInflater inflater = LayoutInflater.from(context);
            GridObjectCell view = (GridObjectCell) inflater.inflate(R.laout.grid_object_cell, parent,
                    false);
            view.setColumnWidths(88, 0.4F, 150, -1, 150, 68, 68);
            view.setLines(2);
            view.setColumnTypes(ImageView.class, TextView.class, TextView.class, TextView.class, TextView.class, ImageView.class, ImageView.class);
            Drawable cImage = AppCompatResources.getDrawable(context, R.drawable.rectangle);
            Drawable cStatus = AppCompatResources.getDrawable(context, R.drawable.rectangle);
            view.setContents(cImage, " ", " ", " ", " ", cStatus, R.drawable.ic_cloud_download_black_24dp);
            return new RowViewHolder(view);
}

Fields

Columns

Unlike GridTableRow, which asks for View instances via setColumns, GridObjectCell asks for view types via setColumnTypes, because we don't want to create unnecessary views when running on a phone. After column types are specified, setContents should be used to set values to columns.

Column Customization

Often times, column customization has to be performed differently for GridTableRow and ObjectCell to achieve the desired effect. Call getGridTableRow() or getObjectCell() based on form factor to perform customization respectively. Please check the following example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
        //device-type specific enhancements
        //layout params will be created after setContents
        if (mActivity.isTablet()) {
            View priceView = view.getGridTableRow().getColumn(4);
            if (priceView != null && priceView instanceof TextView){
                ((TextView)priceView).setGravity(Gravity.END);
            }
            View statusView = view.getGridTableRow().getColumn(5);
            if (statusView != null) {
                GridTableRow.LayoutParams layoutParams =
                        (GridTableRow.LayoutParams) statusView.getLayoutParams();
                //top align
                layoutParams.verticalBias = 0.0F;
            }
        }else{
            //set a bigger width to accommodate large number
            view.getObjectCell().setStatusWidth(Utility.dpToPx(65));
        }

Column Mapping

When no explicit information is given for column mapping, the following rule will be used:

  • The first image becomes detail image
  • The first text becomes headline
  • The second text becomes subheadline
  • The third text becomes footnote
  • An image with click listener becomes secondary action
  • Further text or any other image becomes status

If the above automatic mapping does not work, setColumnMapping(ObjectCellField... fields) can be used to explicitly specify the mapping.

API Reference

GridObjectCell