jay_t55
jay_t55

Reputation: 11652

How do I change the Background Color of a Lollipop Toolbar?

How do I change the background color of the Android Lollipop Toolbar in Xamarin Studio?

I've tried many different things with no luck, but here's what I've currently got, and it just doesn't work. Pay close attention to the images. For some reason, the bottom of the toolbar is colored (where the dropshadow should be) but not the background of the actual toolbar:

enter image description here

After adding all the styles and everything, in the Visual Designer, all I see is this (no color background):

enter image description here

My code:

styles.xml (located directly under resources folder):

<?xml version="1.0" encoding="UTF-8" ?>
 <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        app:theme="@style/ActionBarThemeOverlay"
        ndroid:background="?attr/colorPrimaryDark" />

Main.axml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:minWidth="25px"
    android:minHeight="25px"
    android:background="#ffffffff">
    <Toolbar
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/toolbar"
        android:theme="@android:style/Theme.Material.Light" />
</LinearLayout>

Main.xml (Resources > menu > Main.xml):

<?xml version="1.0" encoding="UTF-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto">
        <item android:icon="@android:drawable/ic_menu_share" android:id="@+id/menu_share" android:title="Share" android:showAsAction="ifRoom" />
</menu>

Anyone know how I can change the background color of the Toolbar?


UPDATE:


Main.axml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:minWidth="25px"
    android:minHeight="25px"
    android:background="#ffffff">
<android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_height="?actionBarSize"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:background="?attr/colorPrimary" />
</LinearLayout>

color.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
   <!-- Color : Classic colors -->
   <color name="white">#FFFFFF</color>
   <color name="black">#000000</color>
</resources>

styles.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<resources>
  <style name="AppTheme" parent="AppTheme.Base"/>
  <style name="AppTheme.Base" parent="Theme.AppCompat">
    <!-- Value : Color -->
    <item name="colorPrimary">@color/black</item>
    <item name="colorAccent">@color/black</item>
  </style>
</resources>

Manifest:

<?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="ToolbarSample.ToolbarSample">
    <uses-sdk />
    <application android:label="ToolbarSample" android:theme="@style/AppTheme"></application>
</manifest>

Upvotes: 1

Views: 2331

Answers (1)

LeMimit
LeMimit

Reputation: 6924

The toolbar is like a view, so you can change his backgroundColor like this in Main.xml:

<android.support.v7.widget.Toolbar 
    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_height="?actionBarSize"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:background="@color/black" />

You have to define this color in file color.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <!-- Color : Classic colors -->
   <color name="white">#FFFFFF</color>
   <color name="black">#000000</color>
</resources>

If you really want to use android:colorPrimary. You can create your own theme in your file styles.xml :

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <style name="AppTheme" parent="AppTheme.Base"/>
  <style name="AppTheme.Base" parent="Theme.AppCompat">
    <!-- Value : Color -->
    <item name="colorPrimary">@color/black</item>
    <item name="colorAccent">@color/black</item>
  </style>
</resources>

And use android:background="?attr/colorPrimary" instead.

By the way, to use this theme in all your activities, you have to declare him in your AndroidManifest.xml by adding android:theme :

<application
  android:label="@string/app_name"
  android:theme="@style/AppTheme" >

Hoping this explanation is clear.

Have a nice day !

Upvotes: 2

Related Questions