== Setup ==
* The first step is to configure the start screen data using an xml in order for UBIK® to recognize the different tabs and buttons. The xml file , which must have the name '''css_config.xml''', should be placed in a subfolder under the '''''SD_CARD''/Android/data/''APP_PACKAGE_NAME''/files/UIConfigurations''' where{| class="UBIKwikitable" folder on | width = "50%"|-! Parameter!! Purpose|-| ''SD_CARD''|| represents the root of the external storage of a device|-| ''APP_PACKAGE_NAME''|| is the concatenation of "com.augmensys.ubik." and the application name, e.g. ''demo'', ''manualtest'', ''companyname''s SD cardetc. |}
* After the folder is configured, the next step is to validate the XML configuration file against the [http://wiki.augmensys.com/index.php/File:Start_Screen_Configuration_Schema.zip schema] using an online validator. A solution can be found at [http://www.utilities-online.info/xsdvalidation/ Online XML Schema Validator]. The schema used to validate against will be found inside the UBIK Folder and is named ConfigurableStartScreenSchema.
<Tab caption="Content">
<ContentBrowserButton caption="Content Browser"/>
<ContentBrowserButton caption="Events" UBIK-UID="31aaa5c9-85dd-4243-9cf8-89d712d32405" iconPath="/sdcard/Augmensys/events.png"/>
</Tab>
<Tab caption="AR1">
<MapsButton/>
<POIViewButton caption="AR View"/>
<CustomIntentButton caption="Map of Linz" iconPath="/sdcard/Augmensys/linz.png">
<TargetURI>
https://www.google.com/maps/place/Linz/@48.295065,14.327405,12z/data=!3m1!4b1!4m2!3m1!1s0x47739595fa99854d:0x7c53292c577975c4
<TargetMapsButton caption="Flow Controller 213" UBIK-UID="2ccd91c0-9cee-42f3-9d1d-be745908457d"/>
</Tab>
<Tab caption="AR2">
<IDMarkerScanButton caption="ID Marker Scan"/>
</source>
== Tab Groups groups ==The user can configure tab groups in the XML, however the allowed number of tabs to configure may vary depending on the screen size of the device. As parameters, the caption is mandatoryThey will be used as groupings for buttons.
== Buttons ==
* Action + Parameters if needed
For now, the {{Hint|The icons are specified by their relative paths under '''''SD_CARD''/Android/data/''APP_PACKAGE_NAME''/files/UIConfigurations/CSSButtonIcons''' }} The supported button types are as follows: (The buttons demonstrated in the screenshots are the results of the example XML configuration.)
* Content Browser Button : Opens a content browser for displaying an object or the root if no object/uid is specified.
<br/>[[File:UI_Android_CSS_Buttons_Content_Browser.jpg|border|alt=Content Browser Button|Content Browser Button]][[File:UI_Android_CSS_Buttons_Content_Browser_Events.jpg|border|alt=Content Browser Button For Events|Content Browser Button For Events]]
* Custom Intent Button (using a customized intent URI or target class) : Launches a certain application for the specified Intent.
<br/>[[File:UI_Android_CSS_Buttons_Custom_Intent.jpg|border|alt=Custom Intent Button|Custom Intent Button]]
* Maps Button : Opens {{UBIK}} map.
<br/>[[File:UI_Android_CSS_Buttons_Maps.jpg|border|alt=Maps Button|Maps Button]]
* Target Maps Button : Opens {{UBIK}} map for a target object.
<br/>[[File:UI_Android_CSS_Buttons_Target_Maps.jpg|border|alt=Target Maps Button|Target Maps Button]]
* ID Marker Scan Button : Starts ID marker scanning.
<br/>[[File:UI_Android_CSS_Buttons_ID_Marker_Scan.jpg|border|alt=ID Marker Scan Button|ID Marker Scan Button]]
* QR Scan Button : Starts QR code scanning.
<br/>[[File:UI_Android_CSS_Buttons_QR_Code_Scan.jpg|border|alt=QR Code Scan Button|QR Code Scan Button]]
* POI View Button : Opens {{UBIK}} POI view.
<br/>[[File:UI_Android_CSS_Buttons_POI_View.jpg|border|alt=POI View Button|POI View Button]]
* Configurable AR Button : Opens the markerless view.
<br/>[[File:UI_Android_CSS_Buttons_Config_AR.jpg|border|alt=Configurable AR Button|Configurable AR Button]]
* Configurable Image Marker Button : Opens the ID marker 3D view.
<br/>[[File:UI_Android_CSS_Buttons_Config_Image.jpg|border|alt=Configurable Image Marker Button|Configurable Image Marker Button]]
* AR Navigation POI View Button : Opens {{UBIK}} POI view with the AR navigation support.
<br/>[[File:UI_Android_CSS_Buttons_AR_Navigation.jpg|border|alt=AR Navigation Button|AR Navigation Button]]
* AR Navigation Maps Button : Starts navigating to the specified object.
<br/>[[File:UI_Android_CSS_Buttons_Nav_Maps.jpg|border|alt=Navigation Button|Navigation Button]]
Additionally== Configuration guidelines ==* The maximum number of tabs is 6. Once this limit is exceeded, Button parameter configurations the configuration is invalid and won't be shown.* The captions of tabs are optional. In case there's only one tab, the tab will be invisible.* The buttons should maintain always be nested inside tabs. Otherwise, the following guidelines:configuration is also invalid.
* When either the caption parameter or the icon parameter is not explicitly customized in the xml file, default caption and icons, specific to each button, are used.
* While configuring the custom intent button, either one should always specify one and only one of the target class or and the target URI should be specified. Otherwise, but not both the button is invalid and not neither. The later two cases the error will result in an errorbe shown.* The configuration of the UID parameter is obligatory for AR Navigation POI View Button, AR Navigation Maps View Button, RAG Navigation Maps View Button and Demo Navigation Target Maps View Button.
== Results ==
The result is that the tabs and buttons configured in the XML file will be visible and open the right activity once they are clicked.
The following screenshots demonstrates the results of the example XML configuration.
<br/>[[File:UI_Android_CSS_Buttons_Tab1.jpg|border|alt=The First Tab|The First Tab]]
<br/>[[File:UI_Android_CSS_Buttons_Tab2.jpg|border|alt=The Second Tab|The Second Tab]]
<br/>[[File:UI_Android_CSS_Buttons_Tab3.jpg|border|alt=The Third Tab|The Third Tab]]
After users log in, the buttons are enabled and colored. Upon being clicked, they should trigger different actions.
<br/>[[File:UI_Android_CSS_Buttons_After_Login.jpg|border|alt=Buttons After Login|Buttons After Login]]
[[Category:How-To]]
[[Category:UBIK Client]]
[[Category:UBIK Android]]