Unable to text Toolbar text color - android

I have this code in my Activity:
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
setTitle("My title");
In styles.xml, I have this:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
//more stuff
</style>
<style name="Toolbar" parent="Theme.AppCompat">
<item name="android:textAppearance">#style/Toolbar.Text</item>
</style>
<style name="Toolbar.Text">
<item name="android:textColor">#android:color/white</item>
</style>
and the Toolbar layout:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/Toolbar" />
I want the toolbar's text to be white, but it is black. I have tried lot of things but I really can't change it.

Whatever it is, The issue is come from this line :
<style name="Toolbar" parent="Theme.AppCompat">
And this: app:theme="#style/Toolbar" (You've used app instead of android, Be careful about that)
And you don't really need to do that.
Just use this line for the Toolbar:
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
So:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/AppTheme" />
Then you should see the white text and etc
As you can see, I've set the app:popupTheme to AppTheme which the parameter is :
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
After adding that line to the Toolbar, Now you can remove these:
<style name="Toolbar" parent="Theme.AppCompat">
<item name="android:textAppearance">#style/Toolbar.Text</item>
</style>
<style name="Toolbar.Text">
<item name="android:textColor">#android:color/white</item>
</style>
Then the only thing you should do is setting the parent for app:popupTheme to this :
Theme.AppCompat.Light.NoActionBar
Which it can be your Activity style parent.
That's it :)

Use the editor for this. Go to tools->android->theme editor. There you can find the option for changing the colors.

you may be using SDK less than 23 you can try this
In xml :-
android:titleTextColor="#color/colorPrimary"
In fragment
toolbar.setTitleTextColor(Color.RED);

Related

Toolbar does not consume theme attributes

I use theme
<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>
</style>
And toolbar looks like this
But for CoordinatorLayour I need custom toolbar, not most-top-element (most top will be collapsing layout), so I use following style for Activity:
<style name="AppTheme.NoActionBar" parent="AppTheme">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
And toolbar in activity.xml
<android.support.v7.widget.Toolbar
android:id="#+id/ac_main_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_height"
tools:title="title"
app:theme="#style/AppTheme"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:layout_collapseMode="pin"/>
But it does not populated with colors from AppTheme. And looks like this
Why? I need my theme colors and dots at the center of toolbar.
After some research I found, that toolbar theme is not AppCompat theme and sould be ThemeOverlay.*
For dark action bar theme I should use
<style name="BarTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
not from parent="Theme.AppCompat.Light.DarkActionBar"
This fixes all color problems.
To fix title and 3 dots (put it in the middle of toolbar) - AppBarLayout height should be wrap_content (was fixed size before), and collapsing size in pixels should be moved to CollapsingToolbarLayout under AppBarLayout.
try to add android:background="#color/primary" to your toolbar definiton.
Like:
android.support.v7.widget.Toolbar
android:id="#+id/ac_main_toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/action_bar_height"
android:background="#color/primary"
tools:title="title"
app:theme="#style/AppTheme"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:layout_collapseMode="pin"/>
Add following to your theme :
<!-- toolbar title and overflow menu color -->
<item name="android:textColorSecondary">#color/white</item>
And for the vertically center align you have to use height of toolbar as following :
<android.support.v7.widget.Toolbar
android:id="#+id/ac_main_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize" <!-- Height change -->
tools:title="title"
app:theme="#style/AppTheme"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:layout_collapseMode="pin"/>

ActionBar style (Text size)

I'm trying to modify the text size of my ActionBar and I tried styling it but it doesn't change anything... That's my styles page.
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="android:actionBarStyle">#style/AppTheme.Styled.ActionBar.TitleTextStyle</item>
<!-- Customize your theme here. -->
</style>
<style name="AppTheme.ActionBar">
<item name="android:titleTextStyle">#style/AppTheme.Styled.ActionBar.TitleTextStyle</item>
</style>
<style name="AppTheme.Styled.ActionBar.TitleTextStyle" parent="#android:style/Widget.TextView">
<item name="android:textSize">19sp</item>
</style>
Also I had this on my styles.xml but doesn't work either
<style name="Theme.FixedSize" parent="#android:style/Theme.Holo.Light.DarkActionBar">
<item name="actionBarSize">4dip</item>
<item name="android:actionBarSize">4dip</item>
<item name="android:textSize">3sp</item>
</style>
I also have tried with a nasty way but it doesn't work only works with the color.
mActionBar.setTitle(Html.fromHtml("<font size=\"3\" color=\"white\">" + getString(R.string.app_name_device)));
After you say to me... I know now it's used Toolbar BUT I have to do it now with ActionBar.
EDIT
I hided the ActionBar like this :
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<!-- Customize your theme here. -->
</style>
Then I added a ToolBar like this :
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:id="#+id/toolbar"
app:titleTextAppearance="#style/Toolbar.TitleText" />
But the Layout messed up, it goes up and now the ToolBar is collapsed with the first TextView
You can do it programmatically like this
Html.fromHtml("<big><font color=\"white\">" + getString(R.string.app_name_device)+"</big>")
for small text you can change tag <big> with <small>
and if you want to provide specific size of Title Text then you should use Toolbar and use below theme/style
Create one layout toolbar.xml and put below code
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:id="#+id/toolbar"
app:titleTextAppearance="#style/Toolbar.TitleText" />
and change size in
<style name="Toolbar.TitleText" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">18sp</item>
</style>
and you can inculde above layout in your each Activity layout files like below
<include
layout="#layout/toolbar"
/>
Toolbar in your Activity
ToolBar mToolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayShowHomeEnabled(true);
getSupportActionBar().setTitle(Html.fromHtml("<big><font color=\"white\">" + getString(R.string.app_name_device)+"</big>"));
I do it so:
import android.support.v7.app.ActionBar;
public void title_change(String text) {
TextView tv = new TextView(this);
tv.setText(text);
tv.setTextSize(15);
getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setCustomView(tv);
}

Customizing Toolbar and other properties inside SettingsActivity

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" />

Android Support Toolbar Styling

I am trying to implement a Light Theme of AppCompat with a dark toolbar (action bar), however when adding the toolbar dynamically or using <include /> the text fails to display in the correct color (black instead of white). The default action bar is styled correctly, but when I add the toolbar it is not.
Here is my code:
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"
app:theme="#style/AppTheme"
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"
/>
styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#ff299725</item>
<item name="colorPrimaryDark">#ff1d691b</item>
<item name="colorAccent">#ff5fb10b</item>
</style>
</resources>
However I get this in preview and live environment:
I have tried different versions of AppCompat (v.22.1, v.22.2, v.21.0.3) all replicate the issue, I have tried adding extra styles for textColor and all that happens is that it styles everything white.
Any help SO legends?
In your toolbar.xml, remove the app:theme attribute and use this instead:
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
Also, depending on how you're implementing toolbar, you may want to change your base theme (in styles.xml) to use the NoActionBar variant, like so:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
styles.xml
<style name="Toolbar" parent="#style/ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#color/xxx</item>
<item name="android:background">#color/xxx</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
<style name="DrawerArrowStyle" parent="#style/Widget.AppCompat.DrawerArrowToggle">
<item name="color">#color/xxx</item>
<item name="gapBetweenBars">4dp</item>
</style>
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:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:theme="#style/Toolbar"
/>

Change title color in toolbar?

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.

Categories

Resources