CODEWITHSUNDEEP
javascriptandroidnativescripthybrid-mobile-appandroid-bottomnav
Mill3r
Mill3r

Reputation: 544

Bottom Navigation bar for android application (NativeScript)

I am trying to create a navigation bar at the bottom of my android application. I am using NativeScript for creating the application. Is there any plugin to do this? 

<page
 xmlns="http://schemas.nativescript.org/tns.xsd"
 xmlns:drawer="nativescript-telerik-ui/sidedrawer"
 xmlns:widgets="shared/widgets"
 xmlns:statusbar="nativescript-statusbar"
 xmlns:bottomnav="nativescript-bottomnavigation"
loaded="pageLoaded">
<statusbar:StatusBar ios:barStyle="light" />
<page.actionBar>
<action-bar title="NativeScript">
  <navigation-button icon="res://ic_menu" tap="toggleDrawer" ios:visibility="collapsed" />
  <action-bar.actionItems>
    <ios>
      <action-item icon="res://ic_menu" ios.position="left" tap="toggleDrawer" />
    </ios>
  </action-bar.actionItems>
  <ActionItem tap="onDelete" ios.systemIcon="16" ios.position="right" text="Delete" android.position="popup"/>
  <ActionItem id="logoutButton" tap="logOut" ios.systemIcon="16" ios.position="right" text="LogOut" android.position="popup"/>
</action-bar></page.actionBar>
 <drawer:rad-side-drawer id="drawer">
<drawer:rad-side-drawer.mainContent>
   <!-- Home page contents -->
  <StackLayout loaded="contentLoaded">
    <image src="https://i.imgur.com/LY3cb3A.png" id="logo" tap="fun" height="100" margin="20 0 0 0" />
    <label text="Welcome to the NativeScript drawer template! This is the home page. Try tapping the logo." margin="20" horizontalAlignment="center" textWrap="true" />
  </StackLayout>
   </drawer:rad-side-drawer.mainContent>
<drawer:rad-side-drawer.drawerContent>
  <widgets:drawer-content />
</drawer:rad-side-drawer.drawerContent>
 </drawer:rad-side-drawer>

Upvotes: 1

Views: 4095

Answers (3)

Codedreamer
Codedreamer

Reputation: 1702

Programatically i would advice you write the code without library for easy manipulation and flexibility

consider the following CSS on your app.css

.add-menu-btn {
    background-color: #2b2dad;
    padding: 10;
    color: #fff;
    border-radius: 50;
    text-align: right;
}

.float-menu-bottom {
    vertical-align: bottom;
    horizontal-align: right;
    padding: 5;
}

Then on your xml file you should have your layouts structured how ever you want but maintain this.

One step layouts, main contents and absolute layouts

<Page>
    <GridLayout>
        <ScrollView>
          ...contents here or more layouts
        </ScrollView>
        <AbsoluteLayout class="float-menu-bottom">
            <StackLayout class="add-menu-btn">
                <Label text="add" class="mdi mdi-large menu-right"></Label>
            </StackLayout>
        </AbsoluteLayout>
    </GridLayout>
</Page>

Upvotes: 1

Hristo Eftimov
Hristo Eftimov

Reputation: 15773

I did a research about what's the best way to create a bottom navigation.

For me, the easiest approach is to create a GridLayout with two rows: one for the scrolling content and one for the bottom navigation: 

<GridLayout rows=*,60">
    <ScrollView row="0">
         ... scrolling content ...
    </ScrollView>
    <StackLayout row="1">
        ... navigation buttons ...
    </StackLayout>
</GridLayout>

The second row represents the navigation. In my example, I am using 60 dp in height. The first row (the scrolling content) takes the rest of the vertical space available. The star (*) symbol means — take as much space as available.

You can check my experience in the following article: NativeScript: how to create a fixed bottom navigation

Upvotes: 2

Anil
Anil

Reputation: 1614

Use this library

Solution 1

For better solution you can check here

Solution 2

Upvotes: 0

Related Questions