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.

This post contains all the code that’s been written in this YouTube video.

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

MainActivity.cs

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);
        }
    }
}

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

<?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>

<?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

<?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>

<?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

<?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>

<?xml version="1.0" encoding="utf-8" ?>

<item name="windowActionBar">false</item>

</style>

</resources>

AndroidManifest.xml

<?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>

<?xml version="1.0" encoding="utf-8"?>

<uses-sdk android:minSdkVersion="16" />

</manifest>

Tweet0

Share0

About the author

Matt Rešetár

Matt is an app developer with a knack for teaching others. Working as a Flutter freelancer and most importantly developer educator, he doesn't have a lot of free time 😅 Yet he still manages to squeeze in tough workouts 💪 and guitar 🎸

Flutter Custom & Staggered Page Transition Animation Tutorial

Flutter State Management Tutorial – Provider + ChangeNotifier, Bloc, MobX & More

Flutter Firebase & DDD Course [5] – Sign-In Form Logic

Hi, great videos – appreciate your efforts.
Been learning your Android programming for 2 days now.
I managed to get the calculator app to work yesterday.
Today I tried to add the Toolbar app to that project and I am having issues – obviously I don’t know enough.
3 errors:
Severity Code Description Project File Line Suppression State
Error 8: error: Error: No resource found that matches the given name (at ‘icon’ with value ‘@drawable/icon’). Calculator C:\Users\andre\source\repos\Calculator\Calculator\obj\Debug\android\manifest\AndroidManifest.xml

Error 7: error: Error: No resource found that matches the given name (at ‘theme’ with value ‘@style/AppTheme’). Calculator C:\Users\andre\source\repos\Calculator\Calculator\obj\Debug\android\manifest\AndroidManifest.xml

Error 7: error: Error: No resource found that matches the given name (at ‘icon’ with value ‘@drawable/icon’). Calculator C:\Users\andre\source\repos\Calculator\Calculator\obj\Debug\android\manifest\AndroidManifest.xml

let me know if you have time to review this.

I had a few questions –

1. using Android:widgets;
vs using Android.Support.V7.Widget;

2. had issues with TextView working since adding the new reference – same with FindViewById
changed it to: calculatorText = FindViewById(Resource.Id.calculator_text_view);

look forward to hearing from you.

regards,
Andrei

TOOLBAR – Quick Tutorial (Xamarin Android) (Code)