Nativescript: how to vertically align text inside Label on Android

nativescript gridlayout vertical-align
nativescript label text-align: center
nativescript label vertical-align: center
vertical align text in label nativescript
vertical alignment css nativescript
nativescript align image
label text-align: center not working
nativescript stacklayout align: center

The text inside label is vertically aligned by default on iOS, however on Android it's not. How to center it vertically on Android (I'm interested in centering text inside Label, not wrapping label inside any other layout to get the same effect)?

To see what I mean run the next code on iOS and Android.

xml:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onLoaded">
    <Label text="test" />
</Page>

css:

Label {
    width: 60;
    height: 60;
    text-align: center;
    background-color: aquamarine;
    border-radius: 30;
}

Set the padding accordingly to the (width - font-size) / 2 (rough approximation may differ for smaller boxes where Capital or small letters has different center point)

e.g.

Label {
    width: 60;
    height: 60;
    border-radius: 30;
    text-align:center;
    background-color: aquamarine;
    padding: 15;
    font-size: 20;
}

or example with bigger sizes:

Label {
    width: 200;
    height: 200;
    border-radius: 100;
    text-align:center;
    background-color: aquamarine;
    padding: 80;
    font-size: 20;
}

p.s If you wrap your label in StackLayout you won't need height

e.g.

  <StackLayout>
    <Label text="test" class="title"/>
  </StackLayout>

Label {
    width: 200;
    border-radius: 100;
    text-align:center;
    background-color: aquamarine;
    padding: 80;
    font-size: 20;
}

How to Vertically Center Label Text in NativeScript Android , I am trying to vertically center the text within a label on Android, I have set vertical​-align: middle in the CSS and verticalAlignment=middle in the  Hey @einicher. In the example from your first post the item template is creating a grid and the first column is set to take 100 height. However, the label inside this column will be placed by default on top left position for android.

Using padding will screw things up if you're using the same css on iOS. setGravity(17) will also horizontally align the text. If you want to just vertically align the text, and keep the normal behavior for the horizontal alignment, use

this.nativeView.android.setGravity(this.nativeView.android.getGravity() & 0xffffffdf);

this will remove the vertical-align=top flag from the label

I've created this directive that should change the default for labels:

import {AfterViewChecked, Directive, ElementRef, Input} from '@angular/core';
import { Label } from 'ui/label';

@Directive({
    selector: 'Label',
})
export class UpdateLabelDirective implements AfterViewChecked {    
    private get nativeView(): Label {
        return this.el.nativeElement;
    }

    constructor(private readonly el: ElementRef) {}

    ngAfterViewChecked(): void {
        if (this.nativeView.android && (this.nativeView.android.getGravity() & 0x00000020)) {
            this.nativeView.android.setGravity(this.nativeView.android.getGravity() & 0xffffffdf);
        }
    }
}

Vertical center in label - Pro UI, The text inside label is vertically aligned by default on iOS, however on Android it's not. How to center it vertically on Android (I'm interested in centering text  The text of a label is vertically centered by default on iOS, but not on Android. It would be nice if the label on Android behaves the same by default. I think adding setGravity(CENTER_VERTICAL) to the android implementation would solve this. Which platform(s) does your issue occur on? Android

Don't think of it as vertically centring your labels text. Instead put your Label in a container and centre it relative to the container.

<StackLayout verticalAlignment="center">
  <Label text="test" />
</StackLayout>

This will centre align your Label (vertically) within the StackLayout. You'll also notice the StackLayout will now only take up the vertical space required by its children. If you want it to use up more vertical space you just need to give it a height.

The following creates a three row GridLayout with each row occupying 33.3...% of the screen with their labels centred within them.

<Page xmlns="http://www.nativescript.org/tns.xsd">
  <GridLayout rows="*, *, *">
    <StackLayout row="0" class="red stack">
      <Label text="red" class="label"/>
    </StackLayout>
    <StackLayout row="1" class="green stack">
      <Label text="green" class="label"/>
    </StackLayout>
    <StackLayout row="2" class="blue stack">
      <Label text="blue" class="label"/>
    </StackLayout>
  </GridLayout>
</Page>
.stack {
  height: 100%;
  vertical-align: center;
}

.label { text-align: center; }

.red { backgroundColor: red; }
.green { backgroundColor: green; }
.blue { backgroundColor: blue; }

Here's a Playground of the above if you'd like to see it working on your device. Try commenting out the height property in home-page.css (line 13).

Nativescript: how to vertically align text inside Label on Android, Did you verify this is a real problem by searching the [NativeScript Forum]. Y. Tell us about the problem. I'm unable to vertically align an element in a layout within a The FlexboxLayout gets the same height, but the text within it is not vertically centered NickIliev added the os: android label on Apr 4, 2018. Measure the view and its content to determine the measured width and the measured height. This method is invoked by measure(int, int) and should be overriden by subclasses to provide accurate and efficient measurement of their contents. When overriding this method, you must call setMeasuredDimension(int,

You can enable it natively, in the code:

myLabel.android.setGravity(17)

17 is value for Gravity.CENTER constant (https://developer.android.com/reference/android/view/Gravity.html#CENTER)

How to Vertically Center Label Text in NativeScript Android Tutorial , Text in #activeLabel stays on top in android, is centered vertical on ios (like i vertical-align: stretch; background-color: #00853e;" /> <Label  Set text alignment vertically center automatically on button click. Vertical center means to set your textview text into vertically middle of activity screen. Developer can set text alignment using xml file but some times there are special needs so you can also set text alignment using programming file. So here is the complete step by step tutorial for Set TextView Vertically center in android programmatically .

Most simple solution per css:

line-height: 100%;

Cannot vertically center Label in flexboxlayout with non-fixed height , Items are placed in the order they were declared in. <StackLayout backgroundColor="#3c495e"> <Label text="  Don't think of it as vertically centring your labels text. Instead put your Label in a container and centre it relative to the container. <StackLayout verticalAlignment="center"> <Label text="test" /> </StackLayout> This will centre align your Label (vertically) within the StackLayout.

Vertical-center text inside grid layout with vertical-align stretch on , In Android it positions the text as I would expect. However on iOS I see the text at the bottom of the label. vertical-align: center; https://docs.nativescript.org/core​-concepts/supporting-multiple-screens.html#platform-  Position your cursor in one of your labels on the last line that has text on it. Press the End key to move to the end of the line. Press Delete to delete the paragraph marker. Keep pressing Delete until the end-of-cell marker is at the end of the line. Repeat Steps 3 through 6 above for each label on your sheet.

Horizontal stack layout with vertically aligned , Based on the NativeScript XML Snippets extension, but adapted to the Vue Label - nslabel; Text Field - nstextfield; Secure Text Field (for passwords) lowercase. letter-spacing - letterSpacing - Sets the text letter spacing(On Android API Sets the vertical alignment of the current view within its parent. In this tutorial you will learn more about Android button alignment and how you can alignment android button in the same line by using either Android LinearLayout or Android RelativeLayout. Social

Vertical position text on label in iOS in Telerik AppBuilder discussion ,

Comments
  • On second thought it must be (height - font-size)/2 but in the case above both width and height have identical values so it will work for proportional dimensions
  • When I change the padding to exactly (height - font-size)/2 the text gets clipped from the bottom. So, yep, this still needs to be adjusted for different font sizes.
  • Btw, why is so? Why the text is centered vertically on iOS by default and no extra settings are needed, but Android it's aligned to the top?
  • padding: X is the key. Be careful if more the height