Description
When using the code below the hint text of a text field is not shown when the background color is set to white, if another background color such as black is used then it is possible to see the hint text.
I believe this *is a regression* as this only occurs in 3.6.0 versions of the SDK, 3.5.1 and 3.5.0.GA SDKs do not show this behavior, the hint text can be seen fine using these.
It *does not occur* on iOS.
var win = Ti.UI.createWindow({backgroundColor: '#fff'});
var text = "Can you see me?";
var text1 = Ti.UI.createTextField({hintText: 'Can you see me',color:'#000',top: 10,});
var text2 = Ti.UI.createTextField({hintText: 'Can you see me',color:'#000',top: 50,});
win.add(text1);
win.add(text2);
win.open();
Steps To Reproduce
1. Using the provided code build to a device with a 3.6.0 SDK selected.
Actual Result
The hint text of the text fields will not be displayed
Expected Result
The hint text should be displayed
Seems to be a theme issue. In tiapp.xml, if I replace the android xml portion from:-
PR: https://github.com/appcelerator/titanium_mobile/pull/6676 -In the mean time, if you do want a fix just edit the tiapp.xml file as mentioned in the previous comment.- Open further investigation, this would actually change the whole theme. This might not be the right answer to this.
This seems to be also how it behaves in a native app when the parent layout of the edittext has "android:background="#ffffff". I think the best solution would be to expose http://developer.android.com/reference/android/widget/TextView.html#setHintTextColor(int) which I will proceed to do.
[~hpham]: Could I get you thoughts on this? Here's what I've found out so far. Using
Ti.UI.createTextAreaandTi.UI.createTextFieldon a white background will cause the hint text to not be visible. This is due to the default theme beingTheme.AppCompat. The default behavior on a native app sets the background to something dark. Hence, hint text is visible. When using the same theme in a native app on a white background, the hint text as well as the under line that tells you it is a EditText is not visible. Thus, this seems to be a native behavior. If you edit the tiapp.xml with the following:-It will use the light theme which uses a white background and the underline of each EditText as well as hint text is visible. Conversely is true as well. Using the Theme.AppCompat.Light.DarkActionBar on a black background will cause the hint text and underline to be not visible. Solution Suggestion:- 1) If using a white background, advice users to edit the tiapp.xml as above. If using a black background, users can remain using the default theme Theme.AppCompat. 2) https://github.com/appcelerator/titanium_mobile/commit/c739c3b4f712a031e4f55ae4ec9348ae9d2bf0d9 will be available and users can use Attributed Hint Strings to style the hints how they want it to be. The caveat is the underline to show that the edit text is there wont be visible still on a white background. 3) Expose setHint. This actually wont change the underline color. Similar to number 2. I think number 1 should be the answer. The downside to doing that is that everything will also follow that style. Eg, creating Buttons and not styling it will result the button to follow the new theme. I don't think this is too much of a downside. And if anyone else have thoughts on this, please comment on this as well.Another suggestion: 4) Styles (Themes) can only be applied to View before it is inflated if it is in the xml. So, we could create 2 layouts for EditText. One using the light theme, another using the dark theme, here: https://github.com/appcelerator/titanium_mobile/blob/master/android/modules/ui/res/layout/titanium_ui_edittext.xml Then, in the createTextArea/createTextField, we can create one more new attribute deciding which theme a user wants to use. Then on create, inflate https://github.com/appcelerator/titanium_mobile/blob/master/android/modules/ui/src/java/ti/modules/titanium/ui/widget/TiUIText.java#L96. The only missing puzzle to using this method is that this has to be done in the constructor (in TiUIText) due to the inflating of the View (EditText), and the attributes are only read later (as far as I know right now) in the processProperties method. You can't get it in the constructor.
[~eharris] I think I've concluded that the best way is actually to specify the correct theme to use initially. If you are planning to use a white background on the windows:- Please edit the tiapp.xml with either of this:-
orThe default theme that the app is running is Theme.AppCompat which is for a dark theme with black background. If you do want to change the color of the hint text, you can use https://github.com/appcelerator/titanium_mobile/commit/c739c3b4f712a031e4f55ae4ec9348ae9d2bf0d9 Attributed Hint Text.[~hpham] for review: PR https://github.com/appcelerator/titanium_mobile/pull/6676. There are 3 ways to solve this issue:- 1) Change your theme as mentioned above 2) Use the new hint text color property that is exposed in the PR 3) Use attributed text hint that will be available in the future Test case for PR:-
var win = Ti.UI.createWindow({backgroundColor: '#fff'}); var text = "Can you see me?"; var text1 = Ti.UI.createTextField({hintText: 'Can you see me', hintTextColor:'#0FF', color:'#000',top: 10,}); var text2 = Ti.UI.createTextField({hintText: 'Can you see me', hintTextColor:'#FF0', color:'#000',top: 50,}); win.add(text1); win.add(text2); win.open();[~hpham] could you please backport this?
4_0_X backport: https://github.com/appcelerator/titanium_mobile/pull/6741
Verified fixed using: Titanium SDK 4.0.0.v20150323131014 Studio 4.0.0.201503231407 Appc NPM: 0.3.34 Appc CLI 0.2.187 On: Nexus 5 emulator, Android 4.4.2