Theming

The first step in Ashera is to theme the widgets. The theme of the widgets have to be done in system_style.xml. Customization per widget can be done using style.xml

system_style.xml

Given that Ashera Native is based on Android i.e Android first, we should be able to do anything which we are capable of achieving in Android. Then we simulate the same in other platforms.

Android has concept of theming widgets by creating a Theme and applying theme to widget to widgets using style.xml. Ashera however created separate xml - system_system.xml where you can use Android theming. Here is snippet of system_system.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="editTextStyle">@style/EditText</item>
        <item name="checkboxStyle">@style/CheckBox</item>
        <item name="buttonStyle">@style/Button</item>
        <item name="radioButtonStyle">@style/RadioButton</item>
        <item name="imageButtonStyle">@style/ImageButton</item>
        <item name="android:spinnerItemStyle">@style/Spinner</item>
        <item name="colorPrimaryDark">#000</item>
    </style>

    <!-- form widgets -->
    <style name="TextView">
        <item name="android:typeface">sans</item>
    </style>
    <style name="EditText" parent="@android:style/Widget.EditText" constructor_attrs="swtTextStyle:single" attrs="swtUseTabForNavigation:true;borderBottomWidth:1dp;borderColor:@color/border_material_color;onFocusChange:">
        <item name="android:textColor">#000</item>
        <item name="android:textColorHint">#fff</item>
        <item name="android:padding">10dp</item>
        <item name="singleLine">true</item>
        <item name="android:inputType" android="true">text</item>
        <item name="android:typeface">sans</item>
    </style>
    ...
</resources>

It is worth noting that system_style.xml can refer any android resource i.e. android system resource. For e.g, the style tag parent can be android resource parent="@android:style/Widget.EditText". Also when refering to android system resource, add android="true". This means that this attribute is for only android and will not be used to applied to the other platforms.

The system_style.xml adheres to strict convention to achieve cross platform theming.

In the above example, editTextStyle of App theme has been styled with @style/EditText. The name of style is the group name of widgets i.e. the android tag name.

By overriding the editTextStyle of AppTheme, you have setup the Android EditText.

To apply theming to other platforms, the attributes without android="true" are applied to other widgets by the looking at the name of the style and matching the tag name. But there might be some cases where you need to apply non-android attributes to other platforms. In this case you use constructor_attrs and attrs on style which can be used to theme other attributes which cannot be declared inside item tags.

To refer to a style declared in system_style.xml, you cannot use the style attribute. Instead you need to use systemStyle attribute.

style.xml

style.xml is reserved for cross platform theming.

Here is snippet of style.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>

	...
    <style name="h2_white">
        <item name="android:textSize">@dimen/font_normal</item>
        <item name="android:textColor">@color/color_white</item>
    </style>
	...

</resources>

It is worth noting that style.xml can refer only attributes supported in the api documentation. It cannot reference any android system resource.

To refer to a style declared in style.xml, you can use the style attribute.

By splitting the style into 2 separate xml, you get simple but powerful way to style android widgets and applying the styling in other platforms.

Setting up the development environment

Creating your ui and backing fragment