Search code examples
androidxamarin.formsxamarin.androidandroid-toolbar

Full width ActionBar using Google Material Design


I've pretty much exhausted all efforts trying to find a solution to my problem. I need to somehow expand the ActionBar area of my android theme. Below is a screenshot of my current ToolBar items which I would like to expand to be full width. enter image description here

In a Xamarin.Forms ContentPage I set my toolbar items as below.

this.ToolbarItems.Add(new ToolbarItem() { Icon = "iconhome.png", Priority = 0, Order = ToolbarItemOrder.Primary });
this.ToolbarItems.Add(new ToolbarItem() {   Icon = "iconpyxus.png", Priority = 0, Order = ToolbarItemOrder.Primary });
this.ToolbarItems.Add(new ToolbarItem() { Icon = "iconcareloop.png", Priority = 0, Order = ToolbarItemOrder.Primary });
this.ToolbarItems.Add(new ToolbarItem() {  Icon = "iconnotificationbell.png", Priority = 0, Order = ToolbarItemOrder.Primary });

I don't believe there are any issues there, next I set the toolbar in my main activity

ToolbarResource = Resource.Layout.Toolbar;

Below is the code for the Toolbar layout file.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:background="@drawable/ab_gradient"
    app:contentInsetEnd="80dp"
    app:contentInsetStart="80dp"
    app:contentInsetStartWithNavigation="80dp" />

Then finally, my styles.xml is below..

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

  <style name="MainTheme" parent="MainTheme.Base">
  </style>
  <!-- Base theme applied no matter what API -->
  <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
    <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
    <item name="windowNoTitle">true</item>
    <!--We will be using the toolbar so no need to show ActionBar-->
    <item name="windowActionBar">false</item>
    <item name="android:actionBarSize">200dp</item>
    
    <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">#2196F3</item>
    <!-- colorPrimaryDark is used for the status bar -->
    <item name="colorPrimaryDark">#1976D2</item>
    <!-- colorAccent is used as the default value for colorControlActivated
         which is used to tint widgets -->
    <item name="colorAccent">#FF4081</item>
    <!-- You can also set colorControlNormal, colorControlActivated
         colorControlHighlight and colorSwitchThumbNormal. -->
    <item name="windowActionModeOverlay">true</item>
    <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
    
    <item name="android:textAllCaps">false</item>

    <!--NAV BAR SHADOW-->
    <item name="android:elevation">4dp</item>
    <item name="android:windowContentOverlay">@drawable/actionbar_shadow</item>
    <!--NAV BAR HEIGHT-->
    <item name="android:actionBarSize">40dp</item>
  </style>

  <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
    <item name="colorAccent">#FF4081</item>
  </style>
</resources>

Theme in androidmanifest.xml is below

@style/Theme.AppCompat.Light.NoActionBar

Please if you know how I can make these icons stretch all the way to the left end I really need help with this


Solution

  • So after speaking to a few people in the XF community i've discovered that this can be done w/ custom renderers although it is very difficult OR I can just create a ContentView to mimic a toolbar the way I want it, and add it to every page, then disable the nav bar.