Themed Views

Screens provides several existing View Sets that you can reuse and customize in your app to create a Themed View. If you use or override the Android color palette’s values (for example, primaryColor, secondaryColor, etc…), you’ll reuse the View Set’s general structure, but be able to use the new colors (also with tinted resources). Note that you must create Themed Views inside your app. This is because Themed Views depend on the app or activity theme.

Each View Set has its own Android theme. These are listed here:

  • Default View Set: default_theme
  • Lexicon View Set: lexicon_theme
  • Material View Set: material_theme
  • Westeros View Set: westeros_theme

You can easily style all your Screenlets by setting your app or activity theme to inherit a View Set’s Android theme. For example, you can use the following code to reuse the styles (and layouts) from material_theme in your own theme:

<style name="AppTheme.NoActionBar" parent="material_theme">
    <item name="colorPrimary">#B91D6D</item>
    <item name="colorPrimaryDark">#670E3B</item>
    <item name="colorAccent">#BBBBBB</item>
</style>

<application android:theme="@style/AppTheme.NoActionBar"
    ...
>

Note that this code overrides the AppTheme.NoActionBar theme’s colors with your own color settings for colorPrimary, colorPrimaryDark, and colorAccent. Screenlets will also use these new colors, and tint images and other resources accordingly. Liferay Screens uses the default Android color palette names from the Support Library.

You can also override only the parent View Set’s theme colors. This way you can set a default color palette and override only the View Set colors you want. The color names for each View Set are the default Android names, followed by an underscore and the View Set’s lowercase name (_default, _material, and _westeros). For example, the following code overrides colorPrimary, colorPrimaryDark, and colorAccent for only the material_theme:

<resources>
    <color name="colorPrimary_material">#B91D6D</color>
    <color name="colorPrimaryDark_material">#670E3B</color>
    <color name="colorAccent_material">#BBBBBB</color>
</resources>

Liferay Screens also lets you use one View Set’s layout with a Screenlet, and use another View Set’s general style and colors. To do this, pass a layoutId attribute to a Screenlet that is already styled with another View Set’s theme. The Screenlet uses the layout structure specified in layoutId, but inherits the general style and colors from the View Set’s theme. For example, this code tells Login Screenlet to use the Default View Set’s layout structure, but use the styles and colors defined earlier in AppTheme.NoActionBar:

<com.liferay.mobile.screens.auth.login.LoginScreenlet
    android:id="@+id/login_screenlet"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:basicAuthMethod="email"
    app:layoutId="@layout/login_default"
    app:credentialsStorage="shared_preferences" />

<application android:theme="@style/AppTheme.NoActionBar"
    ...
>

Child Views

Extended Views

Full Views

Packaging Your Views

« Creating Android ViewsChild Views »
Was this article helpful?
0 out of 0 found this helpful