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