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"/>.
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.
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
Related
Anyone can help me?
I'm developing the Light and Dark theme function in the android app, everything goes fine, but the background of Recyclerview shows incorrectly.
The root background of xml file is White color and I didn't set background for recyclerview in xml. However, after changing from Light to Dark or Dark to Right=> background of recyclerview automatically change to a strange color(this color didn't see in my color.xml resource). I tried to set background of Recyclerview to #null or transparent in code and xml file as well but the background of recyclerview didn't remove that strange color.
So anyone knows exactly the reason why, please help me and much appreciated. Thanks
enter image description hereenter image description here
I am guessing you are using the DayNight Theme. If so you should have to themes.xml folder in res, one is called as mentioned and the other is with the extension (night). There you can define a color in both xml files. It has the same name but different color values like this:
<style name="AppTheme" parent="Theme.AppCompat.DayNight">
<item name="colorPrimaryDark">#ffffff</item> <!-- you normally shouldn't hardcode color -->
</style>
The same for your folder (night):
<style name="AppTheme" parent="Theme.AppCompat.DayNight">
<item name="colorPrimaryDark">#000000</item> <!-- you normally shouldn't hardcode color -->
</style>
The idea is to have one attribute name that contains 2 colors and takes the correct one if needed. For futher understanding I suggest to take a look at this reference to get more familiar with Themes and Styles. Now you set up your Day and Night files properly, you can implement it by using it in your recyclerView as follows:
android:background="?attr/colorPrimaryDark"
Another tip is to make custom colors in multiple colors.xml files to make them for more unique use. In this case colorPrimaryDark effect your whole app. It is also suggested to modify layouts and the visuals of widgets to take effect only on those. (e.x. your recyclerView). In my app I used colorPrimaryDark for all Background (that should be same for more clean design). I think you get the keypoint. Take a look around the net and this forum and you will find your final design strategy. Cheers! :)
I am using a picker on my application of type time picker. The picker works fine on iOS devices, however when I go to the android application, it appears, but the font color is white, and cant see the numbers.
I do not want to change the background to a darker color because it doesnt match the rest of the application and wont be matching the ios app. I was wondering if there is a way to change just the font to black or gray color.
I have already tried some of the solutions posted, and changing the themes, but it has not worked out for me.
You need to create custom theme
<resources>
<style name="Theme.NoActionBar" parent="#style/Theme.AppCompat.Light"> </style>
</resources>
Put this code in /platform/android/res/values/custom_theme.xml
To fix the solution to this, you can add the following in your Theme.xml file under platform/android/values.
You can visit this link for my post on the appcelerator developer forum where I had raised this issue.
http://developer.appcelerator.com/question/182115/picker-font-color-on-android
Now you can apply the theme attribute to the window that you are planning on using your picker in, and applying the Light or LightDarkBar theme. This will turn the color your picker font to black.
You can format the code in the editor after pasting it. You can do that by pressing command shift F on mac, and for windows I am sure its control shift F, but not 100% on that.
I've perused ALL of the questions here and countless tutorials on Styling and Themes for Android. The odd hierarchy between Themes and Styles is still a mystery to me.
My Manifest calls out this "Style" (android:theme, "#style/rforderstyle") [this is formatted from the manifest editor in Basic4Android] (not my choice but its what I have to use.).. however the manifest is still accessible should I need to.
I mention this because I've noticed that you can style a specific activity. I actually don't see a way to force have multiple "wigets" have their own "theme" while they all exist on the same activity.
Please advise if so then I my need to make my "little creations" as whatever "fragment" or "wigets".
What I'm attempting is a windows mobile app type form with a ton of User controls on it..so this set at the bottom happens to use a mid sized black text font.. but the control over here in the right upper is a different text size and color on & On & on ...
So regarding the style xml file, I've read that,,, its important that,,,, my parent be some all encompassing Android theme and I override individual "properties" in this section::
Could that mean that although I'm concerned with text size, since I have labels and editcontrols present the absence of a "parent" style that addresses these will cause me an error as I attempt to use this referenced parent style ??
How does a theme get into this mix...?
<resources>
<style name="rforderstyle" parent="#android:style/TextAppearance">>
<item name="android:textSize"> 21.0dp</item>
<item name="android:typeface">serif</item>
<item name="android:textColor">#FF9900 </item><!--#00FF00-->
</style>
</resources>
This is oddly confusing because the best examples reference layout files for the views but I don't really have layout files in Basic4Android I'm programmatically creating all of these views. If I don't need the depth of theme and style then fine but ...is the manifest supposed to point to a Style or a theme?
I'm trying to make a custom titlebar for my first Android application.
While I can find lots on the web about how to make them so you can change colours etc, I want my titlebar to look the same as the "standard" titlebar, but with a button that I can configure. This means copying the device's currently active themes to be able to style it in exactly the same way.
Not all devices simply use a gradient in the titlebar style, so adding a gradient (as suggested in other SO questions) doesn't really make sense.
Does anyone have any pointers how to read the style information?
try to extend an existing theme e.g.
create your own style which can ofcourse extend from existing from an existing theme. change the windowNoTitle to true.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="noTitleBarStyle" parent="android:Theme.Black">
<item name="android:windowNoTitle">true</item>
<item name="android:windowBackground">#color/darkGrey</item>
<item name="android:colorForeground">#ff3333</item>
</style></resources>
or try to do it runtime as discussed here
Android - change custom title view at run time
I hope this helps.
I tried changing the appearance of a spinner and I partly succeeded. I'm doing this via overriding parts of the theme. I managed to change the text size of the spinner item (i.e. the text size in the drop down button) with my themes.xml and styles.xml:
My themes.xml file looks like this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomTheme" parent="#android:Theme.Holo.Light">
<item name="android:windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
<item name="android:spinnerItemStyle">#style/CustomSpinnerItem</item>
</style>
</resources>
My styles.xml file looks like this:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomSpinnerItem" parent="#android:Widget.TextView.SpinnerItem">
<item name="android:textAppearance">#style/CustomTextAppearance</item>
</style>
<style name="CustomTextAppearance">
<item name="android:textSize">30dp</item>
</style>
</resources>
However I cannot find the attributes that are responsible for the text appearance of the items in the dropdown list of the spinner. I tried dropDownItemStyle amongst other things. In my opinion the attribute names are not self-explanatory, so I wanted to know whether there is a documentation of what attribute does what in a style to find out which attributes to override. I found it very cumbersome to trace back all the styles used in a theme via the themes.xml and styles.xml of the platfrom and then try to find the right attributes via trial and error.
I know that one can change the appearance by passing layouts to the adapter, however, this is not really what I was looking for, since (as far as I know), you can only use inheritance in styles and not in layout xml files. If I created a custom layout for the adapter I'd have to create 9-patch images etc., which I think is a bit too time consuming in case I only want to change the text size.
Of course it's possible that I misunderstood the whole concept, since I'm new to Android ;)
You probably have found out the answer since you asked but for others looking at similar questions:
I do not know of a list of attribute names with good explanation of what they do (R.attr's page mostly gives information that is already in the name) but the way I do it is:
Start from the element I give to setDropDownViewResource(), in my case: android.R.layout.simple_spinner_dropdown_item and find.
Find its layout definition in \sdk\platforms\android-17 (specific platform version to avoid redundant results).
Get its style from the layout file. In this case: ?android:attr/spinnerDropDownItemStyle
We now have the attribute name we need.
It's better to do it that way rather than try to guess what attribute to use because you know which attribute the system itself use so it's very likely to be the correct one (unless there's a bug).
If I created a custom layout for the adapter I'd have to create
9-patch images etc.
Well, no, the layout determines what kind of GUI element you would have (a textfield, a spinner, an imagebutton, a custom element...), not how they are styled (nine-patch backgrounds, text colors...), so you still would have to mess with styles to get the right appearance.
For example, for visual consistency I ported the button, checkbox and spinner style from Theme.Holo to Gingerbread, yet I did not mess with layout, all I did was the aforementioned steps plus looking up the result (spinnerDropDownItemStyle in the above example) in themes.xml, which gave me the style name (e.g.: Widget.Holo.DropDownItem.Spinner).
Then I looked that up in styles.xml and imported it (and any parent*) in my project's styles.xml, searching and copying any Holo specific reference in my project and adjusting the namespace accordingly (add android: to attributes and replace ?android:attr with #style for what I copy to my styles.xml file).
So far I haven't had to mess with layouts at all (even the presence of radio buttons in spinner dialogs on Gingerbread is determined by an xml attribute: android:checkMark).
If a style has no parent attribute (like Widget.Holo.DropDownItem.Spinner) then its parent is the same style minus the last element (e.g.: Widget.Holo.DropDownItem)