I'm implementing a dark theme in my playground Android app, and am struggling to get the action bar text color to be white.
Below is my style and colors. The background of the action bar follows colorPrimary, which is great. However, both colors (light and dark) are pretty dark colors, and would like the action bar text color to always be white. Since I am using the DayNight.NoActionBar as the parent right now, it is black for light and white for dark. I have a few different instances of the action bar so I would prefer not to have to change each individual one, but rather just define it in the style. How do I go about doing this?
styles.xml
<style name="DarkThemeApp" parent="#style/Theme.MaterialComponents.DayNight.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorError">#color/colorError</item>
<item name="android:textColor">?android:attr/textColorPrimary</item>
</style>
night\colors.xml
<resources>
<color name="colorPrimary">#3d85c6</color>
<color name="colorPrimaryDark">#002e72</color>
<color name="colorAccent">#e66f00</color>
<color name="colorYellow">#FFE800</color>
<color name="colorError">#E53935</color>
</resources>
values\colors.xml
<resources>
<color name="colorPrimary">#00348e</color>
<color name="colorPrimaryDark">#002e72</color>
<color name="colorAccent">#e66f00</color>
<color name="colorYellow">#FFE800</color>
<color name="colorError">#E53935</color>
</resources>
Using a material theme you have different options to customize the text color used in the Toolbar
Use the android:theme to override default values only for your Toolbar
<com.google.android.material.appbar.MaterialToolbar
android:theme="#style/MyThemeOverlay_Toolbar"
...>
and use:
<style name="MyThemeOverlay_Toolbar" parent="ThemeOverlay.MaterialComponents.Toolbar.Primary">
<!-- color used by the toolbar title -->
<item name="android:textColorPrimary">#color/secondaryColor</item>
<!-- color used by navigation icon and overflow icon -->
<item name="colorOnPrimary">#color/secondaryColor</item>
</style>
Set a style in your Toolbar
<com.google.android.material.appbar.MaterialToolbar
style="#style/MyToolbar"
.../>
And then use the materialThemeOverlay to override the default values (it requires the material components library version 1.1.0):
<!-- Toolbar -->
<style name="MyToolbar" parent="Widget.MaterialComponents.Toolbar">
<item name="materialThemeOverlay">#style/MyThemeOverlay_Toolbar</item>
</style>
<style name="MyThemeOverlay_Toolbar" parent="">
<item name="android:textColorPrimary">#color/secondaryColor</item>
<item name="colorOnPrimary">#color/secondaryColor</item>
</style>
First, add these three to your main style (you can name the styles whatever you want):
<item name="toolbarStyle">#style/ToolbarStyle</item>
<item name="actionOverflowButtonStyle">#style/ToolbarStyle.Overflow</item>
<item name="toolbarNavigationButtonStyle">#style/Toolbar.Button.Navigation.Tinted</item>
Then define those styles:
<style name="ToolbarStyle" parent="#style/Widget.AppCompat.Toolbar">
<!-- Makes the toolbar text whatever color you want for both light/dark-->
<item name="titleTextColor">#color/actionBarText</item>
<item name="android:background">?attr/colorPrimary</item>
</style>
<style name="ToolbarStyle.Overflow" parent="Widget.AppCompat.ActionButton.Overflow">
<!-- For toolbar menu -->
<item name="android:tint">#color/actionBarText</item>
</style>
<style name="Toolbar.Button.Navigation.Tinted" parent="Widget.AppCompat.Toolbar.Button.Navigation">
<!-- For the hamburger menu, back button, etc -->
<item name="tint">#color/actionBarText</item>
</style>
In new version of Android Studio, we have two files for theme colors. To change the dark theme, you should use this file:
Res > values > themes > themes.xml (night)
And for day version:
Res > values > themes > themes.xml
in your styles.xml use this code
<style name="DarkThemeApp" parent="Theme.AppCompat.DayNight.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBarStyle</item>
</style>
<style name="MyActionBarStyle" parent="Theme.AppCompat.DayNight.DarkActionBar">
<item name="android:titleTextStyle">#style/MyActionBarTitleTextStyle</item>
</style>
<style name="MyActionBarTitleTextStyle" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
</style>
I think the answer to this question might vary depending on what other components you use in your app. In my case the following was a working solution:
Define these three styles in styles.xml
<style name="ToolbarStyle" parent="#style/Widget.MaterialComponents.Toolbar">
<item name="titleTextColor">#android:color/white</item>
<item name="android:background">#color/primary</item>
</style>
<style name="ToolbarStyle.Overflow" parent="#style/Widget.AppCompat.ActionButton.Overflow">
<item name="android:tint">#android:color/white</item>
</style>
<style name="ToolbarStyle.DrawerIcon" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">#android:color/white</item>
</style>
and then set them in your theme(s):
<style name="DarkThemeApp" parent="#style/Theme.MaterialComponents.DayNight.NoActionBar">
<!-- color for stuff in action bar -->
<item name="toolbarStyle">#style/ToolbarStyle</item>
<item name="actionOverflowButtonStyle">#style/ToolbarStyle.Overflow</item>
<item name="drawerArrowStyle">#style/ToolbarStyle.DrawerIcon</item>
<!-- rest of your attributes go here ... -->
</style>
Related
I am trying to customize the look of Toolbar in my app.
Target
I would like to set the title color and the background color of the Toolbar.
I read about how Theme and Style works, so I was able to try some solutions.
I found out that title color is managed by app:titleTextColor property and the background color from the android:background attribute.
Premise
To know how to act it is necessary to know how the style of the widget that we need to modify is managed.
The base Toolbar style is defined in the Widget.MaterialComponents.Toolbar style as below.
<style name="Widget.MaterialComponents.Toolbar" parent="Widget.AppCompat.Toolbar">
<item name="titleTextAppearance">?attr/textAppearanceHeadline6</item>
<item name="titleTextColor">?android:attr/textColorPrimary</item>
<item name="subtitleTextAppearance">?attr/textAppearanceSubtitle1</item>
<item name="subtitleTextColor">?android:attr/textColorSecondary</item>
<!-- Overrides minimum height in landscape to avoid headline6 and subtitle1 height concerns. -->
<item name="android:minHeight">#dimen/mtrl_toolbar_default_height</item>
<item name="maxButtonHeight">#dimen/mtrl_toolbar_default_height</item>
</style>
Here the value of titleTextColor is set to ?android:attr/textColorPrimary.
So my first attempt was simply to add the ovverride of android:textColorPrimary attribute in my app theme.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item>
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/black</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
<item name="android:textColorPrimary">#color/white</item>
</style>
Result: This works.
To also set the background I decided to create a custom Toolbar style where to put the background definition, so I changed my theme as below.
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
...
<!-- Customize your theme here. -->
<item name="toolbarStyle">#style/MyToolbarStyle</item>
</style>
<style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
<item name="android:textColorPrimary">#color/white</item>
<item name="android:background">?attr/colorPrimary</item>
</style>
Result: This does not works. The android:background is applied but the android:textColorPrimary not.
Setting the value of titleTextColor directly inside MyToolbarStyle works.
<style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
<item name="titleTextColor">?attr/colorOnPrimary</item>
<item name="android:background">?attr/colorPrimary</item>
</style>
I also tried to set the toolbar theme where I override the Android attribute:textColorPrimary, as below.
<style name="Base_ToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
<item name="android:background">?attr/colorPrimary</item>
<item name="android:theme">#style/Base_ToolbarTheme</item>
</style>
<style name="Base_ToolbarTheme">
<item name="android:textColorPrimary">#color/white</item>
<item name="android:textColorSecondary">#color/white</item>
</style>
Result: This does not works too.
Now I am a bit confused from the outcome of my tests.
Why is it not possible to override the android:textColorPrimary in the custom style?
To apply a style you can use (and the toolbarStyle attribute applies this style to all the Toolbar) the style attribute:
<androidx.appcompat.widget.Toolbar
style="#style/MyToolbarStyle"
with:
<style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
<item name="titleTextColor">?attr/colorOnPrimary</item>
<item name="android:background">?attr/colorPrimary</item>
</style>
because titleTextColor is a property defined in the Toolbar.
To apply a theme overlay you can use the android:theme attribute:
<androidx.appcompat.widget.Toolbar
android:theme="#style/MyToolbarThemeOverlay"
with
<style name="MyToolbarThemeOverlay">
<item name="android:textColorPrimary">#color/white</item>
</style>
because android:textColorPrimary is an attribute defined at theme level.
If you want to override a theme attribute directly in a style you have to use the materialThemeOverlay attribute:
<style name="MyToolbarStyle" parent="Widget.MaterialComponents.Toolbar">
<item name="android:background">?attr/colorPrimary</item>
<item name="materialThemeOverlay">#style/MyToolbarThemeOverlay</item>
</style>
With using the AppCompat Material Toolbar androidx.appcompat.widget.Toolbar, I have made the following definitions to customize the Toolbar in a theme
Given this toolbar in a layout file:
<com.google.android.material.appbar.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/MyAppTheme.AppBarOverlay">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
app:popupTheme="#style/MyAppTheme.PopupOverlay" />
</com.google.android.material.appbar.AppBarLayout>
Define a toolbar style in themes.xml:
<style name="MyAppTheme.Toolbar" parent="Widget.MaterialComponents.Toolbar">
<!-- Add custom stuff here -->
<item name="android:background" tools:targetApi="l">#color/dark_primary</item>
<item name="background">#color/dark_primary</item>
</style>
And also add the overlay styles in themes.xml:
<style name="MyAppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
<style name="MyAppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
And then apply in app theme:
<style name="MyAppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
...
<item name="android:toolbarStyle" tools:targetApi="l">#style/MyAppTheme.Toolbar</item>
<item name="toolbarStyle">#style/MyAppTheme.Toolbar</item>
...
</style>
I'd like to change the background color of the option (overflow) menu in Android above 5.0. I have tried all the methods but it is still showing the default color set by the theme. I used the following code & XML configs.
There is an easy way to change the colors in Actionbar Use ActionBar Generator and copy paste all file in your res folder and change your theme in Android.manifest file.
Other way is to modify your styles.xml like this-
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- This is the styling for action bar -->
<item name="actionBarStyle">#style/MyActionBar</item>
<!--To change the text styling of options menu items</item>-->
<item name="android:itemTextAppearance">#style/MyActionBar.MenuTextStyle</item>
<!--To change the background of options menu-->
<item name="android:itemBackground">#color/skyBlue</item>
</style>
<style name="MyActionBar" parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="background">#color/red</item>
<item name="titleTextStyle">#style/MyActionBarTitle</item>
</style>
<style name="MyActionBarTitle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
</style>
<style name="MyActionBar.MenuTextStyle"
parent="style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/red</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">25sp</item>
</style>
and this is how it looks--MenuItem background color is skyblue and MenuItem text color is pink with textsize as 25sp:--
This answer is taken from here.
I want to change the Action Bar color, but I don't know how to do it. What should I add to change the style?
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
</style>
</resources>
This is all you need to change the color of the action bar:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#995544</item>
</style>
That code works for me and it also changes text color
<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="actionBarStyle">#style/AppTheme.ActionBar</item>
</style>
<style name="AppTheme.ActionBar" parent="Widget.AppCompat.Light.ActionBar">
<item name="android:titleTextStyle">#style/AppTheme.ActionBar.TitleText</item>
<item name="titleTextStyle">#style/AppTheme.ActionBar.TitleText</item>
<item name="background">#color/colorPrimary</item>
<item name="android:height">150dp</item>
<item name="height">60dp</item>
</style>
<style name="AppTheme.ActionBar.TitleText" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textSize">15dp</item>
<item name="android:textColor">#color/colorAccent</item>
</style>
simple a single Line code
getSupportActionBar().setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.red)));
If your minSdk is 21 or higher, you can add the following:
<item name="colorPrimary">#color/yourColor</item>
If not then make the following changes:
Your activity must extend AppCompatActivity
Change your theme to #style/Theme.AppCompat.Light.NoActionBar
Add this to the top of your activity xml file:
<android.support.v7.widget.Toolbar
android:id="#+id/my_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="#style/ThemeOverlay.AppCompat.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"/>
Put this in your onCreate method after the super.onCreate call:
Toolbar myToolbar = (Toolbar) findViewById(R.id.my_toolbar);
setSupportActionBar(myToolbar);
To change the color just replace ?attr/colorPrimary with #color/yourColor
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
</style
Here colorPrimary attribute helps you to change the color of action bar.
For more details see this fig.
Please try the code below:
<style name="AppCompatTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:background">#ff540e9e</item>
<item name="android:textColor">#ffffff</item>
</style>
At your theme.xml or/and theme.xml (dark), change the following android:statusBarColor which change the to status bar background color, toolbarNavigationButtonStyle change the back button color, actionBarStyle change the background and text color and displayOptions to show the text.
<style name="Theme.Example" parent="Theme.AppCompat.DayNight.DarkActionBar">
<!-- Status bar color. -->
<item name="android:statusBarColor">#color/backgroundDark</item>
<!-- action bar color. -->
<item name="toolbarNavigationButtonStyle">#style/Toolbar.Button.Navigation.Tinted</item>
<item name="actionBarStyle">#style/Actionbar.dark</item>
<item name="displayOptions">showHome|useLogo|showTitle</item>
</style>
<style name="Actionbar.dark" parent="Widget.AppCompat.Toolbar.Button.Navigation">
<item name="background">#color/backgroundDark</item>
<item name="titleTextStyle">#style/Actionbar.darktext</item>
</style>
<style name="Actionbar.darktext" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
</style>
<style name="Toolbar.Button.Navigation.Tinted" parent="Widget.AppCompat.Toolbar.Button.Navigation">
<item name="tint">#color/white</item>
</style>
You can customize the current theme for your app, in the res/values/styles.xml file try:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
// your custom styles added to theme
<item name="android:actionBarStyle">#style/MyActionBarTheme</item>
</style>
//Cutomise your theme by specifying layout,color, font type etc:
<style name="MyActionBarTheme"
parent="#android:style/Widget.AppCompat.Light.DarkActionBar">
// sets the background color of the activity/app:
<item name="android:background">#33FF33</item>
</style>
Then you will need to add your new custom theme name to your apps Manifest file
I'm trying to make the status bar color #a1a1a1 (white_dark) but it's just black when i run it.
This is my Style v21 file:
<style name="AppBaseTheme" parent="AppTheme">
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:statusBarColor">#color/white_dark</item>
</style>
you can try this lib
But my personal suggestion is, switch to AppCompatbecause its very easy to change StatusBar color in it.
Primary Dark color is used for StatusBar:
<!-- darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">#android:color/black</item>
use this theme
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/MyActionBar</item>
</style>
<!-- ActionBar styles -->
<style name="MyActionBar"
parent="#style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/atctionbar_color</item>
<!-- Support library compatibility -->
<item name="background">#color/atctionbar_color</item>
</style>
</resources>
and create new file in values>colors.xml and add color from there
<resources>
<color name="atctionbar_color">#170053</color>
</resources>
I am using "Theme.Light" theme for my android project and while setting up a navigation drawer how can i set actionbar size(height).
I used the below code and i got an error..
<style name="Theme.Light.ActionBar" parent="#android:style/Theme.Light">
<item name="android:windowNoTitle">false</item>
<item name="android:windowActionBar">true</item>
<item name="actionBarSize">36dip</item>
<item name="android:windowActionBarOverlay">true</item>
</style>
can you please reply to my problem as soon as possible and thank you.
Use height attribute,for actionBarHeight
<item name="android:height">#dimen/bar_height</item>
you have to create style like this:
<!-- Application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Main theme colors -->
<!-- your app branding color for the app bar -->
<item name="colorPrimary">#color/primary</item>
<!-- darker variant for the status bar and contextual app bars -->
<item name="colorPrimaryDark">#color/primary_dark</item>
<!-- theme UI controls like checkboxes and text fields -->
<!-- native widgets will now be "tinted" with accent color -->
<item name="colorAccent">#color/accent</item>
<!--Action bar style-->
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
<item name="actionBarStyle">#style/AppTheme.ActionBar</item>
</style>
<style name="AppTheme.ActionBar" parent="Widget.AppCompat.Light.ActionBar">
<item name="titleTextStyle">#style/AppTheme.ActionBar.TitleText</item>
<item name="android:titleTextStyle">#style/AppTheme.ActionBar.TitleText</item>
<item name="android:height">#dimen/bar_height</item>
</style>
<style name="AppTheme.ActionBar.TitleText" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textSize">#dimen/bar_text_size</item>
<item name="android:textColor">#color/bar_text_color</item>
</style>
you have to try below code :
<resources>
<style name="Theme.FixedSize" parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="actionBarSize">48dip</item>
<item name="android:actionBarSize">48dip</item>
</style>
</resources>
If you are using AppCompat, you can set the "actionBarSize" attribute in your theme (which must inherit from Theme.AppCompat.x). You can also use a Toolbar in your layout and set its layout_height to the desired value.