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
becomesprofileHeaderStyle
. - The default style is called
ProfileHeader
. - The text appearances are called
TextAppearance.Fiori.ProfileHeader.Headline
, etc.