Profile Header

The Profile Header helps the user to recognize and learn more about a person. It may also allow the user to quickly contact that person without needing to drill down into his/her contact details.

Anatomy

A Profile Header consists of a profile image, object name (headline, and sub-headline), description, and contact actions. Structurally, ProfileHeader is very similar to ContactCell, but rendered in a way that is appropriate to display as a header in a profile detail floor plan.

Examples

Profile Header on a tablet:

Profile Header on a phone:

Usage

ProfileHeader can be used in the object details floor plan. The recommended approach is to bind ProfileHeader together with Toolbar via a seamless background (with shadow in between), while the Toolbar stays on the top, ProfileHeader can scroll underneath the Toolbar.

Construction

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

<com.sap.cloud.mobile.fiori.contact.ProfileHeader
    android:id="@+id/profileHeader"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="?attr/actionBarSize"
    android:elevation="4dp"
    app:contactActions="CALL,EMAIL,VIDEO_CALL,MESSAGE"
    app:description="@string/profile_header_description"
    app:descriptionWidthPercent=".60"
    app:detailImage="@drawable/ic_account_circle_black_24dp"
    app:detailImageDescription="@string/profile_header_detail_image_desc"
    app:preserveDetailImageSpacing="false"
    app:headline="@string/profile_header_headline"
    app:lines="2"
    app:subheadline="@string/profile_header_subheadline"/>
</com.sap.cloud.mobile.fiori.contact.ProfileHeader>

The above XML declaration creates a ProfileHeader with the following attributes:

• app:lines="2" Two lines of description are allowed.
• android:layout_marginTop="?attr/actionBarSize" This sets the margin top to be the action bar height. A trick is to place Profile Header under the toolbar with desired shadow and scrolling behavior.
• android:elevation="4dp" Elevates Profile Header.

Fields

Image

An image provides visual representation of the contact and is highly recommended.

mProfileHeader.setDetailImage(R.drawable.portrait);

Headline

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

mProfileHeader.setHeadline(obj.getName());

Sub-Headline

The sub-headline appears under headline to display additional information, such as the contact's title.

mProfileHeader.setSubheadline(obj.getTitle());

Description

This is typically a longer string of text, such as the address of the contact. In contrast to ContactCell, description can be displayed on both phones and tablets.

mProfileHeader.setDescription(obj.getAddress());

Contact Actions

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

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

or via ImageButton child elements:

<com.sap.cloud.mobile.fiori.contact.ProfileHeader
    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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_profile_group="ACTION"
        android:src="@drawable/ic_phone_black_24dp"
        />
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_profile_group="ACTION"
        android:src="@drawable/ic_email_black_24dp"
        />
</com.sap.cloud.mobile.fiori.contact.ProfileHeader>

Tip

app:layout_profile_group is used rather than app:layout_contact_group.

Or in code:

mProfileHeader.setContactActions(ContactCell.ContactAction.CALL, ContactCell.ContactAction.EMAIL, ContactCell.ContactAction.VIDEO_CALL, ContactCell.ContactAction.MESSAGE);
mProfileHeader.getContactActionView(0).setEnabled(false);
mProfileHeader.getContactActionView(1).setEnabled(true);
mProfileHeader.getContactActionView(1).setOnClickListener(l);
...

Toolbar Connection

To get a seamless connection between Toolbar and ProfileHeader, some tweaks must be made to Android AppBarLayout. Use the same technique as is used for Object Header.

Style

Please refer to the Contact Cell style guide. The differences are:

• The style reference in FioriTheme becomes profileHeaderStyle.
• The default style is called ProfileHeader.
• The text appearances are called TextAppearance.Fiori.ProfileHeader.Headline, etc.

API Reference

ProfileHeader

---

Last update: June 15, 2023