Skip to content

Contact Cell

Contact Cell is used to give quick access to the various methods of communicating with a contact. It is commonly found in an Object.

Anatomy

A Contact Cell consists of image, labels (headline, and sub headline), description, and contact actions. Comparing to Object Cell, Contact Cell does not have footnote, icon stack and statuses; secondary action becomes multiple contact actions; and the image border becomes a circle. A common rule for image shape is that object image should be rectangle while person image should be circle. Contact Cell Anatomy

Examples

Here is an example of Contact Cells on a tablet: Contact Cell Example

Here is an example of Contact Cells on a phone: Contact Cell Example

Usage

Contact Cell can be used inside a RecyclerView, ListView or other ViewGroups. The example code below assumes the parent view is RecyclerView.

Construction

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<com.sap.cloud.mobile.fiori.contact.ContactCell  xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:lines="3"
    app:descriptionWidthPercent=".60"
    app:preserveDetailImageSpacing="true"
    app:asyncRendering="true"
    >

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_contact_group="ACTION"
        />
</com.sap.cloud.mobile.fiori.contact.ContactCell>

Then the XML can be inflated in a RecyclerView.Adapter.

1
2
3
4
5
6
7
public ViewHolder onCreateViewHolder(
        ViewGroup parent, int viewType) {
    Context context = parent.getContext();
    ContactCell view = inflater.inflate(R.layout.contact_cell, parent,
                false);
    return new ViewHolder(view);
}

The above XML declaration creates an ContactCell with the following attributes:

  • app:lines="3" 3 lines of text enabled, with room for headline and sub headline. On tablet, description field can show at most 3 lines of text. (description is hidden on a phone.)
  • app:asyncRendering="true" On tablet, description field will delay the rendering and show "Loading..." first. This is a performance tuning approach to speed up frame rendering during scrolling since multiple line text measurement and layout is expensive. No effect on phone.
  • app:descriptionWidthPercent=".60" 60% horizontal space will be used for description, 40% will be used for headline. This percentage calculation excludes other fields, like image and statuses.
  • app:preserveDetailImageSpacing="true" When image for the ContactCell is missing, the space will be preserved to maintain consistent layout. A letter can be specified as the placeholder.

See Contact Cell XML attributes for all the XML attributes supported by ContactCell.

Fields

Image

An image provides visual representation of the contact and is highly recommended. Glide can be used to streamline image download and decryption without blocking UI.

1
2
3
4
5
RequestOptions cropOptions = new RequestOptions().placeholder(
        R.drawable.rectangle);
holder.target = mGlide.load(obj.getDetailImageUri()).apply(cropOptions).into(
        cell.prepareDetailImageView());
cell.setDetailImageDescription(R.string.avatar);

Note

For Glide to asynchronously load image into a view, the view instance must be created beforehand. cell.prepareDetailImageView() can make sure the image view exists. Also, to improve app accessibility, all images should provide content description, thus cell.setDetailImageDescription(R.string.avatar).

If image is missing, a letter can be used as placeholder instead.

1
2
cell.setDetailImage(null);//make sure we're not showing recycled images
cell.setDetailImageCharacter(obj.getName().substring(0, 1));

Headline

The headline/name is the main area for text content. The headline is the only mandatory content for ContactCell. Headline can be specified by:

1
cell.setHeadline(obj.getName());

Sub Headline

The sub headline is under headline to show more information such as the contact's title.

1
cell.setSubheadline(obj.getTitle());

Description

If a description has been defined, it will appear only in views with a tablet-like form factor. This is typically a longer string of text such as address of the contact.

1
cell.setDescription(obj.getAddress());

Contact Actions

Up to four action icons can be can be displayed in a view with a phone-like form factor, a profile image cannot be used if four action icons are to be used.

Action icons can be created in XML via "contactActions" attribute:

1
    app:contactActions="CALL,EMAIL,VIDEO_CALL,MESSAGE"

or via "ImageButton" child elements:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<com.sap.cloud.mobile.fiori.contact.ContactCell
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:headline="@string/testName"
    app:subheadline="@string/testTitle"
    app:description="@string/testAddress"
    app:detailImage="@drawable/ic_account_circle_black_24dp"
    app:detailImageDescription="@string/testDetailImageDesc"
    >
    <ImageButton
        android:id="@+id/contactCell3_s1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_contact_group="ACTION"
        android:src="@drawable/ic_phone_black_24dp"
        />
    <ImageButton
        android:id="@+id/contactCell3_s2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_contact_group="ACTION"
        android:src="@drawable/ic_email_black_24dp"
        />
</com.sap.cloud.mobile.fiori.contact.ContactCell>

Note

Notice the usage of app:layout_contact_group="ACTION". Without it, the child view will be ignored by ContactCell.

Or in code:

1
2
3
4
5
cell.setContactActions(ContactCell.ContactAction.CALL, ContactCell.ContactAction.EMAIL, ContactCell.ContactAction.VIDEO_CALL, ContactCell.ContactAction.MESSAGE);
cell.getContactActionView(0).setEnabled(false);
cell.getContactActionView(1).setEnabled(true);
cell.getContactActionView(1).setOnClickListener(l);
...

Style

Style of the component can be customized on application level or component level. Similar to Object Cell, the FioriTheme uses a contactCellStyle which points to the ContactCell style. Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!-- Base application theme. -->
<style name="AppTheme" parent="FioriTheme">
    <!-- Customize your theme here. -->
    <item name="contactCellStyle">@style/TestContactCell</item>
</style>
<style name="AppTheme.NoActionBar" parent="AppTheme">
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="FioriTheme.AppBarOverlay" />
<style name="AppTheme.PopupOverlay" parent="FioriTheme.PopupOverlay" />
<style name="TestContactCell" parent="ContactCell">
    <item name="headlineTextAppearance">@style/Test.ContactCell.Headline</item>
</style>
<style name="Test.ContactCell.Headline" parent="TextAppearance.Fiori.ContactCell.Headline">
    <item name="android:textColor">@color/colorPrimaryDark</item>
    <item name="android:textStyle">italic</item>
</style>

AppTheme will be your application main theme, while AppTheme.NoActionBar can be used when the default toolbar is not used. Here we're only customizing the FioriTheme with a new contactCellStyle, which in turn only customizes the headline text appearance. The headline of ContactCell is still going to use the default font and size defined in TextAppearance.Fiori.ContactCell.Headline and all other fields in ContactCell will keep the default style.

The AppTheme can then be applied to your application in AndroidManifest.xml:

1
2
3
4
5
    <application
        android:name=".DemoApplication"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme">

On the other hand, if just one instance of the ContactCell needs to be customized, you can set the text appearances as this:

1
2
3
4
5
6
7
    <com.sap.cloud.mobile.fiori.contact.ContactCell
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:headlineTextAppearance="@style/Test.ContactCell.Headline"
        app:subheadlineTextAppearance="@style/Test.ContactCell.Subheadline"
        app:descriptionTextAppearance="@style/Test.ContactCell.Description"
        ...

Data Binding

Please reference Object Cell for an example.

API Reference

ContactCell