Skip to content

Collection View

Collection view is an alternative view for ObjectCell and ContactCell. It emphasize an image and helps user identify each Object or Contact. If an image is not good identifier of the item or a lot of items do not have an image in the data set, use ObjectCell/ContactCell instead.

Anatomy

A Collection View consists of a header, list of CollectionViewItem and a footer where each CollectionViewItem consists of an image, a headline, a sub headline and an attribute.

CollectionView supports horizontal scrolling of the list of CollectionViewItem if the complete list cannot fit inside the available screen width. To provide a visual hint that there are more elements to be presented, CollectionView always starts with a partial element at the end of the scrollable list.

For example if your CollectionView has 500 elements to represent but the screen size of the device can only accommodate four elements at time, CollectionView displays 3.5 elements providing a hint that more elements are available to be presented.

Anatomy of CollectionViewItem

CollectionViewItem contains: Detail Image: CollectionViewItem contains a detailed image view, which acts as major visual item of the cell. It can be image of the ContactCell or ObjectCell. Detail Image Character: In case there is no ContactCell image available, then the DetailImageCharacter can be used to show the first character of the Name of the Contact. Headline: Name of the ContactCell or ObjectCell Sub Headline: Detail about ContactCell or ObjectCell * Attribute: Attribute of the ContactCell and ObjectCell.

Remember

Detail Image and Detail Image Character cannot be used together. Detail Image has priority over Detail Image Character.

Example

Because CollectionView contains a list of CollectionViewItem, CollectionView can be used in different configurations.

When the contact cells have profile image When the contact cells don't have profile image
When object cells have detailed image When object cells don't have detailed image

Construction

The CollectionView Cell can be created either by the constructor in code or by declaring an CollectionView element in XML like this:

1
2
3
4
5
6
7
8
9
<com.sap.cloud.mobile.fiori.object.CollectionView
            android:id="@+id/collectionView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:header="Collection View Demo"
            app:footer="SEE ALL"
            tools:minHeight="200dp">

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

The above XML declaration creates a CollectionView with:

  • app:header="Collection View Demo" set the header on the CollectionView.
  • app:footer="SEE ALL" set the footer on the CollectionView.

You can then add CollectionView Items to a CollectionView by attaching a CollectionViewAdapter. CollectionViewAdapter is a subtype of RecyclerView.Adapter which provides CollectionViewItems to CollectionView.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
collectionView.setCollectionViewAdapter(new CollectionView.CollectionViewAdapter() {

         @Override
         public void onBindViewHolder(@NonNull CollectionViewItemHolder collectionViewItemHolder, int i) {
            // Bind the CollectionViewHolder with item.
         }

         @Override
         public int getItemCount() {
            return 0; // How many elements?
         }
});

Each CollectionViewItemHolder contains a CollectionViewItem accessible as collectionViewItemHolder.collectionViewItem.

Additional Information

Gradient On Partial Child

To provide an additional visual hint on the partially visible children, CollectionView allows you to apply gradients on ends of list of the CollectionViewItems. CollectionView applies the gradient on the end which has a partially visible element.

1
    collectionView.setPartialChildGradient(getResources().getColor(R.color.white, getTheme()));

The Footer on the Collection view is a Flat FioriButton. In the following example, you can attach a click listener to open another activity.

1
2
3
4
5
6
collectionView.setFooterClickListener(new View.OnClickListener() {
        @Override
            public void onClick(View v) {
                // your logic
        }
});