Bottom menu bar for android and IOS

Thread is closed for posting
4 posts, 0 answers
  1. Rana
    Rana avatar
    2 posts
    Member since:
    Apr 2017

    Posted 19 Apr 2017 Link to this post

    I want to implement a bottom menu bar for both IOS and Android. Can you please guide me which layout should I use, and how to fix my menu at the bottom of the page for both IOS and Android
  2. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 19 Apr 2017 Link to this post

    Hi,
    Thank you for your interest in UI for NativeScript.

    For your scenario, you could use RadSideDrawer component and its ability to specify the position of the component.
    When you create your  SideDrawer with the needed menu content, you could set up its drawerLocation property and set some of the available options: Left, Right, Bottom, Top as it is described in the documentation here.
    For example:
    <drawer:RadSideDrawer id="sideDrawer" drawerLocation="Bottom" drawerContentSize="280">
         
        <drawer:RadSideDrawer.drawerTransition>
          <drawer:RevealTransition/>
        </drawer:RadSideDrawer.drawerTransition>
         
          <drawer:RadSideDrawer.drawerContent>
          <!-- >> (hide) -->
            <StackLayout cssClass="drawerContent">
              <StackLayout cssClass="headerContent">
                <Label text="Navigation Menu"/>
              </StackLayout>
              <ScrollView>
                <StackLayout cssClass="drawerMenuContent">
                  <Label text="Primary" cssClass="drawerSectionHeader" />
                  <Label text="Social" cssClass="drawerSectionItem" />
                  <Label text="Promotions" cssClass="drawerSectionItem" />
                  <Label text="Labels" cssClass="drawerSectionHeader" />
                  <Label text="Important" cssClass="drawerSectionItem" />
                  <Label text="Starred" cssClass="drawerSectionItem" />
                  <Label text="Sent Mail" cssClass="drawerSectionItem" />
                  <Label text="Drafts" cssClass="drawerSectionItem" />
                  <Button text="Close Drawer" tap="{{ closeDrawer }}"/>
                </StackLayout>
              </ScrollView>
            </StackLayout>
          </drawer:RadSideDrawer.drawerContent>
     
          <drawer:RadSideDrawer.mainContent>
            <StackLayout cssClass="mainContent">
               
            </StackLayout>
          </drawer:RadSideDrawer.mainContent>
        </drawer:RadSideDrawer>


    For further help, you could also review the sample application here.

    Let me know, whether this helps or if I could assist you further.
    Regards,
    nikolay.tsonev
    Telerik by Progress
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Rana
    Rana avatar
    2 posts
    Member since:
    Apr 2017

    Posted 19 Apr 2017 in reply to Nikolay Tsonev Link to this post

    Thanks nikolay for replying, but I want to implement both SideDrawer and bottom menu in my app for both android and IOS. I know that default behavior of TabView for IOS converts it into a bottom menu, but I also want this functionality for android. Can you guide me in ths regard ?
  4. Nikolay Tsonev
    Admin
    Nikolay Tsonev avatar
    340 posts

    Posted 20 Apr 2017 Link to this post

    Hi Rana,
    Thank you for writing us back and for the further explanation.
    At this time the position of the TabView tabs could not be changed. This is known limitation for this component and we have already logged this as a feature request in our repository here.

    Unfortunately, I could not commit to exact time this will be ready. For further info, you could keep track on the issue.

    In the meantime, you could use SegmenteBar, which position could be change easily and will work properly for both Android and iOS. For example:

    XML
    <Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo" class="page">
        <Page.actionBar>
            <ActionBar title="My App" icon="" class="action-bar">
            </ActionBar>
        </Page.actionBar>
     
        <GridLayout rows="* auto" columns="">
            <StackLayout row="0" visibility="{{tabshow}}" >
                <Label text="First tab" textWrap="true" />
                 
            </StackLayout>
            <StackLayout  row="0" visibility="{{tabshow2}}" >
                <Label text="Second tab" textWrap="true" />
            </StackLayout>
            <StackLayout row="0" visibility="{{tabshow3}}">
                <Label text="Third tab" textWrap="true" />
            </StackLayout>
            <SegmentedBar row="1" selectedIndexChanged="indexChange" >
                <SegmentedBar.items>
                    <SegmentedBarItem title="First" />
                    <SegmentedBarItem title="Second" />
                    <SegmentedBarItem title="Third" />
                </SegmentedBar.items>
            </SegmentedBar>
        </GridLayout>
    </Page>

    TypeScript
    import { EventData, Observable } from 'data/observable';
    import { Page } from 'ui/page';
    import { HelloWorldModel } from './main-view-model';
    import {SegmentedBar, SelectedIndexChangedEventData} from "ui/segmented-bar"
     
    var flag=1;
    var tmpObservable:Observable;
    // Event handler for Page "navigatingTo" event attached in main-page.xml
    export function navigatingTo(args: EventData) {
      
        let page = <Page>args.object;
        tmpObservable= new Observable();
        tmpObservable.set("tabshow", "visible");
        tmpObservable.set("tabshow2", "collapsed");
        tmpObservable.set("tabshow3", "collapsed");
     
        page.bindingContext = tmpObservable;
    }
     
    export function indexChange(args:SelectedIndexChangedEventData){
        console.log(args.newIndex);
        if(flag>1){
     
         
            switch (args.newIndex) {
                case 0:
                    tmpObservable.set("tabshow", "visible");
                    tmpObservable.set("tabshow2", "collapsed");
                    tmpObservable.set("tabshow3", "collapsed");
                    break;
                case 1:
                    tmpObservable.set("tabshow", "collapsed");
                    tmpObservable.set("tabshow2", "visible");
                    tmpObservable.set("tabshow3", "collapsed");
                    break;
                case 2:
                    tmpObservable.set("tabshow", "collapsed");
                    tmpObservable.set("tabshow2", "collapsed");
                    tmpObservable.set("tabshow3", "visible");
                    break;
             
                default:
                    break;
            }
        }
        flag++;
     
    }
    Hope this is applicable for you.
    Regards,
    nikolay.tsonev
    Telerik by Progress
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top