Skip to content

Object Header

The object header provides a quick view of the most important or most frequently-used information about one instance of an object. It is visually separated from the content area below. As the object header provides the first glimpse of the object on the screen, the information it contains should be clear and concise.

Anatomy

An Object Header consists of image, object name (headline, sub headline), additional information (tags, footnote, body), description, and KPI. See the structure on tablet (>1024dp) below: Object Header Anatomy Here is the structure of Object Header on smaller screens (<1024dp, phone or tablet portrait mode): Object Header Anatomy

Example

Here is an example of Object Header on a tablet: Object Header Example On a phone, content of Object Header will be split into different pages if necessary: Object Header Phone Example

Usage

Object Header is used in object details floorplan. The recommended approach is to bind ObjectHeader together with Toolbar via a seamless background (now shadow in between), while the Toolbar stays on the top, ObjectHeader can scroll underneath the Toolbar.

Construction

Object Header can be created either by the constructor in code or by declaring an ObjectHeader element in XML like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
    <com.sap.cloud.mobile.fiori.object.ObjectHeader
        android:id="@+id/objectHeader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="?attr/actionBarSize"
        android:elevation="4dp"
        app:body="@string/object_header_body"
        app:description="@string/object_header_description"
        app:detailImage="@drawable/object_placeholder"
        app:detailImageDescription="@string/object_header_image_desc"
        app:footnote="@string/object_header_footnote"
        app:headline="@string/object_header_headline"
        app:subheadline="@string/object_header_subheadline">
    </com.sap.cloud.mobile.fiori.object.ObjectHeader>

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

  • android:layout_marginTop="?attr/actionBarSize" This set the margin top to be the action bar height. A trick to place Object Header under toolbar with desired shadow and scrolling behavior.
  • android:elevation="4dp" Elevates Object Header.
  • app:body="@string/object_header_body" Sets the body text.

See Object Header XML attributes for all the XML attributes supported by ObjectHeader.

Fields

Image

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

1
mObjectHeader.setDetailImage(R.drawable.object_placeholder);

Headline

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

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

Sub Headline

The sub headline is under headline to show more information.

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

Body

The body is under sub headline and shows further information.

1
cell.setBody(obj.getBody());

Tags

Tags are usually system-generated and may be used to indicate categories, types, or statuses. They use a different visual representation than plain text, and function as independent bits of information. There can be a maximum of three tags displayed in the header; if more than three are required, the information should instead be placed in the content area. Tags, body and footnote are collectively called additional information, which could be under name block (which includes headline and sub headline), or side by side with the name block on a tablet.

1
2
3
mObjectHeader.setTag(R.string.object_header_tag1, 0);
mObjectHeader.setTag(R.string.object_header_tag2, 1);
mObjectHeader.setTag(R.string.object_header_tag3, 2);
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<com.sap.cloud.mobile.fiori.common.TextChip
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/object_header_tag1"
    app:layout_header_group="TAG" />

<com.sap.cloud.mobile.fiori.common.TextChip
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/object_header_tag2"
    app:layout_header_group="TAG" />

<com.sap.cloud.mobile.fiori.common.TextChip
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/object_header_tag3"
    app:layout_header_group="TAG" />

Note

app:layout_header_group="TAG" assigns the view to "TAG" group. TextChip is a simple customized TextView that comes with the SDK. You could also use any other "chip" components.

Footnote

The footnote is under body and shows further information.

1
cell.setFootnote(obj.getFootnote());

Description

If a description has been defined, it will appear in regular mode only. This is typically a longer string of text than what is displayed in the title content.

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

KPI

This could be any View or ViewGroup for you to plug into ObjectHeader. It's usally some analytics information, thus the name KPI (Key Performance Index).

1
2
3
4
View analyticsView = View.inflate(ObjectHeaderActivity.this,
        R.layout.content_object_header_detail, null);
configureDetailText(analyticsView);
mObjectHeader.setDetailView(analyticsView);
1
app:layout_header_group="DETAIL"

Statuses

Up to two attributes can be displayed, stacked vertically, to show attributes of the object. A status could be either text or image.

1
2
cell.setStatusColor(BaseObjectHeaderActivity.sSapUiNegativeText, 0);
cell.setStatus(R.drawable.ic_error, 0, statusDescId);

Or, in XML:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_warning_black_24dp"
    android:tint="@color/sap_ui_button_reject_border_color"
    android:contentDescription="@string/error"
    app:layout_header_group="STATUS" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/object_header_status"
    android:textColor="@color/sap_ui_button_reject_border_color"
    app:layout_header_group="STATUS" />

Note

The only difference comparing to ObjectCell is that app:layout_header_group attribute is used.

Toolbar Connection

To get a seamless connection between Toolbar and ObjectHeader, some tweaks must be made to Android AppBarLayout.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_content"
    android:fitsSystemWindows="true"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--appbar_always_elevated makes sure AppBarLayout always has 4dp elevation. By default it's 0dp.-->
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stateListAnimator="@drawable/appbar_always_elevated"
        android:background="?attr/colorPrimary">

        <!--Setting titleEnabled and expandedTitleTextAppearance to get rid of title animation-->
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"
            app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
            app:titleEnabled="false">

            <!--layout_marginTop must be the toolbar height. ObjectHeader and Toolbar are both
            elevated to 4dp so there's no shadow between them.-->
            <com.sap.cloud.mobile.fiori.object.ObjectHeader
                android:id="@+id/objectHeader"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="?attr/actionBarSize"
                android:elevation="4dp"
                tools:layout_editor_absoluteY="8dp">
                ...
            </com.sap.cloud.mobile.fiori.object.ObjectHeader>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:elevation="4dp"
                android:background="?attr/colorPrimary"
                app:layout_collapseMode="pin"
                app:theme="@style/AppTheme.AppBarOverlay"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <!--layout_behavior must be used together with AppBarLayout to achieve desired scrolling effect.-->
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        ...
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

And the appbar_always_elevated state list is defind as:

1
2
3
4
5
6
7
8
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <objectAnimator android:propertyName="elevation"
            android:valueTo="4dp"
            android:valueType="floatType"
            android:duration="1"/>
    </item>
</selector>

Some takeaways:

  • AppBarLayout is always elevated
  • Title transition in CollapsingToolbarLayout should be disabled
  • android:layout_marginTop="?attr/actionBarSize" on ObjectHeader to make sure they do not overlap when not scrolled

Style

Please check Object Cell style guide. The differences are:

  • The style reference in FioriTheme becomes objectHeaderStyle
  • The default style is called ObjectHeader
  • The text appearances are called TextAppearance.Fiori.ObjectHeader.Body etc

API Reference

ObjectHeader