Skip to content

Styled Text View

Jump to bottom
RealWearDevBot edited this page Aug 28, 2020 · 1 revision

Description

Styled Text View is a stylized Text View. There are 13 prepackaged styles that can be easily applied to a Styled Text View, all of which conform to RealWear’s design principles. If no style is specifically set, Styled Text View will default to the Android TextView style. 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/textviewexample/StyledTextViewExampleActivity.kt

Usage

Styled Text View extends from the Android AppCompatTextView and functions in the same basic way. Developers can choose to insert the view in an XML layout file to to create the view programmatically.

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

There are 13 prepackaged UX Library styles that can be set for a Styled Text View. Each style is adapted to suit different needs while conforming to RealWear design guidelines.

  1. H1 Style
  2. H2 Style
  3. H3 Style
  4. H4 Style
  5. H5 Style
  6. H6 Style
  7. Subtitle 1 Style
  8. Subtitle 2 Style
  9. Body 1 Style
  10. Body 2 Style
  11. Caption Style
  12. Overline Style
  13. Overlay Style
<com.realwear.ux.view.StyledTextView
    ...
    style="@style/H1_TextView" />

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 H1 Text View style and change the text color:

<style name="RedH1TextViewStyle" parent="H1_TextView">
    <item name="android:textColor">@android:color/holo_red_light</item>
</style>

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

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

Styled Text View styles come with default text color, but the developer has the ability to override this parameters with their app theme, which will be automatically implemented on all Styled Text Views (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>
Clone this wiki locally