I previously talked about adding a BottomNavigationView
to your native Android apps using Java (Android.Basics – Adding a Bottom Navigation View), but I couldn’t leave my Xamarin buddies out! Consider this phase 1 in moving your tabs to the bottom of your Xamarin apps! In this post, we’ll look at a basic implementation of the new Material Design BottomNavigationView
in Xamarin.Android, and in a later post, we’ll implement it in Xamarin.Forms with a custom TabbedRenderer
.
Resources
Create a Menu Resource
The BottomNavigationView
uses a menu
to create the items in the navigation view, so you’ll need to create an xml resource under Resource/menu
.
bottom_bar_menu.xml
<menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/all_puppies" android:title="@string/action_all" android:icon="@drawable/ic_home_white_24dp" /> <item android:id="@+id/big_puppies" android:title="@string/action_big" android:icon="@drawable/ic_dog_white_24dp" /> <item android:id="@+id/small_puppies" android:title="@string/action_small" android:icon="@drawable/ic_small_dog_white_24dp" /> <item android:id="@+id/trained_puppies" android:title="@string/action_trained" android:icon="@drawable/ic_trained_white_24dp" /> <item android:id="@+id/active_puppies" android:title="@string/action_active" android:icon="@drawable/ic_active_white_24dp" /> </menu>
Note that the images I use are from my previous post, and are included in the source code in GitHub linked above.
Update the Layout
Add an android.support.design.widget.BottomNavigationView
to your layout, or you can now add it easily in Visual Studio (for Mac) in the design view by selecting it on the right.
main.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/textView" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="All" android:textAlignment="center" android:gravity="center" /> <android.support.design.widget.BottomNavigationView android:id="@+id/bottomNavigationView" android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="56dp" android:layout_alignParentBottom="true" android:background="@android:color/white" app:elevation="6dp" app:menu="@menu/bottom_bar_menu" /> </RelativeLayout>
or….
Just make sure you properly set the layout_width
and layout_height
to meet the standards and also add elevation
to give it the shadow and solid background.
Add Listeners
Xamarin did a great job of wrapping the Java listener with C# events so we can add the event handlers we know and love to handle changes when an item is selected in the BottomNavigationView
.
MainActivity.cs
public class MainActivity : Activity { protected override void OnCreate(Bundle savedInstanceState) { base.OnCreate(savedInstanceState); // Set our view from the "main" layout resource SetContentView(Resource.Layout.Main); var textView = FindViewById<TextView>(Resource.Id.textView); var bottomBar = FindViewById<BottomNavigationView>(Resource.Id.bottomNavigationView); textView.Text = "All"; bottomBar.NavigationItemSelected += (s,a) => { textView.Text = a.Item.TitleFormatted.ToString(); }; } }
Things to Remember
Remember that this is part of the AppCompat packages from Google, and is only in version 25+ of the Android Support Design Library. You can install the nuget package for it here: https://www.nuget.org/packages/Xamarin.Android.Support.Design/25.4.0-rc1
Because of this, you also need to set the theme of your Activity to something that is a sub-theme of Theme.AppCompat
.
Results
Check it out!
If you like what you see, don’t forget to follow me on twitter @Suave_Pirate, check out my GitHub, and subscribe to my blog to learn more mobile developer tips and tricks!
Interested in sponsoring developer content? Message @Suave_Pirate on twitter for details.
Hi, did you ever do a post about implementing this in Xamarin Forms using a customs renderer?
LikeLike
how can i hide the bottom navigation view when scrolling
LikeLike
There is a `Scroll` event on ScrollViews you can use, or use a recycler view listener
LikeLike