NativeScript Android Buttons All CAPS (Angular 2)

I recently ran into the problem with Android buttons having every letter capitalized. My design calls for something different so, here’s how I solved the problem. Also included, are different solutions to different problems.

the code solution

<Button #myButton text="Maximum EFFORT!"></Button>

View above.
Code below.

import { ViewChild, ElementRef, OnInit } from "@angular/core";
import { Button } from "ui/button";
...
@ViewChild("myTemplateVar") private myButtonRef: ElementRef;
public ngOnInit(): void {
    let button: Button = (<Button>this.myButtonRef.nativeElement);
    button.android.setTransformationMethod(null);
}

This solution is on a button by button basis but it does remove the Uppercasing from the button in the case you want to do something creative with your button text.

The CSS Solution

You can use the text-transform property in CSS on a selector that accesses a button to change the text style:

button {
    /** ALL CAPS **/
    text-transform: uppercase;
}

Here are the values that can be set and what they do:

• none: There is no transform applied. Consider this default. This does not remove the uppercase styling, it yields to the styles defined by the platform.
• uppercase: This makes each letter uppercase.
• capitalize: This makes the first letter of each word uppercase.
• lowercase: This makes each letter lowercase.

I was able to use the capitalize solution as its what my design called for

The styles.xml Solution

You are supposed to be able to put the following setting inside of a style declaration

App_Resources/Android/values/styles.xml

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

I was not able to get it to work but is documented in the android APIs. Tweet me @scottmgerstl if you know about or have figured out this approach. I would like to implement it.