Command Button

Description

Command Button is a stylized RealWear speech button. There are five distinct prepackaged styles that can be easily applied to the Command Button, all of which conform to RealWear’s design principles. Developers can also apply their own style to the Command Button and change fields to better suit their own application.

Example

https://github.com/realwear/UXLibrary-Example/blob/master/app/src/main/java/com/realwear/uxlibrary_example/buttonsexample/CommandButtonExampleActivity.kt

Usage

Command Button extends from the Android AppCompatButton and functions in the same basic way. Developers can choose to insert the component in an XML layout file or to create the view programmatically.

<com.realwear.ux.view.CommandButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

or

val commandButton = CommandButton(context)

There are five prepackaged UX Library styles that can be set for the Command Button. Each button style offers a distinct appearance that can be suitable for a particular situation all while conforming to the general RealWear design style. If no style is explicitly set by the developer, the Command Button will default to Contained Button style.

1. Contained Button
2. Text Button
3. Large Text Button
4. Small Text Button
5. WearML Indicator

<com.realwear.ux.view.CommandButton
    ...
    style="@style/ContainedButton" />

Developers can create their own custom style that extends from a RealWear style and update the fields to adapt their component to suit their app better. For example, a developer could extend from the Contained Button style and change the background tint color:

<style name="RedContainedButtonStyle" parent="ContainedButton">
    <item name="android:backgroundTint">@android:color/holo_red_light</item>
</style

Regardless of which style is set on the CommandButton, fields set in the XML layout file or programmatically will take precedence, allowing the user to control the appearance of each individual Command Button:

<com.realwear.ux.view.CommandButton
    ...
    style="@style/ContainedButton"
    android:textColor="@android:color/holo_blue_bright" />

Command Button styles come with default textColor and backgroundTint, but the developer has the ability to override these parameters with their app theme, which will be automatically implemented on all Command Buttons (unless specifically set for the component in XML or programmatically, as shown above.)

<style name="MyAppTheme">
    <item name="android:textColor">@android:color/holo_red_light</item>
</style>

Command Buttons can also be set as enabled/disabled and selected/unselected. Disabling the Command Button will change the background tint color and text color as well as unregister the voice command for that component. The Text Button styles for Command Button can be set as unselected, which will change the font weight and text color. This can be used to visually display information about the buttons to the user, depending on the developer’s specific use case.

<com.realwear.ux.view.CommandButton
    ...
    android:enabled="false" />

or

my_text_button.isSelected = true
my_text_button.isSelected = false