Skip to content

Key Value Cell

The Key Value Cell is a simple key/value pair cell. It is ideal for displaying sets of data that also need to display their labels. Key Value Cells are typically found in the Object and Object Details floorplans.

Anatomy

A Key Value Cell consists key and value labels. Optionally the value label can be associated with a specific action (for example - phone number or email address). Here is an example with expandable value text: Key Value Cell Example

Another example with actionable value: Key Value Cell Actionable Value Example

Usage

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

Construction

Key Value Cell can be created either by the constructor in code or by declaring an KeyValueCell element in XML like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<com.sap.cloud.mobile.fiori.misc.KeyValueCell 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"
    android:background="?attr/selectableItemBackground"
    app:keyText="@string/testHeadline"
    app:valueText="@string/testSubheadline"
    app:lines="0">

</com.sap.cloud.mobile.fiori.misc.KeyValueCell>

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();
    KeyValueCell view = inflater.inflate(R.layout.key_value_cell, parent,
                false);
    return new ViewHolder(view);
}

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

  • app:lines="0" Use dynamic line number. Value text will be dynamically laid out, if more than 6 lines of text is given, the expand icon will appear. Label is always 1-line text. The accepted line values for value text are 0 to 6, with 0 as the default value. If a non-zero value is used, the cell will always use specified space to keep all cells consistent.
  • app:keyText Sets the key text.
  • app:valueText Sets the value text.

See Key Value Cell XML attributes for all the XML attributes supported by KeyValueCell.

Fields

Key

The key is the label to describe the content

1
cell.setKey(obj.getLabel());

Value

The data for a particular label. If there is a specific action associated with it (e.g. phone number or email address) then the value will be tint color.

1
2
3
4
5
cell.setValue(obj.getPhone());
cell.setValueOnClickListener(new View.OnClickListener() {
    ...
    }
});//after associating the listener, the value will be tinted

Expandable Value

By default, value text will be laid out in at most 6 lines, and if more text is to be seen, an expand icon will appear to enable expansion. If for some reason, you want to disable the expandable feature, e.g. in a multi-column layout where you want to keep the cell height unchanged, setExpandable(false) can be called to disable this feature.

Style

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!-- Base application theme. -->
<style name="AppTheme" parent="FioriTheme">
    <!-- Customize your theme here. -->
    <item name="keyValueCellStyle">@style/TestKeyValueCell</item>
</style>
<style name="TestKeyValueCell" parent="KeyValueCell">
    <item name="keyTextAppearance">@style/Test.KeyValueCell.Key</item>
</style>
<style name="Test.KeyValueCell.Key" parent="TextAppearance.Fiori.KeyValueCell.Key">
    <item name="android:textColor">@color/colorPrimaryDark</item>
    <item name="android:textStyle">italic</item>
</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 KeyValueCell needs to be customized, you can set the text appearances as this:

1
2
3
4
5
6
    <com.sap.cloud.mobile.fiori.contact.KeyValueCell
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:keyTextAppearance="@style/Test.TextAppearance.Fiori.KeyValueCell.Key"
        app:valueTextAppearance="@style/Test.TextAppearance.Fiori.KeyValueCell.Value"
        ...

API Reference

KeyValueCell