UI: Floating Button in nativescript-core


#1

Is it possible to add a floating button in nativescript apps ? the button should be fixed(at bottom, top or anywhere) all the time even the user scrolling the app page. ?


#2

You are perhaps looking for Floating Action Button (FAB). You could use the built-in Android btn, or a pure JS implementation.

The forum has had a similar discussion recently - Floating Button

Plugin: https://github.com/bradmartin/nativescript-floatingactionbutton


#3

Thanks for the suggestion @Pete.K …I have a latest question, How can I change the name of the app.


#4

Application ID or the name on the application icon, or the title in the action bar?


#5

name of the application icon.


#6

You’d want to change the android:label attribute in the AndroidManifest. Easiest would be to hardcode the string there.

The correct approach would be to create a strings.xml in app/App_Resources/Android/values/ and declare your app name there for the app_name string identifier.

This is what a simple strings.xml changing the app name would look like:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Awesome App</string>
</resources>

PS. Please mark a response as the solution to this post if your original question has been resolved. This will help keep the forums tidier.


#7

It worked. Thank you


#8

For completeness you may also want to add the following:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Your App Name</string>
<string name="title_activity_kimera">Your App Name</string>
</resources>

not only in app/App_Resources/Android/values/ but also in app/App_Resources/Android/values-v21/


#9

values-21 will take precedence over the values on devices API 21+, since there is no strings configuration in values-21, doing what you are suggesting would be redundant. Unless of course you need different names for different devices.


#10

Hi @Pete.K ,
While I am trying to code FAB by using this link https://github.com/bradmartin/nativescript-floatingactionbutton
and I got an error which I am unable to understand…
Here I am attaching the snap.

Thanks.


#11

@sagar1911 the error states that the element you try to implement in your view cannot be found. Did you install the npm package before-hand? This is how you would use it from a clean project:

tns create myApp
cd myApp
npm i nativescript-floatingactionbutton --save
< add the FAB element somewhere in your view , or follow the README>
tns run android/ios


#12

I have tried the steps you mentioned but same error coming. I dont know
whats wrong !! :frowning:

Rodda SagarUX Engineer
M +91 9502315034
E sagar@divami.com


#13

and yay I installed the plugin using the command mentioned in the link
above.

Rodda SagarUX Engineer
M +91 9502315034
E sagar@divami.com