Skip to content

Profile Header

The profile header helps the user 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 profile image, name (headline, and sub headline), description, and contact actions. Structure wise, ProfileHeader is very similar to ContactCell but rendered in a different way that is appropriate to show as a header in a profile detail floorplan. Profile Header Anatomy

Example

Here is an example of Profile Header on a tablet: Profile Header Example Here is an example of Profile Header on a phone: Profile Header Example

Usage

ProfileHeader can be used in object details floorplan. The recommended approach is to bind ProfileHeader together with Toolbar via a seamless background (now 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 an ProfileHeader 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.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 decalration creates an ProfileHeader with the following attributes:

  • app:lines="2" 2 lines of description 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 toolbar with desired shadow and scrolling behavior.
  • android:elevation="4dp" Elevates Profile Header.

See Profile Header XML attributes for all the XML attributes supported by ProfileHeader.

Fields

Image

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

1
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:

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

Sub Headline

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

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

Description

This is typically a longer string of text such as address of the contact. Different to ContactCell, description can be shown on both phone and tablet.

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

Contact Actions

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

Note

app:layout_profile_group is used rather than app:layout_contact_group.

Or in code:

1
2
3
4
5
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. It's the same technique used for Profile Header.

Style

Please check 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