Not showing on devices with API level < 21? about nativescript-floatingactionbutton

[bradmartin]

Can you provide your code involved? I just updated an app this week with latest nativescript and it was fine on all Android versions during testing (4.2, 5.1, 6.0, 7.0). Thanks and we will figure out what's going on for sure :)

…

On Wed, Feb 15, 2017, 2:22 AM Ravi ***@***.***> wrote: FAB button is not visible on devices having api level less than 21. Is ther any workaround to resolve this.? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#47>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFulhLaoIGdKzgZgl8bp0AGI4k8t_p_1ks5rcrXcgaJpZM4MBa-8> .

[dlucidone]

Is this has something to do with webpack -
http://docs.nativescript.org/angular/tooling/bundling-with-webpack#dynamic-imports
I've not done this sorta import for FAB. but yeah I've installed my apk on devices list below -

Motorola MotoX - 4.2.2 API 17
Motorola MotoX - 4.3 API 18
Samsung Galaxy Note 2 - 4.2.2 API 17
Google Nexus 4 - 4.4.4 API 19

[dlucidone]

Any Solution to this!

[bradmartin]

@triniwiz don't you use the FAB and webpack your apps?

[dlucidone]

Lib is working completely fine and i also use webpack to bundle my app. but the fab is juss missing from devices with API< 21

[triniwiz]

Never used FAB

[dlucidone]

@bradmartin Any Updates on this?

[bradmartin]

Nope. It works on a public facing app running on Android 4.2 for myself and clients. As well as many others using the plugin. I'm guessing you have a layout issue that's causing the issue or something device specific possibly. Can you share your layout and screenshot without private info to get a better idea. Then I can help disect the layout and better track the issue.

…

On Tue, Mar 28, 2017, 6:58 AM Ravi ***@***.***> wrote: @bradmartin <https://github.com/bradmartin> Any Updates on this? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#47 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AFulhGfRvBktXt9ybFLn4ZGzqXjRjzNKks5rqPXrgaJpZM4MBa-8> .

[dlucidone]

Here is the code i'm using

    <ActionBar title="Packages" style="background-color:#ED2831; color:white">
     <ActionItem (tap)="fabTap()">

    <Label class="actionItemLabel" text="Add" color="white" ></Label>
    </ActionItem>
     </ActionBar>
      <StackLayout>
      <SearchBar class="searchBar" textFieldHintColor="#DEDEDE"  (clear)="onClear()" (loaded)="sBLoaded($event)"  id="searchP" #sb hint="Search by  Name" [(ngModel)]="searchPhrase"(ngModelChange)="onChangeP($event)"></SearchBar>
<Label [text]='total' textWrap="true" class="m-l-10"style="margin-top:5px"></Label>
<GridLayout style="margin-top:5px">
    <FAB (tap)="fabTap()" row="0" icon="res://itisfab" rippleColor="#f1f1f1" class="fab-button" hideOnSwipeOfView="list-style" swipeAnimation="slideDown"></FAB>
     <PullToRefresh (refresh)="refreshList($event)">
    <ListView [items]="pList" class="small-spacing" (loadMoreItems)="listViewLoadMoreItems()">
        <template let-item="item">
            <GridLayout columns=" *,*,*,*" rows="*, *" (tap)="viewP(item.id)" style="padding: 10;">            
                </GridLayout>
        </template>
    </ListView>
     </PullToRefresh>
</GridLayout>

[bradmartin]

I think your issue is a layout issue - the best approach to using a FAB and simplifying its position to be overlayed on a listview (or any other view) is to use a GridLayout as the parent of your layout. Then set the ListView and Fab on the same row. Then you need to style the FAB with alignment styles. The README and demo have good sample code for this :)

[davorpeic]

Hey @dlucidone
did you solved webpack issue? I'm expeciecing similar issue only when try to build with webpack. My template is complex, so I simplified it as much as I can and normal build shows it, but build with webpack it doesn't (android 6). Here is my simplified template. Using latest Angular 4 {NS}

<ActionBar [title]="detail.parcela" class="action-bar">
    <NavigationButton icon="res://ic_arrow_back_white_24dp" (tap)="goBack()" *ngIf="showDetail"></NavigationButton>
    <ActionItem (tap)="showInfo()" android.position="actionBar" *ngIf="!showDetail" class="detail-bar-icons" verticalAlignment="center">
        <Label [text]="'mdi-face' | fonticon" class="mdi btn-close" [class.infoOpen]="info == true" verticalAlignment="center"></Label>
    </ActionItem>
    <ActionItem (tap)="onTap($event)" android.position="actionBar" *ngIf="!showDetail" class="detail-bar-icons">
        <Label [text]="'mdi-clear' | fonticon" class="mdi btn-close"></Label>
    </ActionItem>
</ActionBar>

<GridLayout rows="*" columns="*">

   

    <StackLayout row="0" verticalAlignment="bottom" col="0" >
        <FAB icon="res://ic_keyboard_arrow_right_white_24dp" rippleColor="#f1f1f1" (tap)="onTap($event)" class="fab-button">
        </FAB>
    </StackLayout>

</GridLayout>

not sure what could be the issue, can't see any errors.

ps. I tried running demo but it gives render error so couldn't test it

[davorpeic]

Ok, solved my issue by adding
registerElement('Fab', () => require('nativescript-floatingactionbutton').Fab);
to main.aot.ts :)