How do I style appcompat-v7 Toolbar like Theme.AppCompat.Light.DarkActionBar?
I'm trying to recreate the look of Theme.AppCompat.Light.DarkActionBar
with the new support library Toolbar.
If I choose Theme.AppCompat.Light
my toolbar will be light and if I choose Theme.AppCompat
it will be dark. (Technically you have to use the .NoActionBar
version but as far as I can tell the only difference is
<style name="Theme.AppCompat.NoActionBar">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
Now there's no Theme.AppCompat.Light.DarkActionBar
but naively I thought it'd be good enough to just make my own
<style name="Theme.AppCompat.Light.DarkActionBar.NoActionBar">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
However with this my toolbars are still Light
themed. I've spent hours now trying different combinations of mixing the Dark (base) theme and the Light theme but I just can't find a combination that will let me have light backgrounds on everything but the toolbars.
Is there a way of getting the AppCompat.Light.DarkActionBar
look with import android.support.v7.widget.Toolbar
's?
The recommended way to style the Toolbar for a Light.DarkActionBar
clone would be to use Theme.AppCompat.Light.DarkActionbar
as parent/app theme and add the following attributes to the style to hide the default ActionBar:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Then use the following as your Toolbar:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
For further modifications, you would create styles extending ThemeOverlay.AppCompat.Dark.ActionBar
and ThemeOverlay.AppCompat.Light
replacing the ones within AppBarLayout->android:theme
and Toolbar->app:popupTheme
. Also note that this will pick up your ?attr/colorPrimary
if you have set it in your main style so you might get a different background color.
You will find a good example of this is in the current project template with an Empty Activity
of Android Studio (1.4+).
Edit: After updating to appcompat-v7:22.1.1 and using AppCompatActivity
instead of ActionBarActivity
my styles.xml looks like:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
Note: This means I am using a Toolbar
provided by the framework (NOT included in an XML file).
This worked for me:
styles.xml file:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="theme">@style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
Update: A quote from Gabriele Mariotti's blog.
With the new Toolbar you can apply a style and a theme. They are different! The style is local to the Toolbar view, for example the background color. The app:theme is instead global to all ui elements inflated in the Toolbar, for example the color of the title and icons.