How to change TextView bottom accent colour on Android NativeScript app

Question

I'm currently trying to figure out how to change the colour of the bottom border of a text input from the default blue. I've tried using the border-color, color and background-color properties but none seem to have an effect on the input. This is the XML code I am using for the input <TextField text="{{ username }}" cssClass="username" android:row="1"/>.

Answer 1

To piggyback on @Bradley-Gore answer. Here is the Android documentation which highlights what colors need to be set Here is another good link from the Android documentation on compatibility with styles/themes

The important piece you are looking for is:

  <!--   theme UI controls like checkboxes and text fields -->
  <item name="android:colorAccent">@color/accent</item>

With NativeScript version 1.6+ you need to create the files in App_Resources/Android/, pre NativeScript pre 1.6 you had to make these changes in platforms/android/ the reason for the change was to persist these types of changes when you need to remove the platform and add it back to fix any build cache/gradle issues, etc.

So to simply set the primary, primaryDark, and accent color create the values and values-v21 folders located in App_Resources/Android

App_Resources/Android/values/colors.xml

 <?xml version="1.0" encoding="utf-8"?>
 <resources>
   <color name="ns_primary">#3489db</color>
   <color name="ns_primaryDark">#336699</color>
   <color name="ns_accent">#ff4081</color>
 </resources>

App_Resources/Android/values-v21/colors.xml

 <?xml version="1.0" encoding="utf-8"?>
  <resources>
    <color name="ns_accent">#ff4081</color>
  </resources>

If you actually just create a NativeScript project and build the android app, navigate to platforms/android you'll see that the CLI generated these files, it's how NativeScript styles the apps by default and that's why it uses the prefix ns_ before the primary, primaryDark, accent values.

Something else that might help you as you begin to learn Android and NativeScript is the attached .gif. This is from the Android documentation, most of the styling can be done programmatically or by setting styles via the .xml files @bradley-gore mentioned and what I have listed here for colors, but it's best to keep items separate :) In the .gif I just highlight the android.widget.TextView class and scroll down to find the XML attributes that you can set if you were building a native Android UI via XML. These are what you can set via the styles, and you'll see the code methods next to the xml attributes if there is a matching method. Hope this explains everything and provides a good learning experience for those getting into NativeScript. I might blog this :) good question.

Answer 2

For android, if you want to use the TextInputLayout (fancy floating label, error message, etc...) instead, I have a plugin for that: https://www.npmjs.com/package/nativescript-textinputlayout

Even if you do not wish to use that plugin, or cannot due to my not having gotten iOS support in there yet :p, then the same style mechanisms will help. In the plugin's demo app I'm using an App_Resource for android that defines some style rules for things that I don't think can be defined in NativeScript:

<style name="DemoAppTheme" parent="AppTheme">
    <item name="colorControlNormal">@color/darkBlue</item>
    <item name="colorControlActivated">@color/medBlue</item>
    <item name="colorControlHighlight">@color/lightBlue</item>
    <item name="android:textColorPrimary">@color/darkBlue</item>
    <item name="android:textColorHint">@color/medBlue</item>
</style>

Specifically those first two items are going to help you, as it covers the standard colors for controls in normal and activated states. I'm not 100% on the difference between hightlight and activated states at the moment. Take a look at how the demo app for my plugin wires these up and it should get you there. You want to look at app/App_Resources/Android/values/(appColors | appStyles).xml and app/App_Resources/Android/AndroidManifest.xml