This is a migrated thread and some comments may be shown as answers.

Bottom menu bar for android and IOS

3 Answers 226 Views
General Discussion
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Rana
Top achievements
Rank 1
Rana asked on 19 Apr 2017, 08:09 AM
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

3 Answers, 1 is accepted

Sort by
0
Nikolay Tsonev
Telerik team
answered on 19 Apr 2017, 08:56 AM
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.
0
Rana
Top achievements
Rank 1
answered on 19 Apr 2017, 12:37 PM
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 ?
0
Nikolay Tsonev
Telerik team
answered on 20 Apr 2017, 08:10 AM
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.
Tags
General Discussion
Asked by
Rana
Top achievements
Rank 1
Answers by
Nikolay Tsonev
Telerik team
Rana
Top achievements
Rank 1
Share this question
or