I have tried to add a image to the ActionBar background using this theme/style
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#drawable/actionbar_background</item>
</style>
But although the background is being changed, it's creating a weird effect on the title and menu button. It's as thought they are separate child views within the ActionBar (maybe they are, I'm not sure) and the Drawable is being applied to them individually.
I was hoping for a seamless Drawable being applied across the ActionBar. Is this possible or should I just give up, and instead just change the background with a flat colour?
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/layout_activity_main"
tools:context=".MainActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/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"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_main" />
</android.support.design.widget.CoordinatorLayout>
styles.xml
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="coordinatorLayoutStyle">#style/Widget.Support.CoordinatorLayout</item>
<item name="colorAccent">#android:color/black</item>
<item name="colorPrimary">#android:color/holo_blue_dark</item>
<item name="colorPrimaryDark">#android:color/holo_blue_dark</item>
<item name="android:textColor">#android:color/white</item>
<item name="android:textColorSecondary">#android:color/white</item>
<item name="android:textColorHint">#android:color/white</item>
</style>
<style name="AppTheme.NoActionBar">
<item name="android:windowBackground">#drawable/no_actionbar_background</item>
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#drawable/actionbar_background</item>
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
<item name="android:background">#android:color/black</item>
</style>
</resources>
When you set the android:theme attribute of a view, the style you pass is applied to that view and all of its children. In your case, the AppBarLayout does (internally) use separate views for the title and the overflow menu button.
However, since the only thing your style seems to be doing is setting the android:background attribute, you could just set that directly on the AppBarLayout. So, replace this:
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
with this:
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/actionbar_background">
"android:background"
in your style change the background to each component in your layouts.
You can change the color of your ActionBar with something like this.
<item name="android:navigationBarColor">#color/colorPrimary</item>
This is an example for the AppCompat-v7 Toolbar, the other Toolbar is a bit different when it comes to theme.
I can't really give you the answer that will suit you the most, and this code is only here to show you the way.
What changes is that the toolbar is using style instead of android:theme and it uses a new style AppTheme.Toolbar.
AppTheme.Toolbar groups your custom background, the theme for the views inside the toolbar (title, subtitle, etc) and the theme for the popup menu.
The theme for the children and the popup menu are separated so you can control each component separately.
Try to play with their parent attribute (from Dark to Light) and pick what is the best for you.
Into your styles.xml
<style name="AppTheme.Toolbar">
<item name="android:background">#drawable/actionbar_background</item>
<item name="popupTheme">#style/AppTheme.PopupOverlay</item>
<item name="android:theme">#style/AppTheme.AppBarOverlay</item>
</style>
<style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- Change attribute of the toolbar views-->
</style>
<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Dark">
<!--Change attribute of the menu-->
</style>
Into your activity_main.xml
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
style="#style/AppTheme.Toolbar"
android:layout_height="?attr/actionBarSize" />
</android.support.design.widget.AppBarLayout>
I'm trying to customize the style of my application inside the SettingsActivity. I would like to change the status bar and toolbar colors, and if possible also the window background(from dark to light grey) and text colors(change white for black for example).I've read many websites and I've tried different options in the style.xml but with no success. In SettingsTheme colorPrimary and colorPrimaryDark doesn override the default color of the parenttheme. Thanks in advance.
This is the main activity of my app
and this is the settings activity i have now
style.xml
<resources>
<!-- application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
<item name="colorPrimary">#3F51B5</item>
<item name="colorPrimaryDark">#1A237E</item>
<item name="colorAccent">#FFEB3B</item>
<item name="android:windowBackground">#color/custom_background_light_grey</item>
<item name="dropDownListViewStyle">#style/PopupMenuListView</item>
</style>
<style name="PopupMenuListView" parent="#style/Widget.AppCompat.Light.ListView.DropDown">
<item name="android:divider">#FF0000</item>
<item name="android:dividerHeight">2dp</item>
<item name="android:background">#3F51B5</item>
</style>
<style name="SettingsTheme" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="colorPrimary">#3F51B5</item>
<item name="colorPrimaryDark">#1A237E</item>
</style>
</resources>
toolbar in xml
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary">
</android.support.v7.widget.Toolbar>
Are you sure you use the Toolbar in settings? And may be you forgot to add "NoActionBar Theme" in Setting Activity?
(I know this may not be the answer but I couldn't comment because of the reputation.)
Please replace above code in your Settings activity toolbar code.
<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" />
I have an app that uses a custom Toolbar style. Previously, it applied the theme correctly, but after a recent update of Android Studio, it has stopped working correctly.
The theme.xml is defined like so:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="OurTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:actionBarStyle">#style/MyActionBar</item>
<item name="android:buttonStyle">#style/ButtonAppTheme</item>
<item name="android:imageButtonStyle">#style/ImageButtonAppTheme</item>
<item name="android:listSeparatorTextViewStyle">#style/BlueListSeparatorTextViewStyle</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/action_bar_color</item>
<!-- colorPrimaryDark is used for the status bar -->
<!--<item name="colorPrimaryDark">#color/my_awesome_darker_color</item>-->
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#color/btn_accent_color</item>
</style>
<!-- Application theme. -->
<style name="OurTheme" parent="OurTheme.Base">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="android:listSeparatorTextViewStyle">#style/BlueListSeparatorTextViewStyle</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
</resources>
Our styles.xml contains:
<!-- ActionBar styles ThemeOverlay.AppCompat.ActionBar -->
<style name="MyActionBar" parent="Widget.AppCompat.ActionBar">
<item name="android:titleTextStyle">#style/MyActionBarTitleText</item>
</style>
<!-- ActionBar title text -->
<style name="MyActionBarTitleText" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/actionbar_text</item>
</style>
actionbar_text is defined in our colors.xml:
<color name="actionbar_text">#ffffffff</color>
Finally, our custom toolbar layout:
<?xml version="1.0" encoding="utf-8"?>
<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"
android:minHeight="?attr/actionBarSize"
app:theme="#style/ThemeOverlay.AppCompat.Dark" />
Previously, this worked and our app had white text in its custom toolbar. It now defaults to black everywhere in the app and the only method I have found that can change the color of the toolbar title text (other than doing it in code) is to change the toolbar layout to this:
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:titleTextAppearance="#style/MyActionBarTitleText"
app:theme="#style/ThemeOverlay.AppCompat.Dark" />
Note that now I am specifically telling the actionbar to use MyActionBarTitleText style.
I have also tried to specifically tell it to use the custom theme here as well, by changing the "app:theme" to:
app:theme="#style/MyActionBar"
but this hasn't helped.
I'm afraid I'm at a loss. I know the base theme works as I can change the background colour, but using the actionBarStyle item simply refuses to work.
This has also affected text layouts and justifications to some of our custom button layouts as well and I can't figure out why it has stopped working. Does anyone have any suggestions?
It's very late but answering it.
Create a custom theme for your toolbar and set android:background
<style name="ToolbarStyle" parent="Widget.AppCompat.Toolbar">
<item name="android:background">#color/blue</item> // change your color here and add other attributes
</style>
Now apply this theme to your toolbar in XML like:
style="#style/ToolbarStyle"
I'm trying to change the background and text colors for my ActionMode. I'm using API 11 and AppCompat.
I've tried it with the following style.xml, but the ActionMode background is always white and the text color is black.
I want to change text color to white and background color to blue.
How can I solve this?
Here is my style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- ActionMode -->
<item name="actionModeStyle">#style/MyActionModeStyle</item>
</style>
<!-- Setup the style of the ActionMode here -->
<style name="MyActionModeStyle" parent="#style/Widget.AppCompat.ActionMode">
<item name="android:background">#color/blue</item>
<item name="background">#color/blue</item>
<item name="android:titleTextStyle">#style/MyActionModeTitle</item>
<item name="titleTextStyle">#style/MyActionModeTitle</item>
</style>
<!-- Setup the text style of the ActionMode here -->
<style name="MyActionModeTitle" parent="#style/TextAppearance.AppCompat.Widget.ActionMode.Title">
<item name="android:textColor">#ffffff</item>
</style>
</resources>
In my Activity I'm using android.support.v7.app.ActionBarActivity but I use toolbar:
Here is my settings_activity_toolbar.xml
<?xml version="1.0" encoding="utf-8"?>
<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"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
app:navigationContentDescription="#string/abc_action_bar_up_description"
android:background="?attr/colorPrimary"
app:navigationIcon="?attr/homeAsUpIndicator"
app:title="#string/action_settings" />
Try to set android:actionModeStyle too:
<item name="android:actionModeStyle">#style/MyActionModeStyle</item>
Ok, I managed it by replacing the HomeAsUpIndicator programatically with an done button. Thats all I wanted...
I have a toolbar that I use, and set title with:
((ActionBarActivity)getActivity()).getSupportActionBar().setTitle("Home");
Is there a way to change the color from black to white?
I tried making its own theme and setting it in the xml like this, but no dice:
<resources>
<!-- Base application theme. -->
<style name="AppTheme2" parent="Theme.AppCompat">
<item name="android:windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<item name="android:textColorPrimary">#color/primary_text</item>
<item name="android:textColorSecondary">#color/secondary_text</item>
</style>
<style name="Widget.MyApp.ActionBar" parent="Widget.AppCompat.ActionBar">
<item name="android:background">#color/primary</item>
<item name="theme">#style/ThemeOverlay.MyApp.ActionBar</item>
<item name="popupTheme">#style/ThemeOverlay.AppCompat.Light</item>
</style>
<style name="ThemeOverlay.MyApp.ActionBar" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#FFFFFF</item>
</style>
</resources>
XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#e5e5e5"
android:orientation="vertical" >
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#color/primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/Widget.MyApp.ActionBar">
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/statsSpin"
android:spinnerMode="dropdown"
android:textColor="#FFFFFF"/>
</android.support.v7.widget.Toolbar>
<ListView
android:id="#+id/yourStats"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:dividerHeight="0px"
android:divider="#null"
>
</ListView>
</LinearLayout>
Programatically:
toolbar.setTitleTextColor(0xFFFFFFFF);
Per the Theme vs Style blog post by the creator of AppCompat and the post on version 21 of AppCompat, a DarkActionBar toolbar (i.e., a Toolbar with a dark background and light text), can be accomplished by adding android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" to your Toolbar's XML:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:minHeight="?attr/actionBarSize"
android:background="#color/primary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<Spinner
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/statsSpin"
android:spinnerMode="dropdown"/>
</android.support.v7.widget.Toolbar>
This will change text color and the default colors to many attributes (such as your Spinner to light text as is needed for the dark background.
Create a new style in application base theme
<style name="custom_toolbar" parent="#style/Widget.AppCompat.Toolbar">
<item name="titleTextColor">#replace with color</item>
</style>
and use the style for the toolbar
<item name="toolbarStyle">#style/custom_toolbar</item>
I know there are a lot of answers above hope, it will help someone who doesn't understand above answers.
Android has view called Toolbar.This view has title which always takes as default color from color.xml resources which item name is accent.You can change your toolbar color in two way.
Via xml which I recommend you to do that, here below you can see example
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:titleTextColor="#color/White" />Here you can change it.Remember APP attribute not ANDROID
Via programmatically within activity or fragment.
Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);
toolbar.setTitleTextColor(ContextCompat.getColor(this, R.color.colorAccent));
If you want to change only title text color than,
Try this one..
getSupportActionBar().setTitle(Html.fromHtml("<font color='#746E66'>"+titleText+"</font>"));
it works..!!
You can define custom tool bar style by extending Widget.AppCompat.Toolbar and setting titleTextAppearance and subtitleTextAppearance properties. This way you can change color and text size of title and subtitle of toolbar for reference
http://www.zoftino.com/android-toolbar-tutorial .
<style name="MyAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="toolbarStyle">#style/MyToolBarStyle</item>
</style>
<style name="MyToolBarStyle" parent="Widget.AppCompat.Toolbar">
<item name="titleTextAppearance">#style/MyTitleTextAppearance</item>
<item name="subtitleTextAppearance">#style/MySubTitleTextAppearance</item>
</style>
<style name="MyTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">25dp</item>
<item name="android:textColor">#ff3d00</item>
</style>
<style name="MySubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textSize">20dp</item>
<item name="android:textColor">#1976d2</item>
</style>
It can be changed programatically as you can above answer. But reduce code complexity, you should change it via style.xml
First of all create attrs.xml to under res/values folder
than add two reference to attrs.xml folder like below
attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="toolbar_theme" format="reference" />
<attr name="toolbar_theme_title" format="reference" />
</resources>
After defination of reference than create a style in style.xml like below
style.xml
<style name="CustomTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#00A4E4</item>
<item name="colorPrimaryDark">#AB0634</item>
<item name="colorAccent">#AB0634</item>
<item name="toolbar_theme">#style/CustomTheme.Toolbar</item>
<item name="toolbar_theme_title">#style/CustomTheme.Toolbar.Title</item>
<item name="android:textColorPrimary">#color/black</item>
<item name="android:textColorSecondary">#android:color/black</item>
<item name="windowActionModeOverlay">true</item>
</style>
<style name="CustomTheme.Toolbar" parent="ThemeOverlay.AppCompat.ActionBar">
<!-- if you have a navigationdrawer you change it color also -->
<item name="colorControlNormal">#AB0634</item>
</style>
<style name="CustomTheme.Toolbar.Title" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<!-- Set title size -->
<item name="android:textSize">#dimen/abc_text_size_title_material_toolbar</item>
<!-- Set title color -->
<item name="android:textColor">#AB0634</item>
</style>
Now we have created toolbar_theme and toolbar_theme_title reference in attrs.xml than give these references to our custom theme in style.xml
Finally we give this reference to toolbar like below
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="?attr/toolbar_theme"
app:titleTextAppearance="?attr/toolbar_theme_title"
android:elevation="4dp"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
Thats it. You can give this theme programatically or set in androidmanifest.xml like below.
programmatically
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setTheme(R.style.CustomTheme); // (for Custom theme)
this.setContentView(R.layout.myactivity);
androidmanifest.xml
<application
android:theme="#style/CustomTheme">
or
<activity
android:theme="#style/CustomTheme">
Here I fixed it using the code below and it works on every API level :
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/color_primary</item>
<item name="colorPrimaryDark">#color/color_primary_dark</item>
<item name="colorAccent">#color/color_accent</item>
<item name="toolbarStyle">#style/CustomToolBarStyle</item>
</style>
<style name="CustomToolBarStyle" parent="#style/Widget.AppCompat.Toolbar">
<item name="titleTextColor">#color/title_text_color</item>
</style>
To extend on tachyonflux, to set color with a HEX
toolbar.setTitleTextColor(Color.parseColor("#519c3f"));
toolbar.setTitleTextColor(getResources().getColor(R.color.black));
(toolbar is the name you've give your toolbar in your acitivyt class)
(In your colors values xml set your desired colors and reference it to the color name you chose, as seen here I keep some of my main colors normal names)
Took me a while to figure this out myself but this is the only way I can get it to work, the ThemEditor should allow this but it is what it is.
In xml:
app:titleTextColor="#color/White" as
<android.support.v7.widget.Toolbar
android:id="#+id/tb_top"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
app:theme="#style/AppTheme.DarkToolbar"
app:titleTextColor="#color/White" />
Use this code
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
app:titleTextColor="#color/colorAccent"
app:theme="#style/ToolbarColoredBackArrow"
app:subtitleTextColor="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:popupTheme="#style/AppTheme.PopupOverlay" />
You can change the theme of your action bar using the attribute actionBarTheme as follow. Although it has been added in API level 21 it seems to be compatible with older APIs.
<style name="AppTheme" parent="Theme.AppCompat.Light">
<item name="actionBarTheme">#style/AppTheme.AppBarOverlay</item>
</style>
In Kotlin, using Sandip's answer:
with(getSupportActionBar()) {
val titleText: String = title.toString()
setTitle(Html.fromHtml("<font color='#746E66'>" + titleText + "</font>"))
}
You can change it programmatically by using following code.
toolbar.setTitleTextColor(android.graphics.Color.WHITE);
Inside of android.support.v7.widget.Toolbar, add this line:
local:titleTextColor="#color/the_color_you_want"
I found the rather simple solution.
It can be done by the following ways (by XML or programmatically).
First (XML solution):
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/Theme.AppCompat.NoActionBar"
app:titleTextColor="#color/white" />
Second (programmatically):
val toolbar = findViewById<Toolbar>(R.id.toolbar)
toolbar.setTitleTextColor(Color.WHITE)
The second solution requires min SDK version over 21, for your note.