Fix Fab button layout error


#1

What’s the correct way to combine fab button in a page containing RadSideDrawer? The way I’m doing only a circle appears at the bottom of the page without the add icon and all the RadSideDrawer content is missing and I don’t want the fab to scroll.

<Page xmlns="http://schemas.nativescript.org/tns.xsd" 
navigatingTo="navigatingTo"
xmlns:nsDrawer="nativescript-pro-ui/sidedrawer"
xmlns:x="nativescript-statusbar"
xmlns:FAB="nativescript-floatingactionbutton" class="page">

<x:StatusBar ios:barStyle="light" barColor="#f56c0a" />

	<ActionBar title="Assistência" class="action-bar myaction-bar">
        <android>
            <NavigationButton icon="res://menu" tap="{{ toggleDrawer }}" />
        </android>
        <ios>
            <ActionItem icon="res://menu" ios.position="left" tap="{{ toggleDrawer}}" />
        </ios>
	</ActionBar>

	<nsDrawer:RadSideDrawer id="sideDrawer" drawerContentSize="150">

		<!-- side drawer content -->
        <ns:RadSideDrawer.drawerContent>
            <StackLayout class="sidedrawer-left sideDrawer">
                <StackLayout class="sidedrawer-content">
                    <!-- <Image src="res://user72" stretch="none" class="user-png"/> -->
                    <Label text="Perfil" padding="10" tap="{{ cadastrar }}" />
                    <Label text="Indicações" padding="10" />
                    <Label text="Pontos" padding="10" />
                    <Label text="Assistência" padding="10" />
                    <Label text="Conta" padding="10" />
                </StackLayout>
            </StackLayout>
        </ns:RadSideDrawer.drawerContent>

        <nsDrawer:RadSideDrawer.mainContent>

            <ScrollView> 
                <StackLayout class="p-16">


                    <Label class="assistence-label" text="...." 
                    horizontalAlignment="center" textWrap="true" />

                    <TextField class="m-t-10 m-b-10 m-l-15 m-r-15" hint="Assunto" text="{{ assunto }}"></TextField>

                    <TextView class="m-t-10 m-b-10 m-l-15 m-r-15" hint="Descrição" text="{{ descrição }}"></TextView>

                    <Button class="btn mybtn" text="Enviar" tap="{{ enviar }}"></Button>
            
                    <Image class="m-t-10 m-b-10 m-l-15 m-r-15" src="res://play50x50" stretch="none" tap="{{ playAudio }}"></Image>
                    
                    <!-- <Button class="btn mybtn" text="Gravar Áudio" tap="{{ start }}" />
                    <Button class="btn mybtn" text="Parar Gravação" tap="{{ stop }}" /> -->
                    <!-- <Button class="btn mybtn" text="Get File" tap="{{ getFile }}" /> -->
                    <!-- <Button class="btn mybtn" text="Ouvir" tap="{{ playAudio }}" /> -->
                    
                    <!-- <Label class="m-t-10 m-b-10 m-l-15 m-r-15" text="{{ recordedAudioFile }}" color="#3489db" textWrap="true" /> -->

                    


                </StackLayout>
            </ScrollView>

            <FAB:fab tap="{{fabTap}}" icon="res://add" rippleColor="#f56c0a" class="fab-button"
             horizontalAlignment="right" /> 


        </nsDrawer:RadSideDrawer.mainContent>

        
           

    </nsDrawer:RadSideDrawer>

</Page>

#2

I would first recommend inserting a GridLayout that is the first element inside <nsDrawer:RadSideDrawer.mainContent> then move the ScrollView and the FAB inside that layout.

If your icon is not displaying for your FAB, I would check if you have an image for add in your App_Resources for each platform.


#3

Ok, I made the layout works inside the grid but the icon is not showing yet. The name is correct and it’s inside the drawable-hdpi like the others images.

I tried changing icon="" to src="" but it didn’t work


#4

The plugin only supports “icon”: https://github.com/bradmartin/nativescript-floatingactionbutton.

Inputs are defined by the plugin authors, so changing them to what you may think is standard, will not always work.

Try displaying the icon without the plugin, for example using an image tag: <Image src="res://add" />. If it displays, it’s an issue to look at with the plugin otherwise the image is not located correctly for what Android requires.


#5

I removed the background-color from the css file and my icon has the same color so I could see it. I don know what’s happening because my icon is getting too small.


#6

What is your image size (the demo app shows 36px by 36px). Also your icon is the filled version of the plus icon. If you use the one provided with the demo app, it may actually size how you are expecting it.

https://github.com/bradmartin/nativescript-floatingactionbutton/blob/master/demo/app/App_Resources/Android/drawable-hdpi/ic_add_white.png


#7

I tried with icons 36x36, 48x48, padding: 0 and changed width and height but it gets the same issue.


#8

On iOS they are auto scaling the icon based on the button’s frame size: https://github.com/bradmartin/nativescript-floatingactionbutton/blob/master/src/fab.ios.ts#L76.

It’s very likely that the Android equivalent is doing the same under the hood.