Support Text / Font Icon

[manojdcoder]

Add support for text / font-icon.

[bradmartin]

Duplicate of https://github.com/bradmartin/nativescript-floatingactionbutton/issues/20 On Android you'll have a lot of work to make this possible. If you're willing to create a PR with the functionality that would be awesome but I won't have the time to do this myself, especially for Android as it is a lot of work. You can see my comment on the other issue how the Fab on Android inherits from an image class. You would have to add a textview to the Fabs inner view and override some things. So while possible it's time consuming. Again I'd gladly accept a PR for this but it's a challenge to implement so let me know if you want to attempt and I can help answer any questions. Thanks.

[manojdcoder]

Thank you @bradmartin, I will check #20 and see if I can work it out

[bradmartin]

The iOS side might be easier to get working but I know Android will require a bit of work. Any questions let me know.

On Sat, May 20, 2017, 8:57 AM Manojkumar Murugesan notifications@github.com wrote:

Thank you @bradmartin https://github.com/bradmartin, I will check #20 https://github.com/bradmartin/nativescript-floatingactionbutton/issues/20 and see if I can work it out

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/bradmartin/nativescript-floatingactionbutton/issues/53#issuecomment-302874776, or mute the thread https://github.com/notifications/unsubscribe-auth/AFulhDAx3RdgnRouFcKBtw3vFnsXvVL4ks5r7vFHgaJpZM4NhM8Q .

[bigradish]

@bradmartin Maybe you can refer to React Native action button https://github.com/mastermoo/react-native-action-button to implement the Nativescript version.

[bradmartin]

@bigradish - I don't know RN very well but skimmed that library for any reference to the native Android FloatingActionButton and did not find one. It looks as if that is just a button exposing different options and not the 100% native Android FAB. At any rate, the best way to support text/font icon in a FAB is to use a normal NS button and style it to mimic a FAB. Even the native Android FAB doesn't simply support putting font/text on the widget. You can read some approaches here https://stackoverflow.com/questions/33671196/floatingactionbutton-with-text-instead-of-image

[xuhcc]

Here's the code to create a FAB with text icon on android:

<Fab (loaded)="onFabLoaded($event)">

import { Font, FontStyle, FontWeight } from 'tns-core-modules/ui/styling/font';

function textToBitmap(
    text: string,
    fontSize: number,  // Not the same as used in CSS, needs adjustment
    fontColor: string,
    fontFamily: string,  // Could be icon font too
) {
    const nsFont = new Font(fontFamily, 0, FontStyle.NORMAL, FontWeight.NORMAL);
    // Adapted from https://stackoverflow.com/a/39965170/1868395
    const paint = new android.graphics.Paint(android.graphics.Paint.ANTI_ALIAS_FLAG);
    paint.setTextSize(fontSize);
    paint.setColor(android.graphics.Color.parseColor(fontColor));
    paint.setTextAlign(android.graphics.Paint.Align.LEFT);
    paint.setTypeface(nsFont.getAndroidTypeface());
    const baseline = -paint.ascent();
    const width = paint.measureText(text);
    const height = baseline + paint.descent();
    const image = android.graphics.Bitmap.createBitmap(
        width,
        height,
        android.graphics.Bitmap.Config.ARGB_8888,
    );
    const canvas = new android.graphics.Canvas(image);
    canvas.drawText(text, 0, baseline, paint);
    return image;
}

onFabLoaded(args) {
    const fab = args.object;
    const bitmap = textToBitmap('+', 80, '#FFFFFF', 'normal');
    fab.android.setImageBitmap(bitmap);
}

[surdu]

I see that, at least in NS v6.5.0 and above, you can specify an image src like this:

<Image src="font://&#xf015;" class="fas t-36" />

@bradmartin Can't this be leveraged in order to draw font-icons on the floating button ?

[surdu]

Hmm... actually managed to find how to use font-icons by looking at the source code:

<FAB:fab text="&#xf02a;" class="fab-button fas" />

They points to note are that fab component has a text property and it considers the font family that you set for the component. If you need to achieve this, you might also want to read the docs about icon fonts in {N}.

@bradmartin Would a PR to add this use-case to the docs be welcomed ?

[bradmartin]

@surdu very much welcome and appreciated, thanks for your information and offer.