Grid Object Cell

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

Example

A GridObjectCell behaves as a Grid Table Row on a tablet:

While on a phone it behaves as an Object Cell:

Usage

GridObjectCell 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

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

<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 GridObjectCell 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.

public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        ViewGroup parent, int viewType) {
    Context context = parent.getContext();
    LayoutInflater inflater = LayoutInflater.from(context);
    GridObjectCell view = (GridObjectCell)inflater.inflate(R.layout.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:

//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 while traversing the columns from left to right (in left-to-right locales):

1. Determine the icon stack mapping

   • Text gets added to the icon stack
   • An image gets added to the icon stack if the next element is also an image
   • An image gets added to the icon stack if the next element is text, the image is not the largest image, and there is another instance of text after image in the later columns
   • An image becomes detail image if the next element is text and the image is the largest image or the icon stack already has two elements. Icon stack mapping is finished
   • If the icon stack has three elements, then icon stack mapping is finished

2. After icon stack mapping is finished, determine the rest of the mappings from the remaining columns

   • The first image becomes detail image if detail image hasn't been mapped yet
   • 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

---

Last update: June 15, 2023