Comments (9)
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);
}
from nativescript-floatingactionbutton.
Duplicate of #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.
from nativescript-floatingactionbutton.
Thank you @bradmartin, I will check #20 and see if I can work it out
from nativescript-floatingactionbutton.
from nativescript-floatingactionbutton.
@bradmartin Maybe you can refer to React Native action button https://github.com/mastermoo/react-native-action-button to implement the Nativescript version.
from nativescript-floatingactionbutton.
@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
from nativescript-floatingactionbutton.
I see that, at least in NS v6.5.0 and above, you can specify an image src
like this:
<Image src="font://" class="fas t-36" />
@bradmartin Can't this be leveraged in order to draw font-icons on the floating button ?
from nativescript-floatingactionbutton.
Hmm... actually managed to find how to use font-icons by looking at the source code:
<FAB:fab text="" 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 ?
from nativescript-floatingactionbutton.
@surdu very much welcome and appreciated, thanks for your information and offer.
from nativescript-floatingactionbutton.
Related Issues (20)
- Can I remove padding around icon? HOT 1
- Calling js method onCreateView failed HOT 2
- Error when adding the plugin HOT 1
- JS: topmost() is deprecated. Use Frame.topmost() instead. HOT 2
- How to use svg images HOT 2
- Fab is not showing when scroll completes HOT 1
- text is not working. HOT 6
- loadFromFontIconCode() is deprecated HOT 4
- Adapt icon to screen HOT 10
- Styles not applied on app build for production HOT 2
- FAB 2.0.1: font icons have different sizes on different screens HOT 1
- Crash in flexbox-layout.android.js - Right-hand side of 'instanceof' is not an object HOT 5
- NativeScript 7 update HOT 1
- Could not load view for: Fab.ReferenceError: NativeClass is not defined when used with {N} 7 with angular HOT 12
- FAB.TypeError: core_1.Property is not a constructor HOT 5
- Changing color to text does not work HOT 6
- Display the action items when Fab Button is clicked - Nativescript7 Angular10 HOT 3
- @nativescript/core still imported for lower version than NS7
- icon appearing bigger and cannot be resized HOT 2
- App is crashing on NS Angular
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nativescript-floatingactionbutton.