How to style form text color etc

[jdesbonnet]

This is a handy library which does almost everything I need (basically a form schema is generated server-side, form JSON downloaded and then rendered dynamically).

All the defaults are fine, except for the text color in forms. For some reason in my app when I render it on a white background the date field text is also white and I have no idea how to go about specifying an alternative text color (I've been googling and editing styles.xml for hours now and unable to change anything in the rendered form). I see I can generate a manual layout for the form, but I'd rather no do that as form definitions can change daily, and the default LinearLayout is perfect for my needs.

Any tips on how to change the text color (in particular for the date field) ?

[ellykits]

Hi @jdesbonnet. Thank you for your feedback. There are two approaches to this: 1 is to create a text_color attribute on the DatePicker widget and possibly do the same for the other widgets as well. 2. add an attribute for styling individual widget globally. This attribute would work like Android style. I have created an issue for tracking this here Styling Widgets I would prefer second approach because of the flexibility it offers.

[ellykits]

Hi @jdesbonnet. I have started working on this issue as mentioned in my previous comment. I will be creating a pull request with this fix soon. Here is how it will work.

NOTE: This fix will be available for all the widgets and can be used to override any of the default styles.

Step 1: Declare Style E.g.

  <style name="sampleDatePickerStyle" parent="Widget.AppCompat.EditText">
    <item name="android:textSize">18sp</item>
    <item name="android:textColor">#4D9D4B</item>
  </style> 

Step 2: Supply the style to the form builder Before creating the form supply the style to the FormBuilder. I have introduced a resourcesMap that can be accessed via the FormBuilder. Which is a map of resource name (as defined in the widget's JSON) against the actual Android resource style. E.g. stylesMap["sampleDatePickerStyle"] = R.style.sampleDatePickerStyle

    formBuilder.populateResourceMap(R.drawable::class.java)
    formBuilder.populateResourceMap(R.style::class.java)

NOTE: we are explicitly calling the populate methods with the resources class in order to get the correct class name for the resources. We can't do this within the library because there R.drawable would only pick drawables available in the library alone but not for the app.

Step 3: Apply the style to the widget Example:

    {
          "name": "dob",
          "type": "datetime_picker",
          "properties": {
            "hint": "Enter birth date",
            "type": "date_picker",
            "display_format": "dd/MM/yyyy",
            "min_date": "today-80y",
            "max_date": "today",
            "style": "sampleDatePickerStyle"
          }
     }

NOTE: Just make sure the name of the style in the widget's JSON matches the name in stylesMap

[ellykits]

@jdesbonnet I updated the comment above. I made some slight adjustments. Instead of manually adding individual styles to the resourceMap, I added a utility method to assist with this (populateResourceMap). This will use reflection to fetch all the drawables and styles available in the app. For now it has to be called explicitly before building the form. Afterwards you can apply styling to widget's as supported. I also added background attribute for widget type edit_text that works in a similar way.

[ellykits]

Closed this. Issue fixed in v1.1.3