So I found a lot of posts with similar question and I managed to change drawer icon color by adding in toolbar styles this line <item name="colorControlNormal">#android:color/white</item> but for it to work I need to add this line to toolbar xml android:theme="#style/ToolbarStyle" but my style changes in the code and that toolbar would pick primary color after I changed theme I cannot use android:theme in the toolbars xml so I wonder if it's possible to set toolbar theme in styles?
I tried this but still no results
Theme which I setting programatically
<style name="mytheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:toolbarStyle">#style/ToolbarStyle</item>
</style>
Toolbar style which has to apply to toolbar when I'm changing theme to mytheme
<style name="ToolbarStyle" parent="mytheme">
<item name="colorPrimary">#color/white</item>
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="colorControlNormal">#android:color/white</item>
<item name="actionMenuTextColor">#android:color/white</item>
</style>
Toolbars xml
<android.support.v7.widget.Toolbar
android:id="#+id/my_week_toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"/>
So after playing with styles I figure out how to do that so instead of adding this line <item name="colorControlNormal">#android:color/white</item> to toolbar style I added it to mytheme style and it worked
Related
I am using MaterialComponents.DayNight theme in my app. In the day mode, toolbar text color is black. But when I switch to night mode toolbar text color is remain black, so it's not visible anymore.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
I want to change the toolbar text color into white in night mode. How can I do that?
Just use in your Layout (it works also with the androidx.appcompat.widget.Toolbar) the style:
<com.google.android.material.appbar.MaterialToolbar
style="#style/Widget.MaterialComponents.Toolbar.Primary"
Then define in the values-night/colors.xml the colorOnPrimary.
Then there are a lot of alternatives.
You can customize globally the style of the toolbar in the app theme with:
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
<item name="toolbarStyle">#style/MyToolbar</item>
</style>
with:
<style name="MyToolbar" parent="Widget.MaterialComponents.Toolbar.Primary">
<item name="titleTextColor">#color/.....</item>
</style>
and the define the color in the values/colors.xml and values-night/colors.xml.
Or just apply a style in the Toolbar
<com.google.android.material.appbar.MaterialToolbar
style="#style/MyToolbar"
or simply override the theme with:
<com.google.android.material.appbar.MaterialToolbar
android:theme="#style/MyThemeOverlay_Toolbar"
with:
<style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<item name="colorOnPrimary">#color/...</item>
</style>
Set your parent theme to parent="Theme.MaterialComponents.DayNight.DarkActionBar.Bridge"
By using this, you will keep your ActionBar's original theme with DarkActionBar attributes on top of the overal DayNight theme from MaterialComponents.
Add this entry to your theme:
<item name="android:itemTextAppearance">#style/PopupMenuTextAppearance</item>
After that, add the style accordingly to the styles.xml:
<style name="PopupMenuTextAppearance" parent="TextAppearance.AppCompat.Menu">
<item name="android:textColor">?attr/colorOnBackground</item>
</style>
?attr/colorOnBackground is available in the Material Components library. If you're not using that, you should be able to use ?android:attr/textColorPrimary instead.
in my opinion you should set the style on noActionbar and design new toolbar and customize it
I used these two lines of code inside the styles.xml file:
<item name="colorControlNormal">#android:color/white</item>
<item name="android:textColorPrimary">#android:color/white</item>
It changed the color on the toolbar text and the toolbar X icon to white.
The whole code looked like this:
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#00695c</item>
<item name="colorPrimaryVariant">#439889</item>
<item name="colorOnPrimary">#ffffff</item>
<item name="colorSecondary">#007769</item>
<item name="colorSecondaryVariant">#48a697</item>
<item name="colorOnSecondary">#ffffff</item>
<item name="colorControlNormal">#android:color/white</item>
<item name="android:textColorPrimary">#android:color/white</item>
</style>
</resources>
I've been struggling with this all day - I've been on Stack Overflow for hours trying various solutions to no avail.
The application I'm building uses the light material theme, yet the text on the toolbar refuses to change from anything but black. The toolbar itself colors perfectly.
styles.xml:
<resources>
<style name="AppTheme" parent="AppTheme.Base">
</style>
<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:colorPrimary">#color/primary</item>
<item name="android:colorPrimaryDark">#color/primary_dark</item>
<item name="android:colorAccent">#color/accent</item>
</style>
<style name="Toolbar" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:background">#color/primary</item>
<item name="android:textColor">#color/white</item>
<item name="android:titleTextColor">#color/white</item>
<item name="android:textColorPrimary">#color/white</item>
<item name="android:color">#color/white</item>
<item name="android:elevation">#dimen/toolbar_elevation</item>
</style>
</resources>
in the activity layout file:
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
style="#style/Toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:title="#string/app_name" />
Hoping someone can help solve this issue.
Add this to your Toolbar:
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
Or perhaps, Adding this:
ThemeOverlay.AppCompat.Dark.ActionBar instead of ThemeOverlay.AppCompat.Dark you forgot to add ActionBar at the end i guess.
And of course, If you have AppBarLayout, Try to add this line in your AppBarLayout too:
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
Texts will be white.
Otherwise, This answer will help:
Option 1) The quick and easy way (Toolbar only)
Since appcompat-v7-r23 you can use the following attributes directly
on your Toolbar or its style:
app:titleTextColor="#color/primary_text"
app:subtitleTextColor="#color/secondary_text"
I'm trying customize the ActionBar in my app. I want to change background color and text color.
My styles.xml is as below:
<resources>
<!-- Base application theme. -->
<style name="AppTheme.NoActionBar" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/AppTheme.ActionBar</item>
</style>
<style name="AppTheme.ActionBar" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:background">#color/actionbar_background</item>
<item name="android:titleTextStyle">#style/AppTheme.ActionBar.TitleTextStyle</item>
<!-- Support library compatibility -->
<item name="background">#color/actionbar_background</item>
<item name="titleTextStyle">#style/AppTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="AppTheme.ActionBar.TitleTextStyle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/actionbar_text_color</item>
</style>
</resources>
In my AndroidManifest.xml I added android:theme="#style/AppTheme.NoActionBar". In my activity I added the action bar with code
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/AppTheme.ActionBar" />
In result I have the action bar with correct color but incorrect text color.
What's wrong?
Note:
I'm using AppCompat, not Holo or other.
This is happening because your Toolbar's theme is set to light, hence the Android picks a dark (black) text colour.
You need to update it to following:
<style name="AppTheme.ActionBar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="titleTextColor">#FF0001</item>
<item name="subtitleTextColor">#FF0001</item>
<!-- your other theme attributes -->
</style>
Notes:
For Toolbar themes, use ThemeOverlay instead of Theme.AppCompat. Related - When should one use Theme.AppCompat vs ThemeOverlay.AppCompat?,
replace #FF0001 with any colour you like. This is the colour of your title text.
maybe you should remove
actionBarTabTextStyle
from AppTheme.NoActionBar
hope it will help...
Why don't you directly use
<item name="android:textColor">#color/blue</item>
inside your custom MyActionBar style defination.
Instead of app:theme i am using android:theme which works for me.
Give it a try.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/MyActionBar" /> <----------Here
You can change the ActionBar text and background color through java code
yourToolbar.setTitleTextColor(Color.WHITE);
yourToolbar.setBackgroundColor(Color.YOUR_COLOR);
I have a Toolbar inside an AppBarLayout.
Here is the XML of both views :
<android.support.design.widget.AppBarLayout
android:id="#+id/appbarlayout"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:theme="#style/App.ThemeOverlay.Toolbar">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent"/>
</android.support.design.widget.AppBarLayout>
With the theme :
<style name="App.ThemeOverlay.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar"/>
And the Theme applied to the Activity :
<style name="App.Theme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:windowBackground">#android:color/white</item>
</style>
Now, I want to apply a custom titleTextAppearance for the toolbar.
I know that I can use app:titleTextAppearance in my layout's XML but I want to configure it from the theme so that every Toolbar of my app will have the same style without setting the text appearance in every layout.
After a bit of digging in AppCompat source code, I found that Toolbar uses the toolbarStyle of the current theme as its default theme.
The default value of this style is Widget.AppCompat.ActionBar.
So my first guess is to override this style in my theme overlay, and change the titleTextAppearance in this new style :
<style name="App.ThemeOverlay.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="toolbarStyle">#style/App.Style.Toolbar</item>
</style>
<style name="App.Style.Toolbar" parent="Widget.AppCompat.ActionBar">
<item name="titleTextAppearance">#style/App.TextAppearance.Toolbar.Title</item>
</style>
<style name="App.TextAppearance.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textColor">#00FF00</item> (this is some green)
<item name="android:textAllCaps">true</item>
</style>
This actually overrides the titleTextAppearance of my toolbar but it's also breaking the navigation icon :
What is wrong with my configuration that breaks the navigation icon ?
For the record, I tried to remove the toolbarStyle of the theme overlay and used directly in the layout's XML of the toolbar style="#style/App.Style.Toolbar".
This correctly applies the title text appearance and it's not breaking the navigation icon, but this is not optimal as I would have to apply the style to every toolbar of my app, and that's what I'm trying to avoid from the beginning.
Thanks for the helps,
Pierre
Your default style should extend Widget.AppCompat.Toolbar, not Widget.AppCompat.ActionBar. After that it will work just fine.
I'm trying to styling my appcompat-v7 toolbar to have a different background color for my overflow menu.
I tried to use the themes for my app and styles for my toolbar, but I was not able to achieve it.
This is my toolbar:
<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:minHeight="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:layout_width="match_parent"
app:theme="#style/AppToolbarTheme"
android:layout_height="wrap_content">
Here is the style I created:
<style name="AppToolbarTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/cian</item>
</style>
My main theme is extending Theme.AppCompat.Light.
Does anybody knows how can I do that? If is not possible using the styles is there any other way to achieve it?
Add this to your toolbar element
app:popupTheme="#style/ThemeOverlay.YourPopup"
Then in your styles.xml define the popup menu style
<style name="ThemeOverlay.YourPopup" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">#color/mtrl_white_100</item>
<item name="android:textColor">#color/mtrl_light_blue_900</item>
</style>
<style name="ThemeOverlay.YourPopup" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">#color/mtrl_white_100</item>
<item name="android:textColorPrimary">#color/mtrl_light_blue_900</item>
</style>
Note that you need to use android:colorBackground and never android:background. The latter would be applied to everything that doesn't have a background (here the menu itself and each menu item), the former applies only to the popup menu.
Update: The same applies to textColorPrimary and textColor.
Popup menu item defines android:textColor="?android:textColorPrimary".
android:textColorPrimary is a theme attribute, it's defined on themes.
android:textColor is a style attribute, it's defined on widgets.
If we defined android:textColor in a theme, it would be applied to every widget that doesn't define its own android:textColor.
You do not use the android namespace when you are using AppCompat attributes. Modify your code as follows:
<style name="AppToolbarTheme" parent="Theme.AppCompat.NoActionBar">
<item name="textColorPrimary">#color/white</item>
<item name="textColorSecondary">#color/cian</item>
</style>
Add this to your toolbar in your activity.xml file:-
app:popupTheme="#style/ThemeOverlay.YourApp"
And then in your styles.xml add this:-
<style name="ThemeOverlay.YourApp" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">#android:color/darker_gray</item>
<item name="android:textColorPrimary">#color/TextColorPrimary</item>
</style>