user11064240
user11064240

Reputation: 23

How can I display a toolbar with three dots in Xamarin?

I tried to add a toolbar in my Android App. So I am able to display a toolbar but there aren't those three dots which I want to display as well.

I followed this instruction (https://learn.microsoft.com/en-us/xamarin/android/user-interface/controls/tool-bar/replacing-the-action-bar) but it doesn't work for me.

So here you can see my code. I would really appreciate it if someone could help me.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<include
    android:id="@+id/toolbar"
    layout="@layout/toolbar" />

</LinearLayout>

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?android:attr/actionBarSize"
android:background="?android:attr/colorPrimary"
android:theme="@android:style/ThemeOverlay.Material.Dark.ActionBar"/>

top_menus.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
     android:id="@+id/menu_edit"
     android:icon="@mipmap/ic_action_content_create"
     android:showAsAction="ifRoom"
     android:title="Edit" />
<item
     android:id="@+id/menu_save"
     android:icon="@mipmap/ic_action_content_save"
     android:showAsAction="ifRoom"
     android:title="Save" />
<item
     android:id="@+id/menu_preferences"
     android:showAsAction="never"
     android:title="Preferences" />
</menu>

Properties/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" 
      android:versionCode="1" 
      android:versionName="1.0" 
      package="com.companyname.clock.app.main">
<uses-sdk android:minSdkVersion="21" android:targetSdkVersion="28" />
<application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/AppTheme">
</application>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
</manifest>

styles.xml

<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
   <item name="android:windowNoTitle">true</item>
   <item name="android:windowActionBar">false</item>
   <item name="android:colorPrimary">#5A8622</item>
</style>
</resources>

MainActivity.cs

[Activity(Label = "Demo", Theme = "@style/MyTheme", MainLauncher = true, Icon = "@drawable/CLogo")]

public class MainActivity : AppCompatActivity
{
    var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
    SetActionBar(toolbar);
    ActionBar.Title = "My Toolbar";

    public override bool OnCreateOptionsMenu(IMenu menu)
    {
       MenuInflater.Inflate(Resource.Menu.top_menus, menu);
       return base.OnCreateOptionsMenu(menu);
    }

     public override bool OnOptionsItemSelected(IMenuItem item)
     {
        Toast.MakeText(this, "Action selected: " + item.TitleFormatted,
        ToastLength.Short).Show();
        return base.OnOptionsItemSelected(item);
     }
}

It looks like this: Output

Upvotes: 1

Views: 1023

Answers (1)

Cherry Bu - MSFT
Cherry Bu - MSFT

Reputation: 10356

According to your description and article, you want to use include toolbar to replace the default toolbar, am I right? If yes, I suggest you can take a look the following steps.

1.Firstly, take a look the layout, include toolbar.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">

<include
    android:id="@+id/toolbar"
    layout="@layout/toolbar" />
</RelativeLayout>

2.Creating new custom theme in resources--values---styles.xml, to disable the windowActionBar attribute in the custom theme and enable the windowNoTitle attribute.

 <style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<item name="android:windowActionBar">false</item>
<item name="android:colorPrimary">#5A8622</item>

 </style>

3.Changing Mainactivity Theme and Androidmanifeast.xml theme

[Activity(Label = "@string/app_name", Theme = "@style/MyTheme", MainLauncher = true)]

<application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/MyTheme">

4.Create menu folder in Resources folder, and add top_menus.xml.

<?xml version="1.0" encoding="utf-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
 <item
   android:id="@+id/menu_edit"
   android:icon="@mipmap/ic_action_content_create"
   android:showAsAction="ifRoom"
   android:title="Edit" />
 <item
   android:id="@+id/menu_save"
   android:icon="@mipmap/ic_action_content_save"
   android:showAsAction="ifRoom"
   android:title="Save" />
 <item
   android:id="@+id/menu_preferences"
   android:showAsAction="never"
   android:title="Preferences" />
  </menu>

5. adding thie menu to attach toolbar.

 protected override void OnCreate(Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        // Set our view from the "main" layout resource
        SetContentView(Resource.Layout.activity_main);
        var toolbar = FindViewById<Toolbar>(Resource.Id.toolbar);
        SetActionBar(toolbar);
        ActionBar.Title = "My Toolbar";
    }
    public override bool OnCreateOptionsMenu(Android.Views.IMenu menu)
    {
        MenuInflater.Inflate(Resource.Menu.top_menus, menu);
        return base.OnCreateOptionsMenu(menu);
    }

Update:

I have created simple sample at githun, please download my sample to test, I can display toolbar successfully.

https://github.com/CherryBu/toolbar

Upvotes: 2

Related Questions