'How to align title text in ActionBar to the right instead of the default left?

I am creating an Arabic(RTL) app with NativeScript. I want the action bar to be sorted in rtl direction so the title is the right and menu options is to the left.

I tired using css and horizontalAlignment but nothing worked.

How can I achieve this?

Thank you.

nativescript


Solution 1:[1]

Example

<Page xmlns="http://schemas.nativescript.org/tns.xsd">
   <Page.ActionBar>
      <ActionBar >
         <Label text="TITLE"/>
     </ActionBar>
   </Page.ActionBar>
</Page>

And with css u can set to right side with or other styling of ActionBar

ActionBar Label{
    text-align:right;
    horizontal-align:right;
}

Aligning title of ActionBar

Solution 2:[2]

If you need RTL support due to language vs just "alignment" I would convert the entire app to RTL using android.view .View.LAYOUT_DIRECTION_RTL:

This code will make the ActionBar ( and other components ) across the app to RTL

# app.module.ts

import {
  android as Android,
  AndroidActivityEventData,
  AndroidApplication } from '@nativescript/core/application';

Android.addEventListener(AndroidApplication.activityCreatedEvent, (event: AndroidActivityEventData) => {
  event.activity.getWindow().getDecorView().setLayoutDirection(android.view .View.LAYOUT_DIRECTION_RTL);
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Marek Maszay
Solution 2 Ricky Levi

Related Questions