Android : Toolbar status bar overlapping - android

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.

Related

Set elevation still display shadow below ActionBar in Android

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>

change android toolbar popup menu theme from dark to light

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" />

Android menu background black with Theme.AppCompat?

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>

Get rid of ActionBar shadow over SlidingTabLayout

I'm porting my app to appcompat21, using SlidingTabLayout for tabs in an ActionBarActivity. The Action bar is casting a shadow over the tab strip, and I can't figure out how to get rid of it:
Here's what I have:
<style name="MyActionBar" parent="#style/Widget.AppCompat.ActionBar">
<item name="background">#color/app_primary</item>
<item name="android:background">#color/app_primary</item>
<item name="backgroundSplit">#color/black</item>
<item name="android:backgroundSplit">#color/black</item>
<item name="android:elevation">0dp</item>
</style>
I've also tried
<item name="android:windowContentOverlay">#null</item>
I got the shadow under the tab bar by setting its elevation in the layout file, but now I have two shadows...
Any idea how to fix this?
For some reason, this did not work for as well:
<item name="android:elevation">0dp</item>
and:
<item name="android:windowContentOverlay">#null</item>
I am currently using, for ActionBar:
this.getSupportActionBar().setElevation(0);
When working with "Elevation", objects can be different elevations from one another, giving shadows to anything underneath them.
If you set your toolbar and the tabs layout the same elevation it will fix the issue.
Add app:elevation="0dp" on .support.design.widget.AppBarLayout. This will solve the issue.
You could also try putting
<item name="elevation">0dp</item>
without the "android:", this would spare you the pain of setting the elevation every time you start an activity

Remove shadow between Actionbar and Tab

My app is using an own style which I made with the Android Action Bar Style Generator (Style compatibility = AppCombat). The color of the Actionbar and the tab are the same but the problem is that there is a shadow between them. How can I remove this shadow?
<style name="MyAppTheme" parent="android:Theme.Holo.Light">
<item name="android:windowContentOverlay">#null</item>
"android:windowContentOverlay" is removing the shadow below the tab and not above.
Ok here's the solution by Audren Teissier which worked for me:
It's because you are using a drawable instead of a color.look for something like this:
<style name="MyActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
<item name="android:background">#color/yourcolor</item>
</style>
Replace the drawable by a color like above and it should go away.
Use the below property in your AppBarLayout
app:elevation="0dp"
Use the below code in your fragment
getSupportActionBar().setElevation(0);
The shadow on the status bar is system set and cannot be removed, however the status bar that you are referring to is inside of Theme.Holo.Light. To my knowledge it cannot be removed.
Hope I have understood your question correctly, that is you want to in a way merge the action bar with the tabs so there is no border in between -> the line or shadow you mentioned. If that is correct, then this is what you are looking for:
Add this to your MyAppTheme:
<item name="android:actionBarStyle">#style/LineRemover</item>
and change this line:
<item name="android:windowContentOverlay">#null</item>
to this:
<item name="android:windowActionBarOverlay">true</item>
and then add the following style below:
<style name="LineRemover" parent="android:Widget.Holo.ActionBar">
<item name="android:background">#android:color/transparent</item>
</style>
In the end you have something like this:
<style name="MyAppTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/LineRemover</item>
</style>
<style name="LineRemover" parent="android:Widget.Holo.ActionBar">
<item name="android:background">#android:color/transparent</item>
</style>
I guess you are aware that you have to register your theme in the android manifest (within your activity or application tags:
android:theme="#style/MyAppTheme" >
Please remember to mark this as your accepted answer if this helped you :)
if you set the tab layout elevation Remove.its working fine

Categories

Resources