So I changed from using Material theme to AppCompat to support non Lollipop devices, and I encountered a couple of problems using the AppCompat toolbar.
First of all, the toolbar is not using the primary color:
<android.support.v7.widget.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:background="?attr/colorPrimary"/>
Primary color is set to:
<style name="AppTheme" parent="Theme.Base"/>
<style name="Theme.Base" parent="Theme.AppCompat.Light">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<item name="android:colorAccent">#color/accent</item>
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
I am using this theme for my activity:
<activity
android:name=".MainActivity"
android:theme="#style/AppTheme"
</activity>
I am adding the toolbar to the Activity like this:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
The Activity is extending ActionBarActivity
Also I noticed all the content is shifted up a bit when using the AppCompat library. Is this intentional? The menu button is displaying black, even though I chose the light theme. And the toolbar is not showing any shadow below itself, like a vanilla material one would. How can I fix those errors?
1.create theme
<style name="AppBaseTheme" parent="Theme.AppCompat.Light"></style>
<style name="AppTheme2" parent="AppTheme.Base">
<item name="colorPrimary">#color/ColorPrimary</item>
<item name="colorPrimaryDark">#color/ColorPrimaryDark</item>
</style>
2.set it to activity
<activity
android:name="OtherApp"
android:theme="#style/AppTheme2" >
</activity>
create toolbar
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/ColorPrimary"
android:theme="#style/ThemeOverlay.AppCompat.Dark"
android:elevation="4dp">
</android.support.v7.widget.Toolbar>
and finally
toolbar = (Toolbar) findViewById(R.id.tool_bar);
setSupportActionBar(toolbar);
here is my result
While using appcompact library you should not use like this android:colorPrimary, it should be colorPrimary
It seems you have problem in your style
<style name="AppTheme" parent="Theme.Base"/>
<style name="Theme.Base" parent="Theme.AppCompat.Light">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<item name="android:colorAccent">#color/accent</item>
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
Change it to
<style name="AppTheme" parent="Theme.Base"/>
<style name="Theme.Base" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Related
Currently I am using material components and material theme:
<style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
...
...
<item name="materialButtonStyle">#style/Button</item>
</style>
I was able to define a style for every button using materialButtonStyle and I was wondering if it is possible to achieve the same for a toolbar.
THIS IS REALLY IMPORTANT: The idea is to avoid defining a style / theme in the appbar or toolbar component, but just use it a get the styles defined by the app theme.
I want to avoid this:
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:theme="#style/ToolbarTheme">
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:titleTextAppearance="#style/ToolbarTextAppearance"
tools:title="Title" />
</com.google.android.material.appbar.AppBarLayout>
Inside the theme I want to be able to specify the font style and the text appearance.
These are my style:
<style name="ToolbarTheme" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">
</style>
<style name="ToolbarTextAppearance" parent="TextAppearance.AppCompat.Title">
<item name="android:fontFamily">#font/nunito_bold</item>
</style>
Using the code defined previously, I am able to get those changes. But as I mentioned, I want to defined that as part of my app theme like the material button.
I tried using this but I did not succeed:
<style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
...
<item name="appBarLayoutStyle">#style/ToolbarTheme</item>
<item name="toolbarStyle">#style/ToolbarTheme</item>
</style>
This code works for me just fine:
<resources>
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<item name="appBarLayoutStyle">#style/AppTheme.AppBarOverlay</item>
<item name="toolbarStyle">#style/AppTheme.Toolbar</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar">
<item name="android:background">?colorPrimary</item>
</style>
<style name="AppTheme.Toolbar" parent="Widget.MaterialComponents.Toolbar">
<item name="titleTextAppearance">#style/TextAppearance.MaterialComponents.Body1</item>
</style>
</resources>
You can add in your app theme the toolbarStyle attribute:
<style name="BaseTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<item name="toolbarStyle">#style/MyToolbar</item>
</style>
Then define your custom style:
<style name="MyToolbar" parent="#style/Widget.MaterialComponents.Toolbar">
<item name="titleTextAppearance">#style/MyToolbartitleTextAppearance</item>
</style>
<style name="MyToolbartitleTextAppearance" parent="#style/TextAppearance.MaterialComponents.Headline6">
...
<item name="fontFamily">....</item>
<item name="android:fontFamily">....</item>
</style>
In your layout use the com.google.android.material.appbar.MaterialToolbar.
To define globally a style for the AppBarLayout use in your app theme the attribute (in your case is not clear what you want to customize).
<item name="appBarLayoutStyle">#style/...</item>
In Styles file add this:
<style name="MyToolbarStyle" parent="#android:style/TextAppearance.Medium">
<item name="android:textColor">?attr/color_text_primary</item>
<item name="android:textSize">20sp</item>
<item name="android:fontFamily">sans-serif-smallcaps</item>
</style>
Then in your MainActivity class:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
toolbar.setTitleTextAppearance(this, R.style.MyToolbarStyle);
In my activity, I use default ActionBar
<style name="AppTheme" parent="Theme.AppCompat"> and getSupportActionBar()
How can I custom the style of this ActionBar?
Change ActionBar color and title color
Align title to center
Add more top padding to ActionBar
For the color, I tried these two style, but it also change color of whole Activity, I just want to change ActionBar
<item name="colorPrimary"></item>
<item name="android:textColorPrimary"></item>
I alo tried actionBarStyle, but it is not working
<style name="AppTheme" parent="Theme.AppCompat">
<item name="colorPrimary">#color/darkgray</item>
<item name="colorPrimaryDark">#color/black</item>
<item name="colorAccent">#color/gold</item>
<item name="android:textColorPrimary">#color/gold</item>
<item name="android:textColorSecondary">#color/darkgray</item>
<item name="android:windowBackground">#color/black</item>
<item name="android:colorBackground">#color/black</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#color/gray</item>
<item name="android:textColor">#color/black</item>
</style>
I suggest you to include the Toolbar in your layout and use the Theme.AppCompat.NoActionBar theme for your Activity :
Layout :
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#color/yourColor">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#color/yourColor"
android:text="yourTitle" />
</android.support.v7.widget.Toolbar>
Manifest :
<activity
android:name="yourActivity"
android:theme="#style/Theme.AppCompat.NoActionBar" />
I'm trying to change the background color of my ActionBar as well as the title color. I must say I am using the support library.
My styles are as follows.
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
</style>
<style name="AppTheme.ActionBar" parent="#style/Widget.AppCompat.ActionBar.Solid">
<item name="background">#color/red_300</item>
<item name="android:background">#color/red_300</item>
<item name="colorPrimary">#color/red_300</item>
<item name="android:titleTextStyle">#style/AppTheme.ActionBar.Title</item>
</style>
<style name="AppTheme.ActionBar.Title" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/red_700</item>
<item name="android:textColorPrimary">#00FF00</item>
</style>
And in styles-v21
<style name="AppTheme.ActionBar" parent="#style/Widget.AppCompat.ActionBar.Solid">
<item name="background">#color/red_300</item>
<item name="android:background">#color/red_300</item>
<item name="colorPrimary">#color/red_300</item>
<item name="android:colorPrimary">#FF0000</item>
<item name="android:colorAccent">#FF0000</item>
<item name="android:titleTextStyle">#style/AppTheme.ActionBar.Title</item>
</style>
<style name="AppTheme.ActionBar.Title" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:colorPrimary">#FFFF00</item>
<item name="android:colorAccent">#FFFF00</item>
<item name="android:textColor">#color/red_700</item>
<item name="android:textColorPrimary">#00FF00</item>
</style>
As you guys might see by the amount of attemps to change it, I am already losing my mind. Any clues as to how I can change the ActionBar background and it's title color?
I must note that I am trying this on Android 6.
In the ToolBar creation (xml), setting the app:theme fixed it. Specifying a theme there with it's colorPrimary changed the background of the ActionBar without affecting the base theme.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<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/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
and the theme:
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
</style>
In Lollipop version, my Toolbar Text color is WHITE, but when i run my app on pre-lollipop devices then showing BLACK instead of WHITE color ...
styles.xml:-
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/ColorPrimary</item>
<item name="colorPrimaryDark">#color/ColorPrimaryDark</item>
</style>
toolbar:
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/ColorPrimary"
android:elevation="2dp"
android:theme="#style/Base.ThemeOverlay.AppCompat.Dark"
xmlns:android="http://schemas.android.com/apk/res/android" />
Use the following
toolbarView.setTitleTextColor (toolbarTextColor);
You can change your Theme Theme.AppCompat.Light.NoActionBar to Theme.AppCompat.NoActionBar
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorPrimary">#color/primary</item>
<item name="colorControlNormal">#color/primary_light</item>
<item name="colorControlActivated">#color/primary</item>
<item name="colorControlHighlight">#color/primary_dark</item>
</style>
or
add the item in your AppTheme
<item name="actionMenuTextColor">#android:color/white</item>
You can customize the title textColor of the Toolbar via android:textColorPrimary.
Example
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
...
<!-- Used for the title -->
<item name="android:textColorPrimary">#ffeb3b</item>
<!-- Used for the menu and back-arrow - can be overriden by colorControlNormal -->
<item name="android:textColorSecondary">#03a9f4</item>
</style>
Toolbar ActionMode seems to ignore my style on devices pre Lollipop.
Here is my style:
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="windowActionModeOverlay">true</item>
<item name="android:textColorPrimary">#DD000000</item>
<item name="android:textColorSecondary">#8A000000</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 -->
<!-- Set AppCompat’s color theming attrs -->
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/secondary</item>
<item name="colorAccent">#color/accent</item>
<item name="android:actionModeStyle">#style/Widget.ActionMode</item>
<item name="android:actionModeBackground">#drawable/toolbar_action_background</item>
<item name="android:actionModeCloseDrawable">#drawable/ic_arrow_back_white_24dp</item>
</style>
<style name="Widget.ActionMode" parent="#style/Widget.AppCompat.ActionMode">
<item name="android:background">#drawable/toolbar_action_background</item>
<item name="android:titleTextStyle">#style/TitleTextStyle</item>
</style>
<style name="TitleTextStyle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#fff</item>
</style>
And my toolbar xml
<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:elevation="4dp"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
android:background="?attr/colorPrimary" />
I've checked these questions:
How to specify dark action mode with my theme
Toolbar and Contextual ActionBar with AppCompat-v7
Unable to style action mode when using Toolbar
Expected behaviour, works fine on lollipop:
How it looks on kitkat:
Solved by specifying booth android namspace and without in my theme:
...
<item name="actionModeStyle">#style/ActionMode</item>
<item name="android:actionModeStyle">#style/ActionMode</item>
...
<style name="ActionMode" parent="Widget.AppCompat.ActionMode">
<item name="android:background">#drawable/toolbar_action_background</item>
<item name="background">#drawable/toolbar_action_background</item>
</style>
Look at your Toolbar's theme:
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
The first style, you didn't give a name. You missed some lines. Then, let's suppose the style which has no name, its name is ToolbarStyle which has a line of <item name="colorPrimary">#color/primary</item> which does matter. Then at your Toolbar layout, replace your app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" by app:theme="#style/ToolbarStyle". Then <item name="colorPrimary">#color/primary</item> will color your Toolbar's background. Are we clear now?