Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-13567] Android: Textfield cursor not visible when setting API level to 11 or above

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2014-07-29T23:31:14.000+0000
Affected Version/sRelease 3.0.0
Fix Version/s2013 Sprint 08 Core, 2013 Sprint 08
ComponentsAndroid
Labelsn/a
ReporterAllen Yeung
AssigneeAllen Yeung
Created2013-04-15T21:32:04.000+0000
Updated2017-03-31T22:23:21.000+0000

Description

Steps to reproduce: 1. Add the following in your tiapp.xml: 
    <android xmlns:android="http://schemas.android.com/apk/res/android">
        <manifest>
            <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="14"/>
        </manifest>
    </android>
2. Use the following app.js: 
Titanium.UI.setBackgroundColor('#000');
var win1 = Titanium.UI.createWindow({
	title : 'Tab 1',
	navBarHidden : true
});

var pw = Ti.UI.createTextField({
	top : 20,
	left : 10,
	right : 10,
	passwordMask : true,
	backgroundColor : 'white'
});
win1.add(pw);

win1.open();
3. Click on the text field when the app is launched, and the cursor is white by default, which makes it nearly invisible. NOTE: This is related to heavyweight windows. If you comment out navBarHidden, this bug does not appear.

Comments

  1. Shannon Hicks 2013-04-16

    The same problem exists with Ti.UI.Picker. If you substitute the TextField for a Picker, the default text is White with no way to change the color.
  2. Allen Yeung 2013-04-16

    Another test case that seems to be related to this: 
       var win1 = Titanium.UI.createWindow({
   	title : 'Tab 1',
   	backgroundColor : '#000',
   	backgroundImage : '/default.png',
   	navBarHidden : true,
   });
   
   scoreTypePicker = Ti.UI.createPicker({
   	backgroundColor : '#fff',
   	font : {
   		fontSize : 18,
   		fontWeight : 'bold',
   	},
   	textAlign : 'center',
   	selectionIndicator : true,
   	type : Titanium.UI.PICKER_TYPE_PLAIN
   }); 
   
   scoreTypePicker.add([
   Ti.UI.createPickerRow({title:'test 1'}),
   Ti.UI.createPickerRow({title:'test 2'}),
   Ti.UI.createPickerRow({title:'test 3'}),
   Ti.UI.createPickerRow({title:'test 4'}),
   ]);
   win1.add(scoreTypePicker);
   
   win1.open();
  3. Joseph Sachs 2013-04-16

    I am having a similar issue when I tap into the TextField it highlights for less than a second, then looses focus. Ti SDK 3.1.0.v20130409124549 Mac OSX for an Android App (Target Android SDK 2.3.3 & 3.0 both cause this issue) 
       var loginTableView = Titanium.UI.createTableView({top:'0dp', left:'0dp', headerView: loginTableHeader, backgroundColor:'transparent',scrollable: false});
   
   var userEmailrow = Ti.UI.createTableViewRow({height:'44dp', className:'accountLogin', backgroundColor:'white'});
                   var userLabel = Ti.UI.createLabel({
                       text : L('usernameEmail'),
                       color : '#2b3931',
                       font : {fontSize:'15dp'}, left : 0, width: '131dp', height: '30dp',
                       textAlign : 'right'
                   });
                   userEmailrow.add(userLabel);
                   var userTF = Titanium.UI.createTextField({
                       height:'auto', top:'0dp', left:'141dp', width:'179dp',
                       font: {fontSize: '15dp', fontColor:'#000000'},
                       hintText:L('usernameemail'), autocorrect: false, //autocapitalization: false,
                       keyboardType : Ti.UI.KEYBOARD_EMAIL, returnKeyType : Ti.UI.RETURNKEY_NEXT, 
                       softKeyboardOnFocus: Titanium.UI.Android.SOFT_KEYBOARD_SHOW_ON_FOCUS,
                   });
                   userTF.addEventListener('focus',function(){
                       setTimeout(function(){ userTF.focus(); },300);
                   });
                   userTF.addEventListener('return', function(e) {
                       passwordTF.focus();
                   });
                   userEmailrow.add(userTF);
                   LoginDataRows[0] = userEmailrow;
                    
                   var passwordRow = Ti.UI.createTableViewRow({height:'44dp', className:'accountLogin', backgroundColor:'white'});
                   var passwordLabel = Ti.UI.createLabel({
                       text : L('Password'),
                       color : '#2b3931',
                       font : {fontSize:'15dp'}, left : 0, width: '131dp', height: '30dp',
                       textAlign : 'right'
                   });
                   passwordRow.add(passwordLabel);
                   var passwordTF = Titanium.UI.createTextField({
                       height:'auto', top:'0dp', left:'141dp', width:'179dp',
                       passwordMask: true,
                       font: {fontSize: '15dp', fontWeight: 'bold', fontColor:'#000000'},
                       hintText:L('password'),
                       //returnKeyType : Ti.UI.RETURNKEY_JOIN, 
                   });
                   passwordTF.addEventListener('focus',function(){
                       setTimeout(function(){ passwordTF.focus(); },300);
                   });
  4. Allen Yeung 2013-04-16

    [~underlabs] The code that you provided does not run. I had to change it to get it running: 
       var win = Ti.UI.createWindow({
   	navBarHidden:true,
   	windowSoftInputMode: Ti.UI.Android.SOFT_INPUT_ADJUST_PAN
   
   });
   
   var loginTableView = Titanium.UI.createTableView({
   	top : '0dp',
   	left : '0dp',
   	backgroundColor : 'transparent',
   	scrollable : false
   });
   
   var userEmailrow = Ti.UI.createTableViewRow({
   	height : '44dp',
   	className : 'accountLogin',
   	backgroundColor : 'white'
   });
   var userLabel = Ti.UI.createLabel({
   	text : 'usernameEmail',
   	color : '#2b3931',
   	font : {
   		fontSize : '15dp'
   	},
   	left : 0,
   	width : '131dp',
   	height : '30dp',
   	textAlign : 'right'
   });
   userEmailrow.add(userLabel);
   var userTF = Titanium.UI.createTextField({
   	height : 'auto',
   	top : '0dp',
   	left : '141dp',
   	width : '179dp',
   	font : {
   		fontSize : '15dp',
   		fontColor : '#000000'
   	},
   	hintText : L('usernameemail'),
   	autocorrect : false, //autocapitalization: false,
   	keyboardType : Ti.UI.KEYBOARD_EMAIL,
   	returnKeyType : Ti.UI.RETURNKEY_NEXT,
   	softKeyboardOnFocus : Titanium.UI.Android.SOFT_KEYBOARD_SHOW_ON_FOCUS,
   });
   userTF.addEventListener('focus', function() {
   	setTimeout(function() {
   		userTF.focus();
   	}, 300);
   });
   userTF.addEventListener('return', function(e) {
   	passwordTF.focus();
   });
   userEmailrow.add(userTF);
   
   var passwordRow = Ti.UI.createTableViewRow({
   	height : '44dp',
   	className : 'accountLogin',
   	backgroundColor : 'white'
   });
   var passwordLabel = Ti.UI.createLabel({
   	text : 'Password',
   	color : '#2b3931',
   	font : {
   		fontSize : '15dp'
   	},
   	left : 0,
   	width : '131dp',
   	height : '30dp',
   	textAlign : 'right'
   });
   passwordRow.add(passwordLabel);
   var passwordTF = Titanium.UI.createTextField({
   	height : 'auto',
   	top : '0dp',
   	left : '141dp',
   	width : '179dp',
   	passwordMask : true,
   	font : {
   		fontSize : '15dp',
   		fontWeight : 'bold',
   		fontColor : '#000000'
   	},
   	hintText : 'password',
   	//returnKeyType : Ti.UI.RETURNKEY_JOIN,
   });
   passwordTF.addEventListener('focus', function() {
   	setTimeout(function() {
   		passwordTF.focus();
   	}, 300);
   });
   
   passwordRow.add(passwordTF);
   loginTableView.appendRow(userEmailrow);
   loginTableView.appendRow(passwordRow);
   
   win.add(loginTableView);
   win.open();
    Anyways, the focus issue is a known native android issue with list views. When using textfields inside a tableview, you should always set the windowSoftInputMode to Ti.UI.Android.SOFT_INPUT_ADJUST_PAN (Like I have done in the test case above. When the soft keyboard comes up, it causes the table view to resize, and lose focus. It does not regain focus correctly after this. The workaround is to use soft input adjust pan to prevent it from resizing.
  5. Vishal Duggal 2013-04-17

    For editText cursor not being visible see http://stackoverflow.com/questions/7238450/set-edittext-cursor-color
  6. Allen Yeung 2013-04-18

    This is native android behavior where the cursor color is automatically set by the Holo theme. If you want to avoid this behavior, you would essentially need to adjust the theme. You can still use the holo theme and explicitly adjust the cursor color to match the text color by changing the theme. To do this, you need to set the 'android:textCursorDrawable' property (this property is only available on API 12 and above) to '@null'. To have your own custom theme, create a the theme.xml file under platform/android/res/values/theme.xml The theme.xml file would look something like: 
       <?xml version="1.0" encoding="utf-8"?>
   <resources>
   	<style name="Theme.Titanium" parent="android:Theme">
   		<item name="android:windowBackground">@drawable/background</item>
   	</style>
   	<style name="Theme.MyTheme" parent="@android:style/Theme.Holo">
   		<item name="android:editTextStyle">@style/editText</item>
   	</style>
   	<style name="editText" parent="@android:style/Widget.EditText">
   		<item name="android:textCursorDrawable">@null</item>
   	</style>
   </resources>
    NOTE: I still have a Theme.Titanium entry there since that is the default theme used for the main activity. If you leave this out, you will get a build error. Then in your tiapp.xml you will need to add the following entry to specify that your application will use the theme that you created: 
           <android xmlns:android="http://schemas.android.com/apk/res/android">
           <manifest>
               <application android:theme="@style/Theme.MyTheme"/>
               <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="14"/>
           </manifest>
       </android>
    This workaround will allow your app to have a cursor that inherits the color of your text. This will apply to all widgets in general if you plan on using the holo theme. For example, you may want to do something similar with the picker if there is an issue with that.
  7. Allen Yeung 2013-04-18

    Marking as invalid. This is actually native android behavior, and developers should be using their own themes if they don't want the default holo theme. If they want the holo theme, the theme.xml should be changed as mentioned to modify the holo theme.
  8. Ivan Skugor 2014-01-19

    To hide title bar below @drawable/background add: true (someone might find it useful :) )
  9. Ivan Skugor 2014-03-31

    Hi. I found one issue with custom themes on Nexus 5 phone with Android 4.4.2 version. If text field's height is defined, text or cursor is not visible (actually, you can see one dot only). So, to see this issue, change original code: 
       var pw = Ti.UI.createTextField({
       top : 20,
       left : 10,
       right : 10,
       height: 20, // this makes cursor disappear 
       passwordMask : true,
       backgroundColor : 'white'
   });
    and run code. Can this issue be reopened until some workaround is provided? Setting text field's height seems pretty common use case. Thanks!
  10. Shannon Hicks 2014-03-31

    I suspect you don't see a cursor because the font is bigger than the field's hight... Can you try setting the font size to 12 or 13 (14 will be too big)?
  11. Ivan Skugor 2014-04-01

    I tried that before but it didn't work. :(
  12. Christofer Wesseling 2014-04-26

    i have the same issue. no workaround yet. That't painful because i wouldn't have the problem if i develop android native. so it could be an issue for TI.
  13. Ingo Muschenetz 2014-07-23

    [~ivanskugor] is there anything special about your custom theme? Just want to make sure we have all the steps to reproduce.
  14. Nikolai Derzhak 2014-07-23

    [~ingo], I am afraid Ivan will not reply, because his account has been migrated from lighthouse account and I had to fill my email in JIRA account. So I have got your question in email in result.
  15. Ivan Skugor 2014-07-23

    I got email :) Here is whole theme: 
        <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <style name="Theme.Titanium" parent="android:Theme">
            <item name="android:windowBackground">@drawable/background</item>
            <item name="android:windowNoTitle">true</item>
        </style>
        <style name="Theme.MyTheme" parent="@android:style/Theme.Holo">
            <item name="android:editTextStyle">@style/editText</item>
        </style>
        <style name="editText" parent="@android:style/Widget.EditText">
            <item name="android:textCursorDrawable">@null</item>
        </style>
    </resources>
  16. Allen Yeung 2014-07-23

    '20' for the height of a text field is too small to even see the text. If you change it to something like 100, the cursor shows up fine. Note that by default the cursor inherits the color from the theme, so I changed the color to 'black' so I could see the cursor better. I tried this on a Nexus 5 with 3.3.0.GA
  17. Ivan Skugor 2014-07-24

    Hello. Can you explain why this works on every Android phone that I have (like 10 pieces)? It even works on Nexus 7 tablet and Nexus 5 emulator. The only device on which this doesn't work is Nexus 5. Are all other devices buggy?! :D Sorry, but your workaround is just unacceptable, I can't change text field's height to 4 times bigger size - it will look ridiculous! Why fontSize doesn't work? Why can't I change it so text fits to 20px height? I'm testing with 3.2.2.GA because 3.3.0.GA is buggy! I'll get to that when I catch some time :) Ivan
  18. Ingo Muschenetz 2014-07-24

    Reopening issue.
  19. Allen Yeung 2014-07-29

    After some investigation from Ivan (thanks for your help). It looks like the cause was related to http://developer.android.com/guide/topics/manifest/supports-screens-element.html#any
  20. Damiano Hernando Rodriguez 2014-08-29

    @Ivan Skugor Is there a workaround for this? I have AnyDensity=false in my TiApp.xml too. A first workaround for the cutted text is to set de height of the TextField to "Ti.UI.SIZE". But the cursor is not visibile with this fix. Do you have found any other way?
  21. Ivan Skugor 2014-09-01

    Hi. Unfortunately I haven't found a workaround except changing anyDensity setting. That shouldn't be too hard to change, just make sure you use "dip" (density independent pixels) as default unit in tiapp.xml. That should solve lots of issues, you just need to be careful if you use platformWidth/Height (you'll need to make your own calculation by dividing that value with "logicalDensityFactor"). Ivan
  22. Louis Quaintance 2014-09-08

    Hi there, We're getting the cursor to display on 3.3 using the following code: However it will not allow me to specify a drawable for the cursor. If I create a drawable in platform/android/res/drawable called cursor_drawable.xml http://schemas.android.com/apk/res/android" android:shape="rectangle" > And then create a color.xml with the orange defined. And then specify in the theme, the android:textCursorDrawable to be drawable/cursor_drawable then it does not appear. Am I doing something wrong?
  23. Lee Morris 2017-03-31

    Closing ticket as fixed, if there are any problems, please file a new ticket.

JSON Source