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
Related
There are a million questions and articles out there about Android themes and styles - I've read half of them and I'm still going crazy.
All I want - and coming from a background in web app development with lovely, friendly old CSS stylesheets I thought this would be easy - is to create a theme for my app, and specify in that theme the colour for my toolbars (I'm specifying them per-Activity, which I think is the right thing to do after reading the official documentation).
So, in my styles.xml file I've got:
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:toolbarStyle">#style/MyToolbar</item>
</style>
<style name="MyToolbar" parent="Base.Widget.AppCompat.Toolbar">
<item name="android:textColor">#ffffff</item>
<item name="android:textColorPrimary">#ffffff</item>
<item name="android:elevation">4dp</item>
<item name="android:background">#color/colorPrimary</item>
</style>
To my mind, I have here created a style for my toolbars, then referenced that style in my theme. I have then set my theme as the application theme in AndroidManifest.xml:
android:theme="#style/MyTheme"
And for the most part, that works. There are other styles referenced in my theme, which I've omitted from my code for the sake of simplicity, and they work correctly - my buttons, textviews and so on are styled as per the styles I've created.
But the pesky toolbars are not. I've tried referecing my style directly in the toolbar xml (even though I don't see why I should need to if it's specified in the theme):
<android.support.v7.widget.Toolbar
android:id="#+id/main_activity_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/MyToolbar">
</android.support.v7.widget.Toolbar>
This, frustratingly, does cause the background colour of the toolbar to be as I want it, but the text remains black, even though I'm trying to make it white.
Have I misunderstood the way themes reference styles and are then applied to activities or the whole application? Is there something unique about toolbars? It's taken me longer to try and figure this out than to write the whole rest of the app from scratch, and it's my first Android app!
UPDATE:
Ok, so I've worked out that whilst my toolbar's background colour needs to be set in a style applied to the toolbar, to prevent that background colour being propogated to all child views, the desired text colour needs to specified in a theme because the text displayed in the toolbar is a child view (even though I can't see it in my activity's xml). So, this works:
styles.xml:
<style name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="android:buttonStyle">#style/MyButton</item>
<item name="android:editTextStyle">#style/MyEditText</item>
</style>
<style name="MyToolbarStyle" parent="Base.Widget.AppCompat.Toolbar">
<item name="android:elevation">4dp</item>
<item name="android:background">#color/colorPrimary</item>
</style>
<style name="MyToolbarTheme" parent="Base.Widget.AppCompat.Toolbar">
<item name="android:textColorPrimary">#ffffff</item>
</style>
main_activity.xml:
<android.support.v7.widget.Toolbar
android:id="#+id/main_activity_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
style="#style/MyToolbarStyle"
app:theme="#style/MyToolbarTheme">
</android.support.v7.widget.Toolbar>
So I guess I've achieved what I wanted, but I haven't answered my original question: why isn't the toolbar styling applied implicitly from my theme? Why do I have to declare it explicitly in the markup for my toolbar?
Do something like this:
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/main_activity_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/MyToolbar"
app:popupTheme="#style/TextStyle"/>
Additionally, read this information here to get an idea about style and theme. Refer this link here.
For me:
<item name="toolbarStyle">#style/MyToolbar</item>
instead of:
<item name="android:toolbarStyle">#style/MyToolbar</item>
works great.
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>
For some reason in my application, when using "Theme.AppCompat" as my style, it makes my Menus black text (which I set since I want black text) on a dark grey background, as shown here:
I have tried manually setting the menu's background color using a few online resources but none seem to be working. Does anyone know what might be causing the issue? Below is my style.xml, and as you can see, the two bottom elements in the main app theme entry are me trying to change the background color using things I've found online.
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat">
<item name="windowActionBar">false</item>
<item name="android:windowBackground">#color/white_primary</item>
<item name="android:textColor">#color/text_primary</item>
<item name="android:textSize">#dimen/text_size_medium</item>
<item name="colorAccent">#color/black_primary</item>
<item name="android:popupMenuStyle">#style/PopupMenuStyle</item>
<item name="android:panelFullBackground">#drawable/menu_full_bg</item>
</style>
<style name="PopupMenuStyle" parent="Theme.AppCompat.Light">
<item name="android:popupBackground">#android:color/white</item>
</style>
<drawable name="menu_full_bg">#FFFFFF</drawable>
You can change the background color of the popup menu as below.
Create a style in your styles.xml
<style name="PopupMenuStyle" parent="Theme.AppCompat.Light">
<item name="android:background">#android:color/white</item>
</style>
Set this theme as your toolbar popup theme in your toolbar.xml
<android.support.v7.widget.Toolbar
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
// Your code here
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/PopupMenuStyle" />
Hope this helps.
You can just use appNS to define the popupTheme as shown below.
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
What I did was I change my popUpTheme to DayNight so use
app:popupTheme="#style/ThemeOverlay.AppCompat.DayNight">
Refer this link
The accepted answer here worked for me. I am just repeating the same answer here again.
Add the following to your 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:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#color/toolbarbackground"
android:elevation="4dp"
app:popupTheme="#style/YOUR_THEME_HERE"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
In your styles.xml:
<style name="YOUR_THEME_HERE" parent="ThemeOverlay.AppCompat.Light">
<item name="android:colorBackground">#000000</item>
<item name="android:textColor">#ffffff</item>
</style>
The above style gives white font on a black background.
Credit to #Eugen Pechanec
I discourage this line:
<item name="android:background">#android:color/white</item>
as on my device the menu popup animation behaved rather ugly. Instead it was sufficient to just use this:
<style name="PopupMenuStyle" parent="Theme.AppCompat.Light">
</style>
I tried to add this into Toolbar:
app:popupTheme="#style/Theme.AppCompat.Light"
BUT at the Night mode the background will be white, and the text white too.
(this will helpful in only Day mode, or your app does not follow Day/Night switch)
Another tried, I add this style for menu popup, as Pojaa said above:
<style name="PopupMenuStyle" parent="Theme.AppCompat.Light">
<item name="android:background">#android:color/white</item>
</style>
BUT this create an effect: when you click the menu, it show the white background of popup menu first (the white background), and then show up the items, this very not good for user experience. Maybe Android change by time, the experience will different!
You SHOULD just try this for your wish:
app:popupTheme="#style/Theme.AppCompat.DayNight"
This is late answer, but hope it will help someone else!
Not sure if this's help. It may be a simpler solution. Within AppCompat - themes_base.xml you will find the section below.
<!-- Panel attributes -->
<item name="panelMenuListWidth">#dimen/abc_panel_menu_list_width</item>
<item name="panelMenuListTheme">#style/Theme.AppCompat.CompactMenu</item>
<item name="panelBackground">#drawable/abc_menu_hardkey_panel_mtrl_mult</item>
<item name="android:panelBackground">#android:color/transparent</item>
<item name="listChoiceBackgroundIndicator">#drawable/abc_list_selector_holo_dark</item>
Create a theme within your app and apply the colour.
<style name="Theme.Base" parent="#style/Theme.AppCompat.Light.DarkActionBar">
<item name="android:panelBackground">#android:color/black</item>
</style>
I try to style my v7.widget.Toolbar's menu radio buttons to use a custom drawable.
This works
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:listChoiceIndicatorSingle">#drawable/my_drawable</item>
</style>
But I guess this will change all of my apps radio buttons while I'd like to limit it to Toolbar only, so I am extracting to a custom theme and arrive to this:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:actionBarWidgetTheme">#style/MyAbTheme</item>
</style>
<style name="MyAbTheme" parent="Theme.AppCompat.Dark">
<item name="android:listChoiceIndicatorSingle">#drawable/my_drawable</item>
</style>
Now, the above doesn't work - I have material-ish radio buttons which are default.
I also tried to do this:
<android.support.v7.widget.Toolbar
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:background="#color/primary"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/MyAbTheme"
/>
(+ in styles.xml change parent to overlay like this)
<style name="MyAbTheme" parent="ThemeOverlay.AppCompat.Dark">
<item name="android:listChoiceIndicatorSingle">#drawable/my_drawable</item>
</style>
but this doesn't do anything too.
Any hints of how I would style only radio buttons in a Toolbar?
Regards the second attempt:
AppCompat does not have the Theme.AppCompat.Dark, or am I wrong?
can be related to property's value null <item name="actionBarWidgetTheme">#null</item> in values/theme_base.xml of AppCompat, but i cannot explain because. Maybe this property is not longer used.
have you tried with and without android: prefix?
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.