I am trying to define a gradient background for a toolbar, but I am getting a weird effect where the gradient becomes the background of all the elements inside the toolbar:
Other answers suggest to set the background at layout but I am interested in getting it working at style level. Ay suggestion? Thanks in advance!
My defined styles are the following:
<style name="AppTheme" parent="#style/Theme.AppCompat.Light.NoActionBar">
<!-- This puts the status bar translucent -->
<item name="android:windowDrawsSystemBarBackgrounds">true</item>
<item name="android:windowTranslucentStatus">true</item>
<!-- set actionBar style. This att is referenced from layout to set the style-->
<item name="android:actionBarStyle">#style/AppThemeToolBar</item>
</style>
<style name="AppThemeToolBar" parent="#style/Theme.AppCompat">
<item name="android:icon">#drawable/ic_logo</item>
<item name="android:background">#drawable/toolbar_background</item>
<!-- trying to set a text without background but is being ignored -->
<item name="android:titleTextStyle">#style/ToolBarTitle</item>
<!-- also ignored -->
<item name="android:titleTextAppearance">#style/ToolBarTitle</style>
</style>
And this is the toolbar declaration at my layout xml:
<Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentInsetEnd="0dp"
app:contentInsetStart="0dp"
android:layout_gravity="top"
<!-- here actionBarStyle att is read -->
app:theme="?attr/actionBarStyle"
/>
Solution is as simple/stupid as using toolbarStyle att at styles.xml:
<style name="MyTheme">
<item name="toolbarStyle">#style/NeoToolbarStyle</item>
<item name="toolbarNavigationButtonStyle">#style/ToolbarNavigationButtonStyle</item>
</style>
And of course my Toolbar style can be used as usual with android:background without getting the weird effect:
<style name="AppThemeToolBar" parent="#style/Widget.AppCompat.Toolbar">
<item name="android:background">#drawable/my_beautiful_gradient</item>
</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 have made an app for android with Xamarin form in VS2015. I have added TabbedPage, but my TabbedPage's action bar has problem.
If tabbedPage has many ContentPage, title text is not 1 line, and I can't change tab's height, width, color(font, background), and scrollable tab.
I know the problem is theme, but I don't know how do I customized theme.
Below is my theme:
<?xml version="1.0" encoding="UTF-8"?>
<resources>
<style name="MyTheme" parent="MyTheme.Base">
</style>
<!-- Base theme applied no matter what API -->
<style name="MyTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
<!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
<item name="windowNoTitle">true</item>
<!--We will be using the toolbar so no need to show ActionBar-->
<item name="windowActionBar">false</item>
<!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette-->
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#2196F3</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#1976D2</item>
<!-- colorAccent is used as the default value for colorControlActivated
which is used to tint widgets -->
<item name="colorAccent">#FF4081</item>
<!-- You can also set colorControlNormal, colorControlActivated
colorControlHighlight and colorSwitchThumbNormal. -->
<item name="windowActionModeOverlay">true</item>
<item name="android:datePickerDialogTheme">#style/AppCompatDialogStyle</item>
</style>
<style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
<item name="colorAccent">#FF4081</item>
</style>
</resources>
now, my app need AppCompact theme, so I don't know how do I fix it.
Try using "scrollable" Tab mode.
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"
app:tabMode="scrollable"
style="#style/MyCustomTabLayout" />
Here I used customized TabLayout style. Below is the MyCustomTabLayout style. Define this style into your values/styles.xml file.
values/styles.xml
<!-- TabLayout Style -->
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
<item name="tabIndicatorColor">#FFFFFF</item>
<item name="tabIndicatorHeight">3dp</item>
<item name="tabBackground">?attr/selectableItemBackground</item>
<item name="tabTextAppearance">#style/MyCustomTabTextAppearance</item>
<item name="tabSelectedTextColor">#FFFFFF</item>
</style>
Hope this will help~
If your style theme is AppCompact(see in manifest file) then your class should be extend AppCompactActivity class otherwise it will throw error.
I think viewPager is comfortable to use.
Look at This code How i change textcolor,height,tabindicator color in ViewPager
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#499b97"
app:tabGravity="fill"
app:tabIndicatorColor="#cfc31b"
app:tabIndicatorHeight="6dp"
app:tabMode="fixed" />
</android.support.design.widget.AppBarLayout>
<style name="MyTrasparent" parent="#style/Theme.AppCompat.Light.NoActionBar">
<item name="android:background">#android:color/transparent</item>
<item name="android:windowIsTranslucent">true</item>
<item name="android:colorBackground">#android:color/transparent</item>
<item name="android:windowBackground">#color/soloColor</item>
<item name="android:windowFullscreen">true</item>
<item name="android:windowAnimationStyle">#android:style/Animation</item>
I'm trying customize the ActionBar in my app. I want to change background color and text color.
My styles.xml is as below:
<resources>
<!-- Base application theme. -->
<style name="AppTheme.NoActionBar" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:actionBarStyle">#style/AppTheme.ActionBar</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">#style/AppTheme.ActionBar</item>
</style>
<style name="AppTheme.ActionBar" parent="#style/Widget.AppCompat.Light.ActionBar">
<item name="android:background">#color/actionbar_background</item>
<item name="android:titleTextStyle">#style/AppTheme.ActionBar.TitleTextStyle</item>
<!-- Support library compatibility -->
<item name="background">#color/actionbar_background</item>
<item name="titleTextStyle">#style/AppTheme.ActionBar.TitleTextStyle</item>
</style>
<style name="AppTheme.ActionBar.TitleTextStyle" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/actionbar_text_color</item>
</style>
</resources>
In my AndroidManifest.xml I added android:theme="#style/AppTheme.NoActionBar". In my activity I added the action bar with code
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/AppTheme.ActionBar" />
In result I have the action bar with correct color but incorrect text color.
What's wrong?
Note:
I'm using AppCompat, not Holo or other.
This is happening because your Toolbar's theme is set to light, hence the Android picks a dark (black) text colour.
You need to update it to following:
<style name="AppTheme.ActionBar" parent="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<item name="titleTextColor">#FF0001</item>
<item name="subtitleTextColor">#FF0001</item>
<!-- your other theme attributes -->
</style>
Notes:
For Toolbar themes, use ThemeOverlay instead of Theme.AppCompat. Related - When should one use Theme.AppCompat vs ThemeOverlay.AppCompat?,
replace #FF0001 with any colour you like. This is the colour of your title text.
maybe you should remove
actionBarTabTextStyle
from AppTheme.NoActionBar
hope it will help...
Why don't you directly use
<item name="android:textColor">#color/blue</item>
inside your custom MyActionBar style defination.
Instead of app:theme i am using android:theme which works for me.
Give it a try.
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/MyActionBar" /> <----------Here
You can change the ActionBar text and background color through java code
yourToolbar.setTitleTextColor(Color.WHITE);
yourToolbar.setBackgroundColor(Color.YOUR_COLOR);
I have a "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.
Hello I am trying to set the the ActionBar title color to White. I tried below code but that is not working. Currently title of it showing in black color. I don't know what I am missing. I tried diferent many attempts but didn't get success, other properties are working fine like background color etc.
I am using AppCompat library for backport.
Can anyone help me please.
style.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- colorPrimary is used for the default action bar background -->
<item name="colorPrimary">#color/my_awesome_color</item>
<!-- colorPrimaryDark is used for the status bar -->
<item name="colorPrimaryDark">#color/my_awesome_dark_color</item>
<!-- colorAccent is used as the default value for colorControlActivated,
which is used to tint widgets -->
<item name="colorAccent">#color/accent</item>
<!-- ActionBar Text Style -->
<item name="titleTextStyle">#style/titleStyle</item>
</style>
<style name="ActionBarCompat" parent="Widget.AppCompat.ActionBar">
<item name="atitleTextStyle">#style/titleStyle</item>
</style>
<style name="titleStyle" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/action_bar_text_color</item>
</style>
</resources>
if you're using a Toolbar you can use the following code:
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/it.onecalculator"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:titleTextAppearance="#style/MyActionBarTitleText" />
where MyActionBarTitleText is:
<style name="MyActionBarTitleText" parent="#style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#color/white</item>
</style>