Floating Button


#1

How to create a floating button using absolute layout ?? I don’t wanna to use any external plug-in. I want to design something similar to this:

https://pbs.twimg.com/media/CW8Ki-mWMAApGoZ.jpg


UI: Floating Button in nativescript-core
#2

If you use a GridLayout, just explicitly set your AbsoluteLayout to be on row="0". It’s a little trick I learned awhile ago, for overlaying UI. You don’t have to use an AbsoluteLayout in my context. You could use any layout type.

i.e.

<GridLayout rows="*, *">
    <StackLayout>
       <Label text="Some Content"></Label>
    </StackLayout>
   <AbsoluteLayout row="0">
      <Button text="FAB"></Button>
   </AbsoluteLayout>
</GridLayout>

Just to show you what I mean in a page context. Obviously you need to specify the position of the layout, etc.

edit:

There are also existing plugins to do this as well: https://github.com/bradmartin/nativescript-floatingactionbutton. See how his example shows appending the list view and the button to row="1"?


#3

Why are you trying to recreate the wheel? @bradwaynemartin great plugin mentioned above will do exactly what you need without any of the headache.


#4

If you don’t want to use the plugin - the complete source is here for android https://github.com/bradmartin/nativescript-floatingactionbutton/blob/master/fab.android.ts#L14 - that’s just using native android so you can do create the FAB yourself if you want :smile:


#5

Thanks for the interest. I did it using AbsoluteLayout and z-index. I was not able to figure out how to implement z-index but with some help from github community - it’s working good. I didn’t use plugin because I dont think it will allow me to manipulate certain properties like what if I want “@” symbol instead of “+” in FAB. I haven’t implemented it so not sure even if it allows manipulation to this level - but I think making custom components is more fun than using any plug-in. @sean-perkins - thank you for suggesting AbsoluteLayout.


#6

Just posting for the record here, yes you can use different icons in @bradwaynemartin’s plugin.


#7

Hi @sagarpandya94 . If you’re still looking to do with without plugins (just for kicks), then check out my series on doing exactly this here - https://www.youtube.com/playlist?list=PLPwbI_iIX3aSKRjtx-0dOF6701njL-BuE

Here is the writeup on it: http://nuvious.com/Blog/2017/1/27/how-to-build-your-very-own-pure-javascript-and-css-fab-in-nativescript-and-angular-with-videos

Alex


#8

@alexziskind1
Hey Alex! :slight_smile:

I’ve seen the tutorial and I’ve got to say it is awesome!

I have a little question:
What is the correct way to decide what will be the general color and the color that will be when pressing down the button from parent view though Input parameters?

Thank you a lot,
Bar


#9

Glad you enjoyed the tutorials.

The button colors in different states should be determined by the material design guidelines. You can find specification here.

You can pass the color around from parent to child using the standard @Input decorator in the child.

----Parent html

<mychild buttoncolor="blue"></mychild>

----/Parent html

----Child code

@Input('buttoncolor') buttoncolor;

----/child code

I hope this helps.

Alex


#10

Thanks a lot @alexziskind1 !
Works just perfect!


#11

@alexziskind1 Definitely an awesome tutorial! I tried following it and I’ve created most of the visual aspects. The problem that I’m having is that when I actually click on the button the item is what’s being “tapped”, not the floating button. Have you seen this in your experience? Is there something about the RadListView that takes over the “sensor” priority, so to say? Here’s my code (I took the sample app and added the floating button):

<GridLayout class="page page-content" height="100%" width="100%" rows="*, auto">
    <RadListView [items]="cars" (itemTap)="onCarItemTap($event)" class="list-group">
        <ng-template tkListItemTemplate let-car="item">
            <StackLayout class="list-group-item">
                <GridLayout rows="*, *, *" columns="*, *" class="list-group-item-content">
                    <Label [text]="car.name" class="text-primary font-weight-bold"></Label>
                    <Label col="1" horizontalAlignment="right" class="list-group-item-text m-r-5">
                        <FormattedString>
                            <Span text="&euro;"></Span>
                            <Span [text]="car.price"></Span>
                            <Span text="/day"></Span>
                        </FormattedString>
                    </Label>
                    <StackLayout row="1" class="hr-light m-t-5 m-b-5" colSpan="2"></StackLayout>

                    <Image row="2" [src]="car.imageUrl" stretch="aspectFill" height="120" class="m-r-20"
                           decodeHeight="120"></Image>
                    <StackLayout row="2" col="1" verticalAlignment="center" class="list-group-item-text">
                        <Label class="p-b-10">
                            <!-- set fontFamily="system" to workaround "Service exited due to Segmentation fault: 11" error -->
                            <FormattedString ios:fontFamily="system">
                                <Span text="&#xf1b9;   " class="fa text-primary"></Span>
                                <Span [text]="car.class"></Span>
                            </FormattedString>
                        </Label>
                        <Label class="p-b-10">
                            <!-- set fontFamily="system" to workaround "Service exited due to Segmentation fault: 11" error -->
                            <FormattedString ios:fontFamily="system">
                                <Span text="&#xf085;   " class="fa text-primary"></Span>
                                <Span [text]="car.transmission"></Span>
                                <Span text=" Transmission"></Span>
                            </FormattedString>
                        </Label>
                        <Label>
                            <!-- set fontFamily="system" to workaround "Service exited due to Segmentation fault: 11" error -->
                            <FormattedString ios:fontFamily="system">
                                <Span text="&#xf2dc;   " class="fa text-primary"></Span>
                                <Span [text]="car.hasAC ? 'Yes' : 'No'"></Span>
                            </FormattedString>
                        </Label>
                    </StackLayout>
                </GridLayout>
            </StackLayout>
        </ng-template>
    </RadListView>

    <AbsoluteLayout verticalAlignment="top" horizontalAlignment="left" row="0">
            <FloatButton (tap)="onTap($event)" text="+">

            </FloatButton>
    </AbsoluteLayout>