30 days with Xamarin Forms

Tabs have different names depending on the platform but have been probably the most popular navigation control on desktop applications, web applications and continue to be so in mobile apps. Historically on Android devices, tabs have been placed at the top of the page. But starting with version 25 of the Android Design Support Library, tabs can be placed at the bottom of the page but they are officially called Bottom Navigation Bar. On iOS, tabs have always been placed at the bottom and nothing has changed since.

At the time of this writing, Xamarin Forms do not provide such feature out-of-the-box. So on day 1 in this “30 days wih Xamarin Forms” series, I will show how to build an app with tabs that are placed at the bottom of the page. The goal for this day 1 is to develop an app that has navigation tabs at the bottom of the page on both iOS and Android devices.

Figure 1: Tabs at bottom on iOS and Android

Since this is day 1, we will start from scratch. But if you have already written an app, somehow find this article and now want to modify your app so that it will have tabs at the bottom, I will also show how to do at the end of this post.

So let’s start from scratch. Create a new Project in either Xamarin Studio or Visual Studio for Mac. Just make sure it targets both iOS and Android, uses Portable Class Library and uses XAML for UI. I name my app DayOneXF but you can choose a better name.

On iOS, there is no extra package to be added.

On Android, first expand the DayOneXF.Droid project and then expand the Packages folder node. Right click on the Xamarin.Android.Support.v7.AppCompat file node and note the version number. In my case it’s 23.3.0.

Image for post
Image for post
Figure 2

Instead of Xamarin.Android.Support.v7.AppCompat, you can pick another package, say Xamarin.Android.Support.v7.RecyclerView or Xamarin.Android.Support.Vector.Drawable, and the version on all of them would be the same (23.3.0). So it doesn’t matter which package, I just happen to choose Xamarin.Android.Support.v7.AppCompat.

The important thing to remember is to Never click on the Update menu item in that popup menu. More on this later.

Now right click on the Packages folder node and select Add Packages. Type BottomNavigationBar to search for all packages with that name. You will see something like in the following screenshot:

Image for post
Image for post
Figure 3

The latest version which is also the default (selected) is shown in the box. In my case that’s 1.4.0.3. But notice the dependencies on Xamarin.Android.Support.v7.AppCompat which is ≥ 24.2.1. If this is greater than than the version that you noted earlier, you can’t simply just add it. In my case, that’s true.

So just find the version that’s compatible with your Xamarin.Android.Support.v7.AppCompat package. Pick a lower version, but the dependencies might not get auto refreshed. So you might have to close and re-open the Add Packages dialog box again. In my case, I eventually find the version of BottomNavigationBar that satisfies the dependencies requirements.

Image for post
Image for post
Figure 4

From the screenshot, BottomNavigationBar version 1.1.2 requires package Xamarin.Android.Support.v7.AppCompat version 23.3.0 which is what I have. Check the box and the select the Add Package button.

You should see a message BottomNavigationBar successfully added (in black). If you see an error message (in red), then that means there’s a problem with mismatch dependencies.

Go ahead and build all. You should see no error in the build.

If you look in the Solution Explorer, there are 3projects in the solution: DayOneXF, DayOneXF.Droid and DayOneXF.iOS. The common code goes inside the DayOneXF while Android and iOS specific code go inside the DayOneXF.Droid and DayOneXF.iOS respectively. Not too surprising here.

Right click on the DayOneXF folder node, select Add, New File, Forms ContentPage Xaml and give it a name MainPage (no extension needed). Repeat with ProfilePage and SettingsPage. You will now see 6 files generated: MainPage.xaml, MainPage.xaml.cs, ProfilePage.xaml, ProfilePage.xaml.cs, SettingsPage.xaml, SettingsPage.xaml.cs.

Let’s edit these files by copying the following:

https://raw.githubusercontent.com/khle/DayOneXF/master/DayOneXF/MainPage.xaml

https://raw.githubusercontent.com/khle/DayOneXF/master/DayOneXF/MainPage.xaml.cs

https://raw.githubusercontent.com/khle/DayOneXF/master/DayOneXF/ProfilePage.xaml

https://raw.githubusercontent.com/khle/DayOneXF/master/DayOneXF/SettingsPage.xaml

Then slightly change the content in the App.xaml.cs file by changing one line

MainPage = new NavigationPage(new MainPage());

or if your prefer copy-and-paste the entire file:

https://raw.githubusercontent.com/khle/DayOneXF/master/DayOneXF/App.xaml.cs

Right click on iOS project (in my case DayOneXF.iOS)and select it Set as Startup Project. Go ahead and run it in the Simulator. If this is your first time, you can use the screenshot below for reference:

Image for post
Image for post
Figure 5

You should see something like in Figure 1, except there’s no icon images in the tabs. That’s because we have not added any images. We will add images on day 2.

Now to run on Android, forget about running it in the emulator (virtual device). They’re extremely slow. You’re better off running in a real device. So plug an Android phone to your laptop or computer USB port.

Image for post
Image for post
Figure 6

On Android, in addition to no icon images in the tabs, you will see the tabs at the top of the page.

Image for post
Image for post
Figure 7

If tabs at the top are OK for you, then you’re done and we will add images on day 2. If you want tabs at the bottom of the page as shown in Figure 1, then continue on.

Right click on the Droid project and add a new folder called Renderers. Now right click on that new folder and add a new file, select General, Empty Class. Name the file MainPageRenderer.cs.

Add the following content to this file MainPageRenderer.cs:

https://raw.githubusercontent.com/khle/DayOneXF/master/Droid/Renderers/MainPageRenderer.cs

Run the Android project again. You will see the tabs on the bottom as shown in Figure 1 (minus icon images).

We will add icon images on day 2. For now the source code is on this github repo.

Tabs at bottom on Android for existing projects

If you already have a project with or without tabs, and you found this article and now want tabs to show at the bottom on Android, you don’t have to follow all the step by step above. All you have to do is adding a BottomNavigationBar package and a renderer MainPageRenderer.cs on Android project.

MainPageRenderer.cs renderer is easy because you can add something like the following:

https://raw.githubusercontent.com/khle/DayOneXF/master/Droid/Renderers/MainPageRenderer.cs

Adding BottomNavigationBar package is easy too, but you have to be careful with the following 3 things:

  1. Make sure you first find out the correct version of the Xamarin.Android.Support.v7.xxx packages in your Android project. Refer to Figure 2.
  2. Then when you add BottomNavigationBar package, find the version that’s compatible with the version of Xamarin.Android.Support.v7.xxx packages.
  3. If you want to update Xamarin.Android.Support.v7.xxx packages, never right click on any one of them and select Update from the menu. If you do so, your Android project will no longer build. Even if you try to restore from git, it still won’t build. So how can one update? The right way to do is to right click on the Xamarin.Forms package and select Update from the menu.
Image for post
Image for post

Written by

Driven by passion and patience. Read my shorter posts https://dev.to/codeprototype (possibly duplicated from here but not always)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store