UI Layout Style Change

User Interface Styles and Customization

With the Vuzix Shield you can develop and create your own unique user interface (UI).

Considering the unique design and screens, we found some designs better than others.

If you want to learn more about some of our suggestions for Layout Styles and other features, you can read the UX Style Guides Section or follow along with the Template Application from our Code Sample area.

Here we will modify our Sample App. The Change will be to the Main Layout XML and in ActionMenuActivity (MainActivity) .

With those changes, we will now have an application with a center View Layout with PopUp Action menu.

Layout Changes

For the Layout Changes we will open our activity_main.xml layout file (res/layout).

Now you can modify the Layout like any other Android Layout by putting the content anywhere you want.

The default layout will provide a Top Center view since our Action Menu will occupy the bottom section.

Let's change the Relative location of our Current TextView to be Top Left.

Then let's put two new TextViews that are Top Right and one that is below those two in the Center.

Notice that for the first TextView we only had to add a change to say alignParentStart.

Also for the new TextViews, they are the same from mainTextView, with the exception of the ID and the alignment parameters.

It is good practice to use the strings.xml file in the value folder to avoid hardcoding text for these TextViews. Add the strings Hello, World and Center to that file.

values/strings

XML

<resources>
	<string name="app_name">ShieldSampleApp</string>
	<string name="appwidget_text">EXAMPLE</string>
	<string name="add_widget">Add widget</string>
	<string name="app_widget_description">This is an app widget description</string>
	<string name="Hello">This is an app widget description</string>
	<string name="World">This is an app widget description</string>
	<string name="Center">This is an app widget description</string>
</resources>

XML

<TextView 
	android:id="@+id/mainTextView"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@string/Hello"
	android:layout_alignParentStart="true"
/>
<TextView 
	android:id="@+id/mainTextView2"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="@string/World"
	android:layout_alignParentEnd="true"
/>
<TextView
	android:id="@+id/mainTextView3"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
 	android:layout_below="@id/mainTextView"
	android:layout_centerInParent="true"
	android:text="@string/Center" 
/>

If you have a Shield , you can run the Sample Application.

When the App starts you will notice that there will be NO action menu, just your main UI.

To trigger the action menu, a simple SELECT gesture (one-finger tap) will pop up the action menu.

To close the action menu you can just do a BACK gesture (two-finger tap).

Next is building a Simple ShieldOS Launcher/Rail Widget to provide additional information to the users while the app is closed.

Let's get started with theLauncher/Rail Widget.