ADF Mobile : Display Custom Springboard layout with 3 * 3 matrix

Scenario here is to display 3 * 3 matrix dynamic table in custom springboard amx page using ApplicationFeatures data control with Features data collection.

Using amx:tableLayout only we might not be able to get the required structure. We need to use amx:panelGroupLayout with inlineStyle to achieve the above scenario. Credit goes to Matt Cooper, I have extracted the idea based on one of his forum reply. Here is the code below.

<amx:tableLayout id="tl1" shortDesc="features-table" inlineStyle="width:100%;">
  <amx:rowLayout id="rl1">
 <amx:cellFormat id="cf1" shortDesc="features-column" inlineStyle="width:100%;">
   <amx:panelGroupLayout id="pgl1" layout="wrap">
  <amx:iterator var="row" value="#{bindings.features.collectionModel}" id="i1">
    <amx:panelGroupLayout id="plam2" inlineStyle="width:33%;display:inline-block;" halign="center"
        valign="middle">
   <amx:tableLayout id="tl2">
     <amx:rowLayout id="rl2">
    <amx:cellFormat id="cf2" halign="center" valign="middle">
      <amx:commandLink id="cl1" actionListener="#{bindings.gotoFeature.execute}">
     <amx:image id="i2" source="/images/#{row.name}-springboard.png"
          inlineStyle="width:36px;height:36px"/>
     <amx:setPropertyListener from="#{row.id}" to="#{pageFlowScope.FeatureId}" type="action"/>
      </amx:commandLink>
    </amx:cellFormat>
     </amx:rowLayout>
     <amx:rowLayout id="rl3">
    <amx:cellFormat id="cf3" halign="center" valign="middle">
      <amx:commandLink id="cl2" actionListener="#{bindings.gotoFeature.execute}">
     <amx:outputText value="#{row.name}" id="ot2"/>
     <amx:setPropertyListener from="#{row.id}" to="#{pageFlowScope.FeatureId}" type="action"/>
      </amx:commandLink>
    </amx:cellFormat>
     </amx:rowLayout>
   </amx:tableLayout>
   <amx:spacer id="s2" height="25"/>
    </amx:panelGroupLayout>
  </amx:iterator>
   </amx:panelGroupLayout>
 </amx:cellFormat>
  </amx:rowLayout>
</amx:tableLayout>

Notice: - In panelGroupLayout, I have set the width to 33%, since I need 3 columns per row.  Adjust the width as desired to fit the number of features Items per row based on our requirements.

Application screen looks like below when it deployed and run on Android Device/Emulator. Click on any image/link will take you to the respective feature tab.

You can download the sample workspace from here. You can get more details on Configuring the custom Springboard and Navigation Bar Behavior.