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>
Related
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
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 am working on creating an app with lollipop toolbar with translucent status bar to have the status bar also tinted. It is working fine with the
true property.
It is just that the toolbar is overlapping with the status bar now which looks messy. What is the option to position the toolbar below the status bar with maintaining the window translucent status?
Code Snippets :
<style name="Theme.XXX" parent="Theme.AppCompat">
<item name="colorPrimary">...</item>
<item name="colorPrimaryDark">...</item>
<item name="android:windowTranslucentStatus">true</item>
<item name="windowActionBar">false</item>
<item name="colorAccent">...</item>
</style>
Toolbar code used in activity:
<android.support.v7.widget.Toolbar
android:id="#+id/main_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/XXX"
android:elevation="5dp"
android:minHeight="?attr/actionBarSize"
android:theme="#style/Theme.XXX" />
Thanks in advance.
as Virus correctly says, the answer is here: Toolbar overlapping below status bar
Simply add the attribute
android:fitsSystemWindows="true"
into the xml item and it will work fine :)
I guess you are using fitSystemWindows property.
Turn off that.
May be your theme has this
<item name="android:statusBarColor">#android:color/transparent</item>
comment it out
In order to keep translucent status, you need to have
<item name="android:windowTranslucentStatus">true</item>
Just make the below false
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
and in your parent layout
android:fitsSystemWindows="true"
Just add this to v21/styles.xml file
<item name="android:windowDrawsSystemBarBackgrounds">false</item>
<item name="android:statusBarColor">#android:color/transparent</item>
Simply remove from all xmls, where it can be found, tag. fitsSystemWindows
Or set it to false.
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.