How to use Material Design FAB (Floating Action Button) in a NativeScript app

UPDATE: Get the plugin on NPM

In a follow up to using the Material Design snackbar, I have found myself using more and more components from the Material Design spec. The other day I needed to implement the FAB (floating action button) component. I haven’t had time to think about implementing a plugin just yet but it’s on my schedule for the coming weeks.

I just wanted to share this ‘HOW TO’ guide because it took me awhile to figure out how to set the icon of the FAB, so hopefully this will save someone some time.

First, we need to create a new NativeScript app using the CLI, if you aren’t familiar with the NativeScript CLI, then you can find out more here.

tns create ExampleProject
cd ExampleProject
tns platform add android

Navigate to the build.gradle file located in the platforms/android folder and include the following dependency:

compile 'com.android.support:design:$suppotVer'

Now that we have the dependency added to our project, lets open the main-page.xml file in the app folder. Change the layout to the following:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
   <android>
        <placeholder id="fab" tap="fabClick" class="fab-button" margin="15" creatingView="creatingFab"/>
   </android>
</Page>

This layout contains a Placeholder element that we are going to use to construct the native FAB button.

Now we need to open the app.css file in the app folder and add a CSS class for the FAB button. I’m using ‘fab-button’ as my class:

.fab-button {
	height: 70;
	horizontal-align: right;
	vertical-align: bottom;
}

Go ahead and open the main-page.js file located in the same folder and change the source to the following:

var app = require("application");
var color = require("color");
var utils = require("utils/utils");
 
function creatingFab(args) {
    var fab = new android.support.design.widget.FloatingActionButton(app.android.currentContext);
    var res = utils.ad.getApplicationContext().getResources();
    if (res) {
        var identifier = res.getIdentifier("icon", 'drawable', utils.ad.getApplication().getPackageName());
        if (0 < identifier) {
            var bitmapDrawable = res.getDrawable(identifier);
            // Here we set the ICON of the FAB button
            fab.setImageDrawable(bitmapDrawable);
        }
    }
    var Color = color.Color;
    var rippleColor = new Color("#fff");
    var backgroundColor = new Color("#FF4081");
    // Change the ripple color on api >= 21, fills the button on api <=20
    fab.setRippleColor(rippleColor.android);
    // Change Background Color
    fab.setBackgroundTintList(android.content.res.ColorStateList.valueOf(backgroundColor.android));
    fab.show();
    args.view = fab;
}
exports.creatingFab = creatingFab;

Now lets see what we have created. Open your command prompt and run:

tns run android

This will build the android project and open the app on your emulator or an attached device. Once the app opens you should see the following:
Screenshot_2015-12-23-14-42-53

HOORAY!!! You’ve now created a native FAB button.

Now some of you might be thinking why is the FAB icon the NativeScript icon. Well lets circle back to the main-page.js file and break down the code to see why and how to change that.

At the beginning of the main-page.js file we are importing three Nativescript modules.

  • app
  • utils
  • color

The utils module is going to help set the icon/image background of the FAB button. The color module will allow us to set the background and the ripple color of the FAB button.

This line:

var identifier = res.getIdentifier("icon", 'drawable', utils.ad.getApplication().getPackageName());

uses the android method .getIdentifier()and the first argument is the file/image name. Since the default Nativescript app is generated with the nativescript icon in the App_Resources folder. We passed “icon” as the image name. I suggest you get some really nice Material Design icons from
Google’s official material-design-icons repo and put them in their respective folders in App_Resources. Then just change the first argument from “icon” to the file name of your image. Once you do this the icon in the FAB button will be changed to what you set.

Conclusion

This quick guide should give you all you need to construct the native Material Design FAB (Floating Action Button) in your NativeScript app. If you have any questions or comments then let me know. I’ll be glad to help if I can. Thanks for reading.

9 thoughts on “How to use Material Design FAB (Floating Action Button) in a NativeScript app

    1. Yes sir, I am. You have tech blogging mastered. I’ve always been able to easily understand and follow your guides so I knew it was a solid approach. I’ve learned a lot from your posts.

      Like

  1. Thanks for the great floatingactionbutton – plugin (https://github.com/bradmartin/nativescript-floatingactionbutton). Is it possible to show how to change the image by code using the new plugin. I get no error and fabButton.icon=”res://ic_add_white”; is called but image is not changed.

    xml:

    JS: (page is a global value)
    exports.fabTap = function(args){
    try{
    var fabButton = viewModel.getViewById(page,fabButton);
    if(fabButton){
    fabButton.icon=”res://ic_add_white”;
    }
    }
    catch(error){
    alert(error);
    }
    }

    Like

  2. Thanks for the respons Brad. I ended up using two pictures in the xml and just toggle the visibility by code. When i tried to replace the actual picture the styling in picture 2 was not beeing updated it seems. (the icon was beeing placed in the upper left corner of the circle). So i just went for the easy way out 🙂 tnx for the great plugins.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s