Collection View

CollectionView is an alternative view for ObjectCell and ContactCell. It emphasizes an image and helps users identify each Object or Contact. If an image is not a 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 CollectionView consists of a header, a 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 the major visual item of the cell. It can be an 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.

Layouts of CollectionView

CollectionView supports two different layouts.

Horizontal Linear Layout

Horizontal layout presents CollectionViewItems horizontally with (n + 0.5) elements. One element is partially visible to indicate that there are more elements. Users can interact with CollectionView by scrolling horizontally. There is a white gradient applied by default to the partially visible items.

GridLayout

GridLayout presents CollectionViewItems in a row-column format. There are no partial elements in this layout. The number of columns is calculated based on the available width to the CollectionView. This layout only supports vertical scrolling.

Example

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

When object cells have detailed image	CollectionView with GridLayout

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 a CollectionView element in XML like this:

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

By default, CollectionView uses LinearLayout. You can change the layout using collectionView.setCollectionLayoutType(CollectionView.LayoutType)

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.

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 lists of the CollectionViewItems. CollectionView applies the gradient on the end that has a partially visible element.

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

Attach Listener to the Footer of CollectionView

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

collectionView.setFooterClickListener(new View.OnClickListener() {
        @Override
            public void onClick(View v) {
                // your logic
        }
});

---

Last update: November 18, 2021