Create a bottom Navigation bar for xamarin.forms

DELPINSUSAIRAJDELPINSUSAIRAJ USMember ✭✭
edited December 2017 in Xamarin.Forms

how to create a bottom navigation control. using layout concept.
i need like following image

i have tried this code.


<Grid.ColumnDefinitions>





</Grid.ColumnDefinitions>

        <StackLayout BackgroundColor="Lime" x:Name="stckPersonal" Orientation="Vertical" Grid.Column="0" HorizontalOptions="Fill" VerticalOptions="End">
            <Image  Source="home.png"  WidthRequest="30" HeightRequest="30" />
            <Label  Text="Personal" TextColor="Black"  />
        </StackLayout>

        <StackLayout x:Name="stckMedical"  Orientation="Vertical" Grid.Column="1"  HorizontalOptions="Fill" VerticalOptions="End">
            <Image Source="cardholder.png" WidthRequest="30" HeightRequest="30"  />
            <Label HorizontalTextAlignment="Center" Text="Medical" TextColor="Black"  />
        </StackLayout>

        <StackLayout x:Name="stckLegal" Orientation="Vertical"  Grid.Column="2"  HorizontalOptions="Fill" VerticalOptions="End">
            <Image  Source="cardholderdetail.png"  WidthRequest="30" HeightRequest="30" />
            <Label HorizontalTextAlignment="Center" Text="Legal" TextColor="Black" />
        </StackLayout>

         <StackLayout BackgroundColor="Lime" x:Name="stckICE" Orientation="Vertical"  Grid.Column="3"  HorizontalOptions="Fill" VerticalOptions="End">
            <Image Source="refresh.png" WidthRequest="30" HeightRequest="30"  />
            <Label HorizontalTextAlignment="Center" Text="ICE" TextColor="Black"  />
        </StackLayout>

        <StackLayout x:Name="stckRecords" Orientation="Vertical" Grid.Column="4"  HorizontalOptions="Fill" VerticalOptions="End">
            <Image  Source="logout.png"  WidthRequest="30" HeightRequest="30" />
            <Label HorizontalTextAlignment="Center" Text="Records" TextColor="Black" />
        </StackLayout>

Answers

  • CharwakaCharwaka INMember ✭✭✭✭✭
    edited December 2017

    Hi @DELPINSUSAIRAJ

    You can use Native Page Also in Xamarin Forms
    First Create A Native Page Like This

    https://blog.xamarin.com/exploring-androids-bottom-navigation-view/

    and use that page in your Forms Project like this

    https://stackoverflow.com/questions/28688133/how-to-call-platform-specific-page-from-xamarin-forms

  • Eric.7936Eric.7936 USMember ✭✭

    I am using the dll file from this project instead https://github.com/thrive-now/BottomNavigationBarXF

    Just include Bottombar.XamarinForms.dll in the PCL project and use BottomBarPage instead of TabbedPage . Easy to implement and works well for me , another plus side is it felt snappier while changing tabs (better performance)

  • derrickagyemangderrickagyemang USMember ✭✭

    How did you implement the bottomnavigationbarXF @Eric.7936

  • sivabhavanisivabhavani USMember ✭✭

    Hi @DELPINSUSAIRAJ,derrickagyemang

    can you please follow the link..https://youtube.com/watch?v=Cp_2F621Az0

    it may help you...

  • NitishKumarSharmaNitishKumarSharma USMember ✭✭
    edited April 2018

    @derrickagyemang said:
    How did you implement the bottomnavigationbarXF @Eric.7936

    Its easy to implement. Create upto 5 pages. In the constructor of your app.xaml.cs, do this:

    BottomBarPage bottomBar = new BottomBarPage
    {
    FixedMode = false;
    }
     NavigationPage.SetHasNavigationBar(bottomBar, false);
    var tab1= new Page1();
    var tab2= new Page2();
    var tab3= new Page3();
    
    bottomBar .Children.Add(tab1);
    bottomBar .Children.Add(tab2);
    bottomBar .Children.Add(tab3);
    
    bottomBar.CurrentPage = bottomBar .Children[0];
    Application.Current.MainPage = new NavigationPage(bottomBar );
    

    Has anyone been able to implement using MvvmCross. I am not sure how this will work in MvvmCross style of navigation?

  • Endrit14Endrit14 Member ✭✭✭

    @NitishKumarSharma said:

    @derrickagyemang said:
    How did you implement the bottomnavigationbarXF @Eric.7936

    Its easy to implement. Create upto 5 pages. In the constructor of your app.xaml.cs, do this:

    BottomBarPage bottomBar = new BottomBarPage
    {
    FixedMode = false;
    }
     NavigationPage.SetHasNavigationBar(bottomBar, false);
    var tab1= new Page1();
    var tab2= new Page2();
    var tab3= new Page3();
    
    bottomBar .Children.Add(tab1);
    bottomBar .Children.Add(tab2);
    bottomBar .Children.Add(tab3);
                 
    bottomBar.CurrentPage = bottomBar .Children[0];
    Application.Current.MainPage = new NavigationPage(bottomBar );
    

    Has anyone been able to implement using MvvmCross. I am not sure how this will work in MvvmCross style of navigation?

    Should I use any Nutgets ??? because this code doesn't work

  • Endrit14Endrit14 Member ✭✭✭

    @Eric.7936 said:
    I am using the dll file from this project instead https://github.com/thrive-now/BottomNavigationBarXF

    Just include Bottombar.XamarinForms.dll in the PCL project and use BottomBarPage instead of TabbedPage . Easy to implement and works well for me , another plus side is it felt snappier while changing tabs (better performance)

    Hey Eric I am a begginer in Xamarin.Can you help me how to include that and to use bottomnavigations?

  • NitishKumarSharmaNitishKumarSharma USMember ✭✭

    @Endrit14 said:
    Should I use any Nutgets ??? because this code doesn't work

    Yes. its for BottomNavigationBarXF, url for which is mentioned in @Eric.7936 's reply. Install the package and then my code should help you do that.

  • Amar_BaitAmar_Bait DZMember ✭✭✭✭✭
    edited June 2018

    The next release of Xamarin.Forms (3.1) will include bottom tabs for Android. Just an information for future developers who may need this.

  • Endrit14Endrit14 Member ✭✭✭

    @nadjib said:
    The next release of Xamarin.Forms (3.1) will include bottom tabs for Android. Just an information for future developers who may need this.

    When it will be relased that version ?

  • Endrit14Endrit14 Member ✭✭✭

    @NitishKumarSharma said:

    @Endrit14 said:
    Should I use any Nutgets ??? because this code doesn't work

    Yes. its for BottomNavigationBarXF, url for which is mentioned in @Eric.7936 's reply. Install the package and then my code should help you do that.

    wich one is ??

  • NitishKumarSharmaNitishKumarSharma USMember ✭✭

    @Endrit14 I've worked with the second one which is ThriveGmbH one. Looks like third one is also from same dev.

  • Eric.7936Eric.7936 USMember ✭✭
    edited June 2018

    Hi sorry for the late reply , I'm using the ThriveGmbH bottombar v1.02 here .

    Just follow the code example from here https://github.com/thrive-now/BottomNavigationBarXF/tree/master/example , and it should be good to go .

    Make sure you install the package on both the native and pcl package . And then I believe this is needed i MainActivity

    `public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
    protected override void OnCreate (Bundle bundle)
    {
    TabLayoutResource = Resource.Layout.Tabbar;
    ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate (bundle);
    
            global::Xamarin.Forms.Forms.Init (this, bundle);
    
            LoadApplication (new App ());
        }
    }`
    

    where you will need to create the respective layout files (tabs.axml) to accommodate .

Sign In or Register to comment.