Nativescript: Icon in Action Bar

[amjd]

I have been trying to add icons in the Action Bar, such as menu, back etc., on the left of the title text. This is the code I'm using:

  <Page.actionBar>
      <ActionBar>
        <ActionBar.title>
          <Label text="&#xe200;" cssClass="icon" />
          <Label text="SupportIT" style="font-size: 20; font-weight: bold" />
        </ActionBar.title>
        <ActionBar.actionItems>
            <ActionItem text="Settings" android.position="popup" />
            <ActionItem text="Profile" android.position="popup" />
            <ActionItem text="Logout" android.position="popup" />
        </ActionBar.actionItems>
      </ActionBar>
  </Page.actionBar>

The icon class has just one CSS property, font-family: icomoon. I'm using a custom generated icon font.

The same label displays the icon when used outside the Action Bar.

[bradmartin]

@amjd - just to be certain, do you have that font installed in your project under 'app/fonts'? If so, then it's possible that using the icon fonts (Ionicons, FontAwesome, etc.) with the escaped HTML strings is not supported. If that's the case, hopefully the team can extend the use of the icon fonts on any element via the text property.

[amjd]

@bradmartin Yes, the font is exists in 'app/fonts'. The icons show up in the rest of the page both when used directly or as an escaped HTML string. The problem seems to be with the Action Bar.

[bradmartin]

Okay well hopefully the team will extend the usage of the icon fonts inside any view with a text property.

[enchev]

Hey folks,

While you can set font-family for any view in titleView property of the ActionBar, currently font-family is not supported for the ActionBar items. Here is an example for titleView:

    <ActionBar>
      <ActionBar.titleView>
          <Label text="&#xf17b;" style="font-family: FontAwesome;"/>
      </ActionBar.titleView>
    </ActionBar>

We will do our best to add support for ActionBar items soon.

Thanks

[amjd]

@enchev That worked, but when I add another label with the title of the page only the latter displays, not the icon. I could combine them into one label but that would mean messing up the font of the title and I won't be able to use the icon alone to perform some action like back, menu, etc.

Also, the icons added using a label don't have a ripple effect on Android when selected, like they have in most apps. Case in point, the action items icon (three dots) has the effect. The ripple effect isn't really a priority, the icon should just act like its native counterpart.

I guess what we need is for icon buttons to be made first-class citizens in NativeScript, with or without text. And the accompanying text, if any, should be able to use a different font. I wonder if it would make sense to implement an XML tag for icons like <icon cssClass="icomoon">&#e200;</icon>.

Edit:
After going through some issues, I realised what I need is <NavigationButton />. Unfortunately, it didn't work for me. Here's the code segment:

<Page.actionBar>
    <ActionBar title="My title">
      <NavigationButton text="Back"/>
    </ActionBar>
</Page.actionBar>

The Navigation Button text never displays. I guess I should create another issue for that?

Thanks guys for all the good work you are doing. :) Once Navigation Button and Action Items start supporting font-family property, the Action Bar implementation would be almost complete.

[vakrilov]

@amjd You can set only icon for the navigation button in Android. Setting text is not supported by Android.

[amjd]

@vakrilov I tried it with Android system icon ic_menu_back, without any results. Am I doing it right?

<Page.actionBar>
    <ActionBar title="My title">
      <NavigationButton icon="res://ic_menu_back" />
    </ActionBar>
</Page.actionBar>

[bradmartin]

@amjd - do you have an image file in your 'App_Resources/Android' folder titled 'ic_menu_back' ?

If not then there's no image to display from the res path. If you want to use the default android system icons here's the link with some code to help. https://docs.nativescript.org/ApiReference/ui/action-bar/HOW-TO

I don't believe it will work on NavigationButton though.

[vakrilov]

@amjd: @bradmartin is correct. Currently (v1.5.0), setting the android.systemIcon will not work. However, there is already PR pending that fixes that (in Android only as iOS has limitations), so hopefully it will be included in v1.5.1.
In 1.5 you can still use icon property of the NavigationButton, but you will have to add the image as a resource in you App_Resources folder.

[amjd]

@bradmartin No, I didn't. I thought system icons would just work. :P However, I did copy another icon to the folders app/App_Resources/Android/drawable-{ldpi,mdpi,hdpi}, but that didn't work. I guess I just need to check the Android docs on using assets.

@vakrilov That's awesome! I am eagerly waiting for the next release. :)
Is it possible to add support for icon fonts too, or are there any restrictions in Android regarding that?

[vakrilov]

@amjd The main problem in Android is that it is really hard to style the menu items in the action bar after they are created. This is what is needed to be able to style the ActionBar items with CSS. However, implementing this will involve some hacks and may be unstable, so we haven't done it. In your case it would be easier to use icon resources.

Note: The "android" way to style the items in action bar is by using styles and themes. You can still do that by putting your style.xml files in App_Resources/Android folder. However, this will be android-specific solution.

[amjd]

@vakrilov I see. Thanks for explaining. :) And I'll check out the link for styles and themes, it's going to make my work easier.

[firescript]

If you would like to use an icon font in the action bar see below. This requries you have a class that loads the icon font.

    <Page.actionBar>
        <ActionBar>
            <ActionBar.titleView>
                <Label text="MY APP" class="logo" />
            </ActionBar.titleView>
            <ActionBar.actionItems>               
                <ActionItem ios.position="right" tap="myFunction">
                    <ActionItem.actionView>
                        <StackLayout>
                            <Label text="&#xf073;" class="font-awesome-icon "/>
                        </StackLayout>
                    </ActionItem.actionView>
                </ActionItem>
            </ActionBar.actionItems>            
        </ActionBar>
    </Page.actionBar> 

my font class:

.font-awesome-icon{
    font-family: 'FontAwesome';
}

Then just make sure your FontAwsome font is available in the fonts directory:

[divyachandana]

html

<ActionBar title="Reports">
    <ActionItem >
        <Label [text]="filter" class="fa filter-style"></Label>
    </ActionItem>
    <ActionItem text="Logout" ios.position="true" (tap)="logout()" android.position="popup"></ActionItem>
</ActionBar>

typescript

filter = String.fromCharCode(0xf0b0);
css

.fa {
  font-family: "FontAwesome";
}

add FontAwesome.ttf in fonts directory

[vick16ach]

make sure ttf file name and font-family: " name ".
should be same .. then whereever you use this make sure you are giving the class name which contains font-family: " name " in app.css.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.