From wiki.ginstr.com
Jump to: navigation, search

styles.xml

styles.xml is an XML file which defines all attributes that need to be executed on certain widget and are graphic related. Text size, text color and other can be classified as graphic related attributes.

Each theme has it's own styles defined in themeMetaData.xml

Styles inheritance

It is possible that one style inherits the other style via "parent" attribute. Reason for that is that more general style can be applied to certain widget and more specific style to other widget without of need to retype all attributes that parent uses. Another reason is that multiple styles can use "shared" style. i.e. multiple input fields can use same background and text size

Usage of style on layouts

References to certain style at ginstr app in styles.xml :

gn:style="@style/styleId"

Example of usage at widget in ginstr app:

<com.ginstr.widgets.GnEditText
    gn:style="@style/styleId"
    .../>

File structure

  • resources node - holds all styles nodes
  • style node - represent a single style that will be applied to a widget
    • name - name of the ginstr launcher attribute which will be used in styling
    • parent - name of the style it inherits
<?xml version="1.0" encoding="utf-8"?>
<resources>
	<style name="styleName" parent="styleParentName">
	    <item name="attributeName">attributeValue</item>
	    ....
	    <item name="attributeName1">attributeValue</item>
	</style>

	.....

	<style name="styleName1" parent="styleName">
	    <item name="attributeName">attributeValue</item>
	    ....
	    <item name="attributeName1">attributeValue</item>
	</style>
</resources>

styling example for textEditable,numberDecimal:

<?xml version="1.0" encoding="utf-8"?>
<resources>
	<!-- textEditable -->
	<style name="textEditable_label" parent="labelStyle">
	</style>
	
	<style name="textEditable_input" parent="inputStyle">
	</style>

        <!-- numberDecimal -->
        <style name="numberDecimal_label" parent="labelStyle">
	</style>
	
	<style name="numberDecimal_input" parent="inputStyle">
	</style>

        <!-- general styling for label and input -->
        <style name="labelStyle" parent="labelTextColor">
		<item name="android:layout_marginTop">10dp</item>
		<item name="android:layout_marginBottom">10dp</item>
		<item name="android:textSize">20sp</item>>
	</style>
	
	<style name="inputStyle" parent="inputTextColor">
		<item name="android:textSize">20sp</item>
		<item name="android:background">@drawable/enteringFieldTransparent2.9</item>
	</style>

        <!-- colors -->
        <style name="labelTextColor">
		<item name="android:textColor">#222222</item>
	</style>
        <style name="inputTextColor" parent="hintTextColor">
		<item name="android:textColor">#222222</item>
	</style>
        <style name="hintTextColor">
		<item name="android:textColorHint">#545454</item>
	</style>
</resources>