TOOLBAR – Quick Tutorial (Xamarin Android) (Code)

Toolbar is a significant part of any Android UI. A user expects it to be there and be useful. While we’re not gonna discuss how to make it useful, you’re at least going to learn how to make it a part of your app’s UI in this tutorial.

You will learn how to create a simple plain toolbar using an AppCompat support library. Then you will find out how to create a toolbar menu.

 You can also check out this GitHub repository: https://github.com/ResoCoder/ToolbarXamarinAndroid

MainActivity.cs

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

using Android.App; using Android.OS; using Android.Support.V7.App; using Android.Support.V7.Widget; using Android.Views;   namespace XamarinTut {     [Activity(Label = "XamarinTut", MainLauncher = true, Icon = "@drawable/icon")]     public class MainActivity : AppCompatActivity     {         protected override void OnCreate(Bundle bundle)         {             base.OnCreate(bundle);               // Set our view from the "main" layout resource             SetContentView (Resource.Layout.Main);               var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);             SetSupportActionBar(toolbar);             SupportActionBar.Title = "Tutorial Toolbar";         }           public override bool OnCreateOptionsMenu(IMenu menu)         {             MenuInflater.Inflate(Resource.Menu.toolbar_menu, menu);             return base.OnCreateOptionsMenu(menu);         }           public override bool OnOptionsItemSelected(IMenuItem item)         {             string textToShow;               if (item.ItemId == Resource.Id.menu_info)                 textToShow = "Learn more about us on our website :)";             else                 textToShow = "Overfloooow";               Android.Widget.Toast.MakeText(this, item.TitleFormatted + ": " + textToShow,                 Android.Widget.ToastLength.Long).Show();               return base.OnOptionsItemSelected(item);         }     } }

Main.axml

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical">     <android.support.v7.widget.Toolbar       android:id="@+id/toolbar"       android:layout_width="match_parent"       android:layout_height="wrap_content"       android:minHeight="?attr/actionBarSize"       android:background="?attr/colorPrimary"       android:elevation="4dp"       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/> </LinearLayout>

toolbar_menu.axml

1 2 3 4 5 6 7 8 9 10 11 12 13

<?xml version="1.0" encoding="utf-8" ?> <menu xmlns:android="http://schemas.android.com/apk/res/android"       xmlns:app="http://schemas.android.com/apk/res-auto">   <item     android:id="@+id/menu_info"     android:icon="@drawable/ic_info_outline_white_24dp"     app:showAsAction="ifRoom"     android:title="Info"/>   <item     android:id="@+id/menu_overflow"     app:showAsAction="never"     android:title="Overflow"/> </menu>

styles.xml

1 2 3 4 5 6 7 8

<?xml version="1.0" encoding="utf-8" ?> <resources>   <style name="AppTheme" parent="Theme.AppCompat">     <item name="windowNoTitle">true</item>     <item name="windowActionBar">false</item>     <item name="colorPrimary">#4CAF50</item>   </style> </resources>

AndroidManifest.xml

1 2 3 4 5

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="XamarinTut.XamarinTut" android:versionCode="1" android:versionName="1.0">   <uses-sdk android:minSdkVersion="16" />   <application android:label="XamarinTut" android:theme="@style/AppTheme"></application> </manifest>