I have the following gradle AppCompat and activity definitions:
compile 'com.android.support:appcompat-v7:21.0.3'
<activity
android:name="MainActivity"
android:label="#string/app_name"
android:hardwareAccelerated="true"
android:screenOrientation="portrait"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
Action bar currently looks like this:
I'd like to make title and subtitle fonts bigger and also adjust an image size, how can I do that?
After some searching I've found out I should start with defining a custom Toolbar in activity XML like this:
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:minHeight="?attr/actionBarSize"
android:background="#color/background_material_dark"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
But once I put that code inside my activity I get the following rendering error:
So I'm kind of lost here, can someone explain what's going on and what should I do?
UPD
Following some tutorial I've tried this:
<style name="MyTheme" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:actionBarStyle">#style/MyTheme.ActionBarStyle</item>
</style>
<style name="MyTheme.ActionBarStyle" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="android:subtitleTextStyle">#style/MyTheme.ActionBar.Subtitle</item>
</style>
<style name="MyTheme.ActionBar.TitleTextStyle" parent="#style/Base.ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColor">#FFFFFF</item>
</style>
<style name="MyTheme.ActionBar.Subtitle" parent="#style/Base.ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:textColor">#FF0000</item>
</style>
And now both title and subtitle are just not visible. I suspect I should use some other parent instead of #style/Base.ThemeOverlay.AppCompat.Dark.ActionBar but I have no idea which exactly.
You can use the style Widget.AppCompat.Toolbar.
<!-- Toolbar styles -->
<item name="toolbarStyle">#style/Widget.AppCompat.Toolbar</item>
Related
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 am using Toolbar for the purpose of material design in my application. Everything working fine but except when it comes to change the menu item text color I am completely stuck up with the solution. I am also posting screenshot of the text that should be taken and code I am using in my application for your reference. I tried several alternate methods like assigning as follows
<item name="android:actionMenuTextColor">#color/white</item>
<item name="android:textColor">#000</item>
But known of the above solutions works for me.
Requirement screenshot:
Need to change SKIP menu item from black to white color.
styles.xml
<style name="ToolBarTheme" parent="#style/Theme.AppCompat.Light">
<item name="colorPrimary">#color/blue</item>
<item name="colorPrimaryDark">#color/blue</item>
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
<item name="android:actionMenuTextColor">#color/white</item>
<item name="android:textColor">#000</item>
</style>
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:layout_scrollFlags="scroll|enterAlways"
android:fitsSystemWindows="true"
android:background="?attr/colorPrimary"/>
manifests
<activity
android:name=".activity.HomeActivity"
android:label="#string/app_name"
android:screenOrientation="portrait"
android:configChanges="keyboard|screenLayout|orientation"
android:theme="#style/ToolBarTheme"></activity>
I really dont know where I am committing mistake. Please help me. Thanks in advance
Change this
<item name="android:actionMenuTextColor">#color/white</item>
to
<item name="actionMenuTextColor">#color/white</item>
And apply the theme to the toolbar:
android:theme="#style/ToolBarTheme"
You style your widgets and provide themes for your activity.
I have a "light"-themed application with:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<!-- etc. -->
</style>
I want my Toolbars to be dark themed, so I have setup the following style, just as suggested by Chris Banes:
<style name="Theme.MyTheme.Toolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<!-- stuff -->
</style>
Then, by adding android:theme="#style/Theme.ByodTheme.Toolbar" to my android.support.v7.widget.Toolbar, everything works as expected (even though the Android Studio preview doesn't show white colors for the title, it works on devices):
Now, instead of specifying android:theme for every Toolbar in my application, I'd like to specify the style in my main theme and forget about it. I have tried the toolbarStyle property, but it looks like it doesn't work as intended, since it completely messes up standard properties:
I have also made other attempts by making the Toolbar theme inherit from Widget.AppCompat.Toolbar, and by changing titleTextAppearance and subtitleTextAppearance, but then it looks impossible to change the overflow icon color (yes, I have tried to set actionOverflowButtonStyle and inherit that style from Widget.AppCompat.ActionButton.Overflow, with no success in changing the overflow icon color).
Is there a way to specify, from a single point, the main theme for every toolbar in my application?
You can use a custom attribute for this -- basically just set your toolbars to use a custom value that you'll define in the theme.
<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="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="?attr/toolbar_theme"
/>
The important part there is just android:theme="?attr/toolbar_theme" which references a custom attribute from the current theme.
You will need to declare this attribute somewhere, like so:
<resources>
<attr name="toolbar_theme" format="reference" />
</resources>
Then you can define what value you want the toolbar to use by assigning a value to toolbar_theme in your theme. For example, to make it use Theme.MyTheme.Toolbar you could define it like so:
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/primary</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/accent</item>
<!-- etc. -->
<item name="toolbar_theme">#style/Theme.MyTheme.Toolbar</item>
</style>
The nice thing about using an attribute is that it lets your app have multiple themes, and that single toolbar resource will use whatever value you've set within the theme.
If I understand the question correctly, you want to set your app's theme once and apply all the styling to all the Toolbars in every activity/fragment.
If so, I would recommend this approach:
<style name="MyTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:textColorPrimary">#color/MyColorPrimaryText</item>
<item name="android:windowBackground">#color/MyColorWindowBackground</item>
<item name="colorPrimary">#color/MyColorPrimary</item>
<item name="colorPrimaryDark">#color/MyColorPrimaryDark</item>
<item name="colorAccent">#color/MyColorAccent</item>
<item name="colorControlNormal">#color/MyColorControlNormal</item>
<item name="colorControlHighlight">#color/MyColorControlHighlight</item>
<item name="toolbarStyle">#style/MyToolbar</item>
<item name="windowActionModeOverlay">true</item>
<item name="actionModeBackground">#color/MyColorPrimaryDark</item>
</style>
<style name="MyToolbar" parent="Widget.AppCompat.Toolbar">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:minHeight">#dimen/MyToolbarMinHeight</item>
<item name="android:gravity">center_vertical</item>
<item name="android:background">#color/MyColorPrimary</item>
<item name="android:elevation" tools:ignore="NewApi">10dp</item>
<item name="theme">#style/MyToolbarTheme</item>
</style>
<style name="MyToolbarTheme" parent="ThemeOverlay.AppCompat.ActionBar">
<item name="android:textColorPrimary">#color/MyColorPrimaryText</item>
<item name="colorControlNormal">#color/MyToolbarColorControlNormal</item>
<item name="colorControlHighlight">#color/MyToolbarColorControlHighlight</item>
</style>
Then in your manifest:
<application
android:name=".MyApp"
android:theme="#style/MyTheme">
<activity android:name=".MyActivity1"/>
<activity android:name=".MyActivity2"/>
</application>
Then in your activity layout files, include the toolbar with:
style="?attr/toolbarStyle"
So myActivity1.xml layout file would look like this:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.Toolbar
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?attr/toolbarStyle" />
<!-- ETC. -->
</LinearLayout>
And notice that to change the navigation back button color or the overflow button colors, you can set:
<item name="colorControlNormal">#color/MyColorControlNormal</item>
<item name="colorControlHighlight">#color/MyColorControlHighlight</item>
And:
<item name="android:textColorPrimary">#color/MyColorPrimaryText</item>
Can be used to update the actionbar text color but you'd define it in the Toolbar theme.
Hope this helps.
I'm trying to recreate the look of Theme.AppCompat.Light.DarkActionBar with the new support library Toolbar.
If I choose Theme.AppCompat.Light my toolbar will be light and if I choose Theme.AppCompat it will be dark. (Technically you have to use the .NoActionBar version but as far as I can tell the only difference is
<style name="Theme.AppCompat.NoActionBar">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
Now there's no Theme.AppCompat.Light.DarkActionBar but naively I thought it'd be good enough to just make my own
<style name="Theme.AppCompat.Light.DarkActionBar.NoActionBar">
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
</style>
However with this my toolbars are still Light themed. I've spent hours now trying different combinations of mixing the Dark (base) theme and the Light theme but I just can't find a combination that will let me have light backgrounds on everything but the toolbars.
Is there a way of getting the AppCompat.Light.DarkActionBar look with import android.support.v7.widget.Toolbar's?
The recommended way to style the Toolbar for a Light.DarkActionBar clone would be to use Theme.AppCompat.Light.DarkActionbar as parent/app theme and add the following attributes to the style to hide the default ActionBar:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
</style>
Then use the following as your Toolbar:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<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/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>
For further modifications, you would create styles extending ThemeOverlay.AppCompat.Dark.ActionBar and ThemeOverlay.AppCompat.Light replacing the ones within AppBarLayout->android:theme and Toolbar->app:popupTheme. Also note that this will pick up your ?attr/colorPrimary if you have set it in your main style so you might get a different background color.
You will find a good example of this is in the current project template with an Empty Activity of Android Studio (1.4+).
Edit: After updating to appcompat-v7:22.1.1 and using AppCompatActivity instead of ActionBarActivity my styles.xml looks like:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
Note: This means I am using a Toolbar provided by the framework (NOT included in an XML file).
This worked for me:
styles.xml file:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="windowActionBar">false</item>
<item name="theme">#style/ThemeOverlay.AppCompat.Dark.ActionBar</item>
</style>
Update: A quote from Gabriele Mariotti's blog.
With the new Toolbar you can apply a style and a theme.
They are different!
The style is local to the Toolbar view, for example the background color.
The app:theme is instead global to all ui elements inflated in the Toolbar, for example the color of the title and icons.
Ok after having sunk way to much time into this problem this is the way I managed to get the appearance I was hoping for. I'm making it a separate answer so I can get everything in one place.
It's a combination of factors.
Firstly, don't try to get the toolbars to play nice through just themes. It seems to be impossible.
So apply themes explicitly to your Toolbars like in oRRs answer
layout/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:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/Dark.Overlay"
app:popupTheme="#style/Dark.Overlay.LightPopup" />
However this is the magic sauce. In order to actually get the background colors I was hoping for you have to override the background attribute in your Toolbar themes
values/styles.xml:
<!--
I expected android:colorBackground to be what I was looking for but
it seems you have to override android:background
-->
<style name="Dark.Overlay" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">?attr/colorPrimary</item>
</style>
<style name="Dark.Overlay.LightPopup" parent="ThemeOverlay.AppCompat.Light">
<item name="android:background">#color/material_grey_200</item>
</style>
then just include your toolbar layout in your other layouts
<include android:id="#+id/mytoolbar" layout="#layout/toolbar" />
and you're good to go.
Hope this helps someone else so you don't have to spend as much time on this as I have.
(if anyone can figure out how to make this work using just themes, ie not having to apply the themes explicitly in the layout files I'll gladly support their answer instead)
EDIT:
So apparently posting a more complete answer was a downvote magnet so I'll just accept the imcomplete answer above but leave this answer here in case someone actually needs it.
Feel free to keep downvoting if it makes you happy though.
The cleanest way I found to do this is create a child of 'ThemeOverlay.AppCompat.Dark.ActionBar'. In the example, I set the Toolbar's background color to RED and text's color to BLUE.
<style name="MyToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#FF0000</item>
<item name="android:textColorPrimary">#0000FF</item>
</style>
You can then apply your theme to the 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:layout_height="wrap_content"
android:layout_width="match_parent"
app:theme="#style/MyToolbar"
android:minHeight="?attr/actionBarSize"/>
To customize tool bar style, first create tool bar custom style inheriting Widget.AppCompat.Toolbar, override properties and then add it to custom app theme as shown below, see http://www.zoftino.com/android-toolbar-tutorial for more information tool bar and styles.
<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="android:background">#80deea</item>
<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">35dp</item>
<item name="android:textColor">#ff3d00</item>
</style>
<style name="MySubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
<item name="android:textSize">30dp</item>
<item name="android:textColor">#1976d2</item>
</style>
Yout can try this below.
<style name="MyToolbar" parent="Widget.AppCompat.Toolbar">
<!-- your code here -->
</style>
And the detail elements you can find them in https://developer.android.com/reference/android/support/v7/appcompat/R.styleable.html#Toolbar
Here are some more:TextAppearance.Widget.AppCompat.Toolbar.Title, TextAppearance.Widget.AppCompat.Toolbar.Subtitle, Widget.AppCompat.Toolbar.Button.Navigation.
Hope this can help you.
Similar to Arnav Rao's, but with a different parent:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="toolbarStyle">#style/MyToolbar</item>
</style>
<style name="MyToolbar" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="android:background">#ff0000</item>
</style>
With this approach, the appearance of the Toolbar is entirely defined in the app styles, so you don't need to place any styling on each toolbar.
My code is as below and while it works ( when I change the parent Theme to Theme.Sherlock or Theme.Sherlock.Light the Theme it does changes) it does not changes the Title color.
The code is pretty much the same as here
Code :
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyTheme" parent="#style/Theme.Sherlock">
<item name="actionBarStyle">#style/MyTheme.ActionBarStyle</item>
<item name="android:actionBarStyle">#style/MyTheme.ActionBarStyle</item>
</style>
<style name="MyTheme.ActionBarStyle" parent="#style/Widget.Sherlock.ActionBar">
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="MyTheme.ActionBar.TitleTextStyle" parent="#style/TextAppearance.Sherlock.Widget.ActionBar.Title" >
<item name="android:textColor">#FF0000</item>
</style>
</resources>
i have changed title color like this
actionBar.setTitle(Html.fromHtml("<font color='#ff0000'>ActionBarTitle </font>"));
From Jake Wharton's ActionBarSherlock site :
Mirrored Attributes
Due to limitations in Android's theming system any theme
customizations must be declared in two attributes. The normal
android-prefixed attributes apply the theme to the native action bar
and the unprefixed attributes are for the custom implementation.
Had to change MyTheme.ActionBarStyle to :
<style name="MyTheme.ActionBarStyle" parent="#style/Widget.Sherlock.ActionBar">
<item name="android:titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
<item name="titleTextStyle">#style/MyTheme.ActionBar.TitleTextStyle</item>
</style>
Now the Title text color has changed.
Use below code to provide different color to actionbar text and actionbar background just use below theme in manifest against the activity in which you want output :)
<style name="MyTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
<style name="MyActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:titleTextStyle">#style/TitleBarTextColor</item>
<item name="android:background">YOUR_COLOR_CODE</item>
</style>
<style name="TitleBarTextColor" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">YOUR_COLOR_CODE</item>
</style>
Simplest way that worked for me is to add the following in theme style:
<item name="android:textColorPrimary">#color/orange_dark</item>
I tried all the above methods, it does n't worked for me.I have just achieved through code below..
Spannable text = new SpannableString(actionBar.getTitle());
text.setSpan(new ForegroundColorSpan(Color.BLUE), 0, text.length(), Spannable.SPAN_INCLUSIVE_INCLUSIVE);
actionBar.setTitle(text);
If you are trying to change the title text where you have a custom toolbar then try adding app:titleTextColor to the toolbar as below:
<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"
app:titleTextColor="#color/colorWhite" />
in your style.xml in values folder this will change your action bar color.. Replace #666666 with your selected color code for title background color and replace #000000 for your title text color.
<style name="MyTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/NewActionBar</item>
</style>
<style name="NewActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:titleTextStyle">#style/TitleBarTextColor</item>
<item name="android:background">#666666</item>
</style>
<style name="TitleBarTextColor" parent="#style/TextAppearance.Sherlock.Widget.ActionBar.Menu">
<item name="android:textColor">#000000</item>
</style>
then dont forget to edit your manifest file -> android:theme="#style/NewTheme"
<application
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/NewTheme" >
<activity
android:name="com.nearby.welcome.Splash"
android:label="#string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>