ActionBar + Bottombar[NativeScript with TypeScript]


#1

I am studying NativeScript for about 3 weeks so far and I have already completed the NativeScript Groceries tutorial and i am enjoying this framework so far.
I am now developing my new App for a school project.
I apologize in advance for any english errors you may find.
So i need to make a page like this:

For the bottombar on the bottom of the page, i found out that Nativescript has a UI component designed for it and so far i have the following code for it:


> <GridLayout rows="*, auto">
>     <StackLayout row="0" orientation="vertical">
>        <Label text="demo"></Label>
>     </StackLayout>
>     <BottomBar row="1" [items]="items" [hide]="hidden" [titleState]="titleState" (loaded)="tabLoaded($event)" (tabSelected)="tabSelected($event)" [inactiveColor]="inactiveColor" [accentColor]="accentColor" colored="true"></BottomBar>
> </GridLayout>

But it doesnt seem to work because as soon as i deploy my Application it shows “Android object null, undefined”.

For my top part of the Screen i am currently using a ActionBar but also not working because it fails to display the Back navigation button.
So far i have this:
This is my html file:

<ActionBar title="Test">
      <NavigationButton text="Go Back" android:horizontalAlignment="left" android.systemIcon="ic_arrow_back_black_24dp.png" (tap)="onNavBtnTap"></NavigationButton>
</ActionBar>

When i run this it only displays “Test” but not the Back Navigation Button
The onNavBtnTap function :

  onNavBtnTap() {
    // This code will be called only in Android.
    console.log("Navigation button tapped!");
  }

Another question i dont know is when to use GridLayout because by default it occupy’s the whole page and it makes me confused on what Layout to use and when.
I am having trouble building this page.
Another thing i don’t understand is that i can make specific code for ios and Android, by using the tag

 if(isAndroid) {
   //Do Android Code
  }
if(isIOS){
//do ios Code
}

But i dont know when to use this. Do i have to make a actionBar specific for Android and another for iOS? since its a UI component that has different behaviours depending on the operative system being used?

I would appreciate some help because im really new to NativeScript and im having all sorts of difficulties!

Thank you in advance!


#2

@NathanaelA @jen.looper Anyone?


#3

hi, these are 4 separate questions. Let’s tackle the first - you seem to be trying to make a tabbed layout. Why not use the Tab View: https://docs.nativescript.org/angular/code-samples/ui/tab-view. I see that BottomBar is its own separate plugin - for questions on that plugin, I think you need to contact its author https://www.npmjs.com/package/nativescript-bottombar

About the ActionBar - I believe that that button would only appear when there’s a place to actually navigate two. Does your app have two or more screens?

I think you need to experiment and study the layouts. There are several tutorials out there on this which you can find by googling.

on the last question, you may or may not need to use device-specific code, depending on your app’s needs. If something doesn’t exist on Android, but you want it for iOS, at that point you use device-specific code. Normally, you don’t need this strategy as the modules are cross-platform.


#4

Hi @jen.looper, sorry for the the late response but i left my company computer in the office.
Ok so a tabbed Layout is a good idea i agree, but i don’t really think that’s what i want to achieve with this.

About the bottom bar how do i really contact the author of the plugin?

Now the ActonBar, i do have now 6 screens on my Application and soon to be around 15 (the app will have 15 screens total)
As soon as i create the navigation Button do i need to redirect it to somewhere automatically for it to show ?

One more Thing, by default when i create a blank screen it shows the name of my application on top. How do i prevent this from happening?
Forget the initial screen i posted i thought i was posting the correct one but i wasn’t
The screen i want to display is this one:

So far i have this:

<StackLayout orientation="vertical" marginTop="10">
 <Label text="ActionBar"></Label>
</StackLayout>
<StackLayout orientation="vertical" width="380" height="500" backgroundColor="lightgray">
 <StackLayout marginTop="30" marginLeft="20" marginRight="20" backgroundColor="white">
   <Label text="Payment" marginLeft="10" height="25"></Label>
   <Label text="-€19.00" marginLeft="30" height="40" fontSize="24" color="black"></Label>
   <Label text="Date: 2 of April of 2017" marginLeft="10" height="20"></Label>
   <Button class=".view_details" text="View Details" (tap)="paymentDetails()"></Button>
 </StackLayout>
 <StackLayout marginTop="20" marginLeft="20" marginRight="20" backgroundColor="white">
   <Label text="Refund" marginLeft="10" height="25"></Label>
   <Label text="+€3.50" marginLeft="30" height="40" fontSize="24" color="black"></Label>
   <Label text="Date: 2 of April of 2017" marginLeft="10" height="20"></Label>
   <Button class=".view_details" text="View Details" (tap)="refundDetails()"></Button>
 </StackLayout>
 <StackLayout marginTop="20" marginLeft="20" marginRight="20" backgroundColor="white">
   <Label text="Bank Transaction" marginLeft="10" height="25"></Label>
   <Label text="+€10.00" marginLeft="30" height="40" fontSize="24" color="black"></Label>
   <Label text="Date: 1 of April of 2017" marginLeft="10" height="20"></Label>
   <Button class=".view_details" text="View Details" (tap)="bankTransactionDetails()"></Button>
 </StackLayout>
</StackLayout>
<StackLayout orienta

Which results in the following output:

For example you see those 3 labels in a row? i want to make it all a button, a button with those 3 labels, and if the user clicks on the button it executes the following code this.router.navigate(["/AnotherPage"]); As soon as i click on the button it redirects me to another page. But i don’t know how to create a button exactly like that with 3 labels displayed like on the picture.
I tried searching and searching and i dont find a way to put a navigattion button inside a button like its displayed on the initial picture! Do you have any idea regarding this one @jen.looper?

The bottombar is extremely improvised atm with 5 buttons to redirect me to the other pages as you can see.

Also do you have any idea how can i make those vertical lines of color in the “buttons”?

Sorry for the delayed response and thank you for the help so far!!
If you could help me getting pass this little difficulties would be of great help! Thank you


#5

One thing - this should be <ActionBar>. Dig through the docs on how to make this do what you want. Using that module will sort through many of your issues as listed, I think.