I am using the android support library ToolBar and would like to use the same background color to match the ActionBar.
I looked in the support library souce code and found the ActionBar style I want to use:
<style name="Base.Widget.AppCompat.Light.ActionBar.Solid">
<item name="background">?attr/colorPrimary</item>
<item name="backgroundStacked">?attr/colorPrimary</item>
<item name="backgroundSplit">?attr/colorPrimary</item>
</style>
But when I put it in my layout as a style to the toolbar, it doesn't work:
<android.support.v7.widget.Toolbar
android:id="#+id/actiontoolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
style="#style/Base.Widget.AppCompat.Light.ActionBar.Solid"
/>
However, if I just use "android:background" instead of "style" then it works:
android:background="?attr/colorPrimary"
Does anyone know why it doesn't work when I reference the support library style in the toolbar layout. I am using appcompat 22.2.0 in AndroidStudio.
I've also tried the following and they don't work either:
android:theme="#style/Base.Widget.AppCompat.Light.ActionBar.Solid"
app:theme="#style/Base.Widget.AppCompat.Light.ActionBar.Solid"
It is because the toolbar requires a theme. Firstly define your color attributes in a theme with appcompat parent.
<style name="MyTheme" parent="Theme.AppCompat">
<item name="background">#color/colorPrimary</item>
<item name="backgroundStacked">#color/colorPrimary</item>
<item name="backgroundSplit">#color/colorPrimary</item>
</style>
Just to make sure, make use of color values.
In toolbar
app:theme="#style/MyTheme"
Also, make sure you have
xmlns:app="http://schemas.android.com/apk/res-auto"
IDE may ask you to auto correct this
The final look of your toolbar will be
<android.support.v7.widget.Toolbar
android:id="#+id/actiontoolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:theme="#style/MyTheme"
/>
And as for an update from Gabriele: With appcompat 22.1.0 you can use
android:theme
Related
I want to change the background colour for MaterialCardView using the style.xml file. It would really help with implementing "Dark mode"in my Android app.
I have tried dynamically doing but would prefer this done using the theme.
Create your custom style for MaterialCardView that extends Widget.MaterialComponents.CardView:
<style name="YourCardView" parent="Widget.MaterialComponents.CardView">
<item name="cardBackgroundColor">#color/your_color</item>
</style>
Then you can set this style manually to your single MaterialCardView in xml layout:
<com.google.android.material.card.MaterialCardView
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/YourCardView">
<!-- card content -->
</com.google.android.material.card.MaterialCardView>
Or you can set the style for all MaterialCardViews within your custom theme (that extends a theme from MaterialComponents):
<style name="YourTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="materialCardViewStyle">#style/YourCardView</item>
</style>
Actually, I got it working by adding the attribute
app:cardBackgroundColor="#color/colorAccent"
Of course, you have to define the app namespace, that goes by the following:
xmlns:app="http://schemas.android.com/apk/res-auto"
Widget.MaterialComponents.CardView can be styled just alike any other component:
<style name="CustomCardView" parent="Widget.MaterialComponents.CardView">
<item name="cardBackgroundColor">?attr/colorSurface</item>
</style>
Changing colorSurface, which defaults to #FFFFFF, might be rather effective for a dark theme.
see the documentation, which also explains how to apply it to all instances.
Inside values/styles.xml I have set <item name="elevation">0dp</item> to my AppTheme style. and inside values-21/styles.xml I have set <item name="android:elevation">0dp</item> and I Have also try this
<item name="android:windowContentOverlay">#null</item>.I have also try to Clean the Project and Rebuild the Project. and also try to Invalidate Caches and Restart. But my Emulator still display shadow see the below screen.
Question :
How to remove that shadow below to ActionBar.
ScreenShot :
If this is a pure ActionBar, and not a Toolbar. This is how you do it :
<style name="MyAppTheme" parent="Theme.AppCompat.Light">
<item name="actionBarStyle">#style/FlatActionBar</item>
</style>
<style name="FlatActionBar" parent="Widget.AppCompat.Light.ActionBar.Solid">
<item name="elevation">0dp</item>
</style>
I don't know why elevation is not work in style. but When I set it programatically It's just work fine.
getSupportActionBar().setElevation(0);
Output :
Put your toolbar in this.
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
...
</android.support.design.widget.AppBarLayout>
I am using the appcompat v22 toolbar widget
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:popupTheme="#style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
I want a light themed popup menu ( white background with black text ) Problem is the popup menu is always turning out be dark themed (looks like it is picking the styles from ThemeOverlay.AppCompat.Dark.ActionBar and setting android:popupTheme="#style/ThemeOverlay.AppCompat. Light" is not making any difference.
The problem occurred when I moved from app:theme to android:theme ( that's what is recommended if we need to use appcompat v22 version
I tried overriding the style and setting many values within the style
<style name="ToolBarPopUpTheme" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">#ffffff</item>
<item name="android:textColor">#ffffff</item>
<item name="android:textColorPrimary">#ffffff</item>
<item name="android:colorForeground">#ffffff</item>
<item name="colorControlNormal">#ffffff</item>
<item name="android:windowBackground">#ffffff</item>
</style>
But in vain, any idea how to get a light themed Popup menu in the ActionBar ?
Thanks,
You want to go back to app:popupTheme.
If you look at the source code for Toolbar.java you'll see the following on line 263.
setPopupTheme(a.getResourceId(R.styleable.Toolbar_popupTheme, 0));
R in this case is android.support.v7.appcompat.R (check out line 32), so the Toolbar is using the app: namespace for its attributes and not the android: namespace.
Out of curiosity, where did you read that you should be using the android:theme attribute?
As far as i see you are using the wrong parent style.
Give this a try:
<style name="ToolBarPopUpTheme" parent="#style/ThemeOverlay.AppCompat.Light" />
In the Design Support Library (V 22.2.0), I am having issues setting the expandedTitleTextAppearance and collapsedTitleTextAppearance properties of the CollapsingToolbarLayout .
For example if I set it like this:
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:expandedTitleTextAppearance="#style/TransparentText"
>
and the styles look like this:
<style name="TransparentText">
<item name="android:textColor">#00000000</item>
</style>
<style name="GreyText">
<item name="android:textColor">#666666</item>
</style>
The text does not show but when I try to expand the toolbar after it collapses the app will crash on Android 4.1 .
And if I set it to this:
app:expandedTitleTextAppearance="#style/TransparentText"
app:collapsedTitleTextAppearance="#style/GreyText"
It no longer crashes but the text does not show when it collapses.
It looks like the styles used for setting expandedTitleTextAppearance and collapsedTitleTextAppearance must extend from TextAppearance.
So everything will work properly if the styles are changed to this:
<style name="TransparentText" parent="#android:style/TextAppearance">
<item name="android:textColor">#00000000</item>
</style>
<style name="GreyText" parent="#android:style/TextAppearance">
<item name="android:textColor">#666666</item>
</style>
By the way, since TextView works properly when you set android:TextAppearance without explicitly extending #android:style/TextAppearance, I have logged this as a bug: https://code.google.com/p/android/issues/detail?id=178674
I have been banging my head over this for some time now without any luck.
I am using the android.support.v7.widget.Toolbar in my App (which supports Android API 11 and above), and want to style it. Here is how I am trying it:
My Activity Layout XML contains:
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="?attr/foo" />
res/values/attr.xml contains (this is where I define my attributes):
<attr name="foo" format="reference" />
res/values/Themes.xml:
<style name="AppTheme" parent="Theme_one">
</style>
<style name="Theme_one" parent="#style/Theme.AppCompat.Light">
<item name="windowActionBar">false</item>
<item name="foo">#style/foo_style</item>
<!-- bunch of other styles -->
</style>
res/values/Styles.xml:
<style name="foo_style" parent="#style/Theme.AppCompat.Light">
<item name="android:background">#color/actionBarDark</item>
</style>
res/values-v21/Themes.xml:
<style name="AppTheme" parent="Theme_one">
<!-- some v21 specific items not related to toolbar like animations etc-->
</style>
res/values-v21/Styles.xml:
<style name="foo_style" parent="#style/Theme.AppCompat.Light">
<item name="android:colorPrimaryDark">#color/actionBarDark</item> <!-- THIS DOES NOT WORK !!! -->
<item name="android:background">#color/actionBarDark</item>
<item name="android:elevation">5dp</item>
</style>
This arrangement works fine for Android API v11 to v19.
My issues for v21 (I also tried 2 and 3 without the android: prefix with same result):
1) android:background works fine!
2) android:colorPrimaryDark does not work!
3) android:elevation applies to the title of the Toolbar and the Toolbar buttons as below. Is this expected?
What am I missing? Clearly I am not doing the styling the correct way, but unable to find any resources which talk about toolbar styling!
I got colorPrimaryDark to work by by moving the:
<item name="colorPrimaryDark">#color/actionBarDark</item>
from res/values-v21/Styles.xml to res/values-v21/Themes.xml.
I got the elevation to work by removing it from all styles or theme xmls, and putting it in the android.support.v7.widget.Toolbar declaration.
Also, If I define another theme here and change it dynamically in the app using Content.setTheme(), the theme changes but the status bar color does not. Any suggestions are welcome.