Skip to Content

Use Fiori for Android Controls to Enhance Your Application.

test
0 %
Use Fiori for Android Controls to Enhance Your Application.
Details
// Explore More Tutorials

Use Fiori for Android Controls to Enhance Your Application.

11/30/2018

Beginner
20 min.
Enhance your application with the Object Cell and add a divider to cells in a list for customers.

You will learn

  • How to enhance your Android application with Fiori for Android controls


THIS TUTORIAL SERIES CAN ONLY BE EXECUTED AT TECHED as it is. Please find us at the Google booth in the AppSpace and we will provide everything you will need.

Step 1: Change master property for customer's screen

If your application is still running on your emulator then return to the entity list screen by pressing the back button twice. If you restarted your application or restarted the emulator the first screen of the app will be the entity list screen.

Back from detail screenBack from list screen

Tap on the Customers entity.

Entities screen

Notice that it displays the customer’s city rather than the customer’s name.

Customers Screen

This is because the app was generated from the OData service metadata, which does not indicate which of the many fields from the customer entity to display.

Customer metadata

In Android Studio, press Control+N and enter CustomersUiConnector to open the CustomersUiConnector.java file.
Change the value from City to LastName for the variable masterPropertyName.

Master Property

Run the app and notice that the Customers screen now displays the customer’s last name.

Customer Last Name

Each customer is displayed in an Object Cell, which is one of the Fiori UI for Android controls.

Object Cell

As seen above, an Object Cell can display more than one field. In the next two sections, the app will be modified to display different content in the Object Cells and a separator decoration will be added between rows. Another good source of info on Object Cells and other Fiori for Android controls is Fiori Android Design Guidelines.

Log on to answer question
Step 2: Display first name, last name, address and image

Go to Android Studio, press Control+N and enter ItemListActivity to open the ItemListActivity.java file.

Find ItemListActivity

Press Control+F12 and enter onBindViewHolder to move to the onBindViewHolder method.

Find onBindViewHolder

Comment out (select and press Ctrl+/) the following lines of code which set the ObjectView's headline, and detail image.

ItemListActivity

Below the commented lines, add the following code.

//This customization is for the customer's screen only
if (entityValueUiConnector.getConnectedObject().getDataType().equals(ESPMContainerMetadata.EntityTypes.customer)) {
    //Set the ObjectView's Headline with FirstName, LastName
    String name = entityValueUiConnector.getPropertiesWithValues().get("FirstName") + " " +
            entityValueUiConnector.getPropertiesWithValues().get("LastName");
    holder.contentView.setHeadline(name);

    //Set the ObjectView's SubHeadline with address
    String country = entityValueUiConnector.getPropertiesWithValues().get("Country");
    String address = entityValueUiConnector.getPropertiesWithValues().get("HouseNumber");
    address = address + " " + entityValueUiConnector.getPropertiesWithValues().get("Street");
    address = address + " " + entityValueUiConnector.getPropertiesWithValues().get("City");
    holder.contentView.setSubheadline(address);

    //Set the Status to be the country code
    holder.contentView.setStatus(country, 1);

    //Use a different image
    Drawable drawable = ContextCompat.getDrawable(getApplicationContext(), R.drawable.ic_account_circle_black_24dp);
    holder.contentView.setDetailImage(drawable);

    //Set the ObjectView to only show 2 lines per row instead of 3
    holder.contentView.setLines(2);
}
else {
    holder.contentView.setHeadline(masterPropertyValue);
    holder.contentView.setDetailImage(null);
    if(0 != masterPropertyValue.length()) {
        holder.contentView.setDetailImageCharacter(masterPropertyValue.substring(0, 1));
    } else {
        holder.contentView.setDetailImageCharacter("?");
    }

    holder.contentView.setSubheadline("Subheadline goes here");
    holder.contentView.setFootnote("Footnote goes here");
    holder.contentView.setIcon(Integer.toString(position + 1), 0);
    holder.contentView.setIcon(R.drawable.default_dot, 1, R.string.attachment_item_content_desc);
    holder.contentView.setIcon("!", 2);
}

Below the just pasted code, comment out (select and press Ctrl /) the lines that set the Subheadline, Footnote and Icon as that is now conditionally handled in the previously added code.

comment Headline

Notice that two of the classes, ESPMContainerMetadata and Drawable cannot be resolved and are shown in red.

ESPMContainerMetadata

Select each class and press Alt+Enter to make use of Android Studio quick fix to add the missing imports.

Run the app and notice the Customer’s screen has been customized.

Customers customized
Log on to answer question
Step 3: Add a divider

Press Ctrl+F12 and enter setupRecyclerView to move to the setupRecyclerView method.

Add the below lines:

LinearLayoutManager llm = new LinearLayoutManager(this);
recyclerView.addItemDecoration(new DividerItemDecoration(context, llm.getOrientation()));
Divider Code

Notice that two of the classes, LinearLayoutManager and DividerItemDecoration cannot be resolved. Select each class and press Alt+Enter to make use of Android Studio quick fix to add the missing imports.

Run the app and notice that each row in the Recycler View has a divider.

Customers screen with divider

Congratulations! You have customized the display of a Fiori for Android Object Cell.

Paste in the two lines of code which adds the divider to the Recycler View:
×

Next Steps

Back to top