UI Layout Style Change

Updated on 07 Feb 2024
1 Minute to read
Contributors

Print
Share
Dark
Light

Article Summary

Share feedback

Thanks for sharing your feedback!

User Interface Styles and Customization

With the Vuzix Blade 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.

Java

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

ActionMenuActivity(MainActivity.java) Modifications

The Final change that we are going to do is tell our ActionMenu To Auto Show when needed.

This is accomplished by a very simple change to our MainActivity.java file.

Open the MainActivity.java file (java/devkit.blade.vuzix.com.bladesampleapp). Find the method alwaysShowActionMenu and have it return false.

Java

@Override protected boolean alwaysShowActionMenu() {
	return false;
}

If you have a Blade, 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 BladeOS Launcher/Rail Widget to provide additional information to the users while the app is closed.

Let's get started with theLauncher/Rail Widget.

Next: Home Screen Widgets

Was this article helpful?

What's Next

Home Sceren Widgets

Table of contents

User Interface Styles and Customization
Layout Changes
ActionMenuActivity(MainActivity.java) Modifications