NativeScript-FAB like on Twitter

By the end of this article, you will be able to animate your fab like on twitter. We will use NativeScript with Angular. Actually it doesn’t matter you can adapt code for yourself easily. Icons are from FontAwesome. You can check on this link how to use it : https://docs.nativescript.org/angular/ui/ng-components/icon-fonts

Index

1- Create a FAB

2- Animate the FAB

3- Return to first state

1- Create a FAB

Firstly, you have to know how GridLayout works. You can create a table-like view and also you can create superimposed structures. Let’s give an example for better understanding. Let’s assume you’re logging into instagram. You filled the fields and pressed sign in button. Then what happened ? First things first, an activity indicator appeared instead of the button’s text value. Activity indicator and login button are superimposed structures. It’s an example of superimposed structures, we can do that with GridLayout. There are two ways to create superimposed structures with GridLayout.

  • If you did not define rows and column, whichever is on the bottom line it appears at the top.
  • Put the structures you want to overlap in the same location.

Now let’s create our button with all ui.

Code Explanation

  • The height of GridLayout is just adjusted.
  • If you don’t know how to use font awesome icons, please check on the above link.
  • In order to achieve these buttons on our typescript file, we use # format.This way we’re giving an id to component.
  • At first, fab will appear and close button won’t. If we long press the fab, fab will disappear and close button will appear. So we used “visibility” to do that.
  • After long press, our other three buttons will appear. Then if we press the close button, three buttons will disappear and fab will appear. All will be animated.

Result of the above code

2- Animate the FAB

Here is how to achieve our buttons.

Let’s animate the buttons

Code Explanation

3- Return to first state

Code Explanation

  • 0 represents the first state of button.

All Code

Here is the result of we did

I am really happy you read my article. If you have any suggestions or improvements of any kind let me know. I’d love to hear from you 😊@slymnkocak on Twitter

Mobile Application Developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to create Dynamic Breadcrumbs using “react-router-dynamic-breadcrumbs”

Keep Wallet Connected on Page Refresh

Recording Audio in React and Persisting to a Rails Backend

51 business quotes to inspire you #business #inspiration https://t.co/uETLppSlOA

RxJS operators in pictures, but mostly memes

5 Tips You Need To Know To Nail a Perfect Essay

Core Concept in React Js

Polar: Milestone 2 overview

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Süleyman Koçak

Süleyman Koçak

Mobile Application Developer

More from Medium

Photorealistic Rendering with Daz 3D — 1

Stubbing Responses With Cypress

Hamleys Website Cloning — Collaborative Project At Masai School

How To Make Money On Fiverr In 17 Ways