[TIMOB-19629] Android: Buttons stay uppercased in UI

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2016-11-10T22:08:10.000+0000
Affected Version/s	Release 4.1.1
Fix Version/s	Release 6.1.0
Components	Android
Labels	android, button, material-theme, qe-6.1.0, uppercased
Reporter	Creative
Assignee	Gary Mathews
Created	2015-07-06T14:21:11.000+0000
Updated	2016-11-28T17:14:54.000+0000

Description

Probably due to Material design. The following android style XML syntax does not work on buttons used in a ListItem:

<item name="android:textAllCaps">false</item>

Either applied to a theme or a button, it doesnt change it. It does seem to work for all other buttons you defined through the Alloy xml.

Comments

Uriel Lizama 2015-10-22

This issue is still present on SDK 5.x I have my style.xml:

   <?xml version="1.0" encoding="utf-8"?>
   <resources>
   	<style name="Theme.AppLightBlue" parent="@style/Theme.AppCompat">
   		<item name="android:textAllCaps">false</item>
   	    <item name="colorPrimary">#0ba1e7</item>
   	    <item name="colorPrimaryDark">#0A89C4</item>
   	    <item name="colorAccent">#03A9F4</item>
   	    <item name="colorControlNormal">#757575</item>
   	    <item name="colorControlActivated">#0ba1e7</item>
   	    <item name="colorControlHighlight">#303F9F</item>
   	    <item name="colorSwitchThumbNormal">#BDBDBD</item>
   	    <item name="android:colorButtonNormal">#0ba1e7</item>
   	    <item name="android:colorEdgeEffect">#C5CAE9</item>
   	</style>
   </resources>

The expected behaviour would be to have the all uppercase default disabled. But it gets ignored.

Lorenzo Piccinini 2016-10-25

Oh my god! I went mad with this textAllCaps of buttons inside listview!!!! I have the same problem!! :-/
Lorenzo Piccinini 2016-10-28

Does anyone will look this bug? It is persistent with last sdk 5.5.1 and Android version 5, 6 and 7.

Lorenzo Piccinini 2016-10-29

Code example. Download the project https://www.wetransfer.com/downloads/cb2d05ca927dacf0e395cccf2bcc5c6320161029162519/fbb102deacca31a0e74ddf2c4c03ab0c20161029162519/5e7773 ApplicationWindow.js

   function ApplicationWindow() {
   	//load component dependencies
   	var win = Ti.UI.createWindow({title: 'test button allCapsText', backgroundColor:'#ffffff', layout: 'vertical'});
   
   	var btn_win = Ti.UI.createButton({
   		top: 8,
       	bottom: 8,
           width: 100,
           height: 36,
           borderRadius: 18,
           borderWidth: 1,
           borderColor: 'red',
           title: 'test',
           backgroundColor: 'red'
       });
       
       win.add(btn_win);
       
   
   	var listView = Ti.UI.createListView({top: 20, backgroundColor: 'blue'});
   
       var view = Ti.UI.createView({width: Ti.UI.FILL, height: Ti.UI.SIZE});
       
   
   	var btn = Ti.UI.createButton({
   		top: 8,
       	bottom: 8,
           width: 100,
           height: 36,
           borderRadius: 18,
           borderWidth: 1,
           borderColor: 'red',
           title: 'test',
           backgroundColor: 'red'
       });
       
       view.add(btn);
       
       
   	var header = Ti.UI.createListSection({headerView: view});
   	
   	listView.appendSection(header);
   	
   	win.add(listView);
   
   	return win;
   }

tiapp.xml

       <android xmlns:android="http://schemas.android.com/apk/res/android">
       	<manifest android:versionCode="1" android:versionName="1.0">
       	    <application android:theme="@style/Theme.Material" />
           </manifest>
       </android>

custom_theme.xml

   <?xml version="1.0" encoding="utf-8"?>
   <resources xmlns:android="http://schemas.android.com/apk/res/android">
   <style name="Theme.Material" parent="@style/Theme.AppCompat">
   		<item name="android:textAllCaps">false</item>
       	<item name="android:buttonStyle">@style/MyButton</item>
       </style>
   	
   	<style name="MyButton" parent="Widget.AppCompat.Button">
           <item name="android:textAllCaps">false</item>
       </style>
       
   </resources>

Chee Kiat Ng 2016-11-01

[~otto.pic] Thanks we'll check it out soon.

Farzad Merzadyan 2016-11-01

PR: https://github.com/appcelerator/titanium_mobile/pull/8572

   function ApplicationWindow() {
   	//load component dependencies
   	var win = Ti.UI.createWindow({title: 'test button allCapsText', backgroundColor: '#ffffff', layout: 'vertical'});
   	
   	var btn_win = Ti.UI.createButton({
   		top: 8,
   		bottom: 8,
   		width: 100,
   		height: 36,
   		borderRadius: 18,
   		borderWidth: 1,
   		borderColor: 'red',
   		title: 'Zig',
   		backgroundColor: 'red',
   		textAllCaps: false
   	});
   	win.add(btn_win);
   	
   	var listView = Ti.UI.createListView({top: 20, backgroundColor: 'blue'});
   	
   	var view = Ti.UI.createView({width: Ti.UI.FILL, height: Ti.UI.SIZE});
   	
   	var btn = Ti.UI.createButton({
   		top: 8,
   		bottom: 8,
   		width: 100,
   		height: 36,
   		borderRadius: 18,
   		borderWidth: 1,
   		borderColor: 'red',
   		title: 'ZigZag',
   		backgroundColor: 'red',
   		textAllCaps: false
   	});
   	
   	view.add(btn);
   	
   	var header = Ti.UI.createListSection({headerView: view});
   	
   	listView.appendSection(header);
   	
   	win.add(listView);
   	
   	return win;
   }
   var win = ApplicationWindow();
   win.open();

Gary Mathews 2016-11-08

master: https://github.com/appcelerator/titanium_mobile/pull/8592
Josh Longton 2016-11-28

Verified as fixed the button text is now lowercase. Tested on: {noformat} macOS Sierra 10.12.1 Nexus 5X(6.0.1) Nexus 6p (7.0) Android emulator (4.4.2, 5.0.1) Studio: 4.8.0.201611121409 Ti SDK: 6.1.0.v20161128031712 Appc NPM: 4.2.8 App CLI: 6.1.0-296 Node v4.4.7 {noformat} *Closing Ticket.*

JSON Source