NativeScript Android Buttons All CAPS (Angular 2)

Scott M Gerstl
Aug 21, 2016 · 2 min read

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);;

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


<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.

Scott M Gerstl

Written by

full stack developer specializing in javascript & typescript, angular 2, and stenciljs. Volleyball player, traveler, speaker.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade