Create an Android SAP Cloud Platform App using Kotlin and the SAP Fiori Mentor -- Part 2

[Dan_vL]

In part one of this blog post, a Kotlin project was created using the SAP Cloud Platform SDK for Android wizard. Code was then added to retrieve supplier data. In this blog, the Fiori Mentor app will be used to explore some of the controls available in the SAP Cloud Platform SDK for Android. The settings of those controls can be configured within the mentor app. Once the settings have been selected, code snippets are provided which can then be copied into an app that wishes to make use of the controls. Specifically a SAP Fiori progress bar will be added to indicate a network request is occurring while the data is being retrieved. Once the data is retrieved, the supplier data will be shown in SAP Fiori contact cells. Further information on how these controls are intended to be used is available at Progress Indicators (Fiori for Android Design Guidelines) and Object Cell (Fiori for Android Design Guidelines).

Install and Try Out the SAP Fiori Mentor

In this section it will be demonstrated how the SAP Fiori Mentor app can be used to explore and quickly add SAP Fiori for Android controls to an app.

1. Install the SAP Fiori Mentor app from the Google Play Store.
   
   
   It is recommended to view the app on a tablet if possible. Also note that it can be installed on an Android emulator if the emulator includes the Google Play Store.
   


2. Open the app and switch to the UI Components tab.
   
   
   Various Fiori for Android components are shown. Tap on the Progress Indicator tile.


3. The various settings of the progress indicator can be configured.
   Set the style to be Horizontal. Notice that progress indicator changes from a circular design to a horizontal one.
   


4. Tap on the See Code button to view the code needed to display a progress indicator with the provided settings.
   
   Notice that the code is provided in Kotlin or Java.
   
   
   
   The XML for the layout is also provided.
   


5. There are multiple ways that the code can be shared from the Fiori Mentor app to Android Studio.
   

Add a SAP Fiori Progress Bar

In this section, code to show a progress bar while the suppliers' data is retrieved will be added.

1. In Android Studio, open the file res/layout/simplelayout.xml.
   Switch to the Text tab and replace the XML with that from below.
   

   
   
   <?xml version="1.0" encoding="utf-8"?>
   
   <LinearLayout 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:layout_width="match_parent"
   
       android:layout_height="match_parent"
   
       android:orientation="vertical"
   
       tools:context=".SimpleActivity">
   
   
   
       <com.sap.cloud.mobile.fiori.indicator.FioriProgressBar
   
           android:id="@+id/progressBar"
   
           android:layout_margin="8dp"
   
           android:layout_width="match_parent"
   
           android:layout_height="wrap_content"
   
           app:indeterminate="true"
   
           style="@style/FioriProgressbar.Horizontal" />
   
   
   
       <TextView
   
           android:layout_width="match_parent"
   
           android:layout_height="wrap_content"
   
           android:layout_margin="8dp"
   
           android:layout_marginStart="8dp"
   
           android:text="Hello World!" />
   
   
   
   </LinearLayout>
   
   

   
   Notice that it changes the layout from a ConstraintLayout to a LinearLayout and adds FioriProgressBar.
   


2. We now need to add code to hide the FioriProgressBar when the request to retrieve suppliers completes.
   In SimpleActivity.kt, add the below code to the getSuppliers method just above the for loop.
   

   var progressBar: FioriProgressBar = findViewById(R.id.progressBar)
   
   progressBar.visibility = View.GONE

   
   


3. Run the app and notice that when the page opens, it displays the progress bar while the data is loading.
   

Show the Suppliers in SAP Contact Cells

In this section the supplier will be displayed in a list using SAP Fiori contact cells.

1. In the SAP Fiori Mentor app, examine the Contact Cell control.
   


2. Copy the layout from the Fiori Mentor App (or from the code below) to a new res/layout/contactcell.xml file.
   

   <?xml version="1.0" encoding="utf-8"?>
   
   <com.sap.cloud.mobile.fiori.contact.ContactCell
   
       xmlns:android="http://schemas.android.com/apk/res/android"
   
       xmlns:app="http://schemas.android.com/apk/res-auto"
   
       app:headlineLines="1"
   
       app:lines="2"
   
       app:detailImageShape="oval"
   
       app:preserveDetailImageSpacing="true"
   
       app:contactActions="CALL,EMAIL"
   
       android:layout_width="match_parent"
   
       android:layout_height="wrap_content"/>
   
   

   
   


3. In SimpleActivity.kt, add the following functions.
   

   fun showRecycler(suppliers: List<Supplier>) {
   
       val recycler = RecyclerView(this)
   
       recycler.layoutManager = LinearLayoutManager(this, RecyclerView.VERTICAL, false)
   
       recycler.adapter = ContactCellAdapter(suppliers)
   
       setContentView(recycler)
   
   }
   
   
   
   class ContactCellAdapter(private val values: List<Supplier>) : RecyclerView.Adapter<ContactCellAdapter.ViewHolder>() {
   
       override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
   
           return ViewHolder(
   
                   LayoutInflater.from(parent.context).inflate(
   
                           R.layout.contactcell,
   
                           parent,
   
                           false
   
                   ) as ContactCell
   
           )
   
       }
   
   
   
       override fun getItemCount(): Int = values.size
   
   
   
       override fun onBindViewHolder(holder: ViewHolder, position: Int) {
   
           val item = values[position]
   
   
   
           with(holder.view) {
   
               headline = item.supplierName
   
               subheadline = item.city + ", " + item.country
   
               detailImageCharacter = item.supplierName?.substring(0, 1)
   
   
   
               getContactActionView(0)?.setOnClickListener { view: View ->
   
                   val intent = Intent(Intent.ACTION_DIAL,
   
                           Uri.fromParts("tel",
   
                                   item.phoneNumber,
   
                                   null))
   
                   view.context.startActivity(intent)
   
               }
   
               getContactActionView(1)?.setOnClickListener { view: View ->
   
                   val uri = Uri.parse("mailto: " + item.emailAddress)
   
                   val intent = Intent(Intent.ACTION_SENDTO, uri)
   
                   view.context.startActivity(intent)
   
               }
   
           }
   
       }
   
       
   
       class ViewHolder(val view: ContactCell) : RecyclerView.ViewHolder(view)
   
   }
   
   

   
   The link, setOnClickListener transformation provides a few more examples and details on how the setOnClickListerner lambdas work in the above code.


4. In SimpleActivity.kt, in the function getSuppliers, uncomment the line showRecycler(suppliers).


5. Run the app and notice that the suppliers are now shown in a list of SAP Fiori contact cells.
   
   
   When the phone or email icon is pressed, the email or dialer will open.
   

Congratulations. You have created a Kotlin app with help of the Fiori Mentor app that displays supplier information using two SAP Fiori for Android controls.