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
Related
I am using Toolbar+NavigationDrawer with the Theme.AppCompat.
here is my style.xml:
<style name="BlueTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="drawerArrowStyle">#style/BlueTheme.DrawerArrowStyle</item>
<item name="colorPrimary">#color/primary</item>
<item name="colorAccent">#color/accent</item>
<item name="colorPrimaryDark">#color/primaryDark</item>
</style>
<style name="BlueTheme.DrawerArrowStyle" parent="Widget.AppCompat.DrawerArrowToggle">
<item name="color">#android:color/white</item>
</style>
but the drawer arrow still has a alpha and is not solid white.
Like this:
ScreenShot
(sorry i haven't have enough reputation to post images)
It seems that the drawerArrowStyle attribute doesn't work, I wonder if I made some mistakes. What can I do to change the DrawerToggler to solid white?
(ps: When I use origin ActionBar It works right, something turns wrong when I replace ActionBar to Toolbar)
(Forgive my poor English... )
I know this is old but I just faced the same problem.
Are you setting the custom toolbar theme in layout xml ?
You have to use app:theme instead of android:theme
Even though the drawerArrowStyle is set in App Theme, not ActionBar theme, it didn't work while I had the android:theme property set for the toolbar.
Once I changed it to app:theme it all started to work as documented.
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
I have created a custom ActionBar style, and when it is in portrait it looks as intended. For some reason though, when you rotate the screen to landscape the style is not applied and everything on the style bar is applied to a bright white composition. I can not figure out why it is doing this. There are no orientation differences and I have poked around in the documentation as well as Stack Over Flow in order to find something, but honestly I can't find much.
This is what my custom code looks like for my Action Bar and it works great in portrait.
<style name="Theme.Custom" parent="android:style/Theme.Holo.Light">
<item name="android:actionBarStyle">#style/ActionBar</item>
<item name="android:actionMenuTextColor">#color/defaultTextColor</item>
</style>
<style name="ActionBar" parent="#android:style/Widget.Holo.Light.ActionBar">
<item name="android:icon">#drawable/icon_trans</item>
<item name="android:background">#drawable/header</item>
<item name="android:titleTextStyle">#style/ActionBar.Text</item>
</style>
<style name="ActionBar.Text" parent="#android:style/TextAppearance">
<item name="android:textStyle">bold</item>
<item name="android:textColor">#color/defaultTextColor</item>
</style>
The problem was that I was using an XML file to define a gradient for my ActionBar and I did not place the xml file in the "drawable-land". Android will obviously not apply a style that is not there. Copying over the XML worked like a charm. So thank you for those who attempted to help!
I'm using ActionBarSherlock for an Android app I'm making, and am displaying an image on one of my screens. On this screen, I want the actionbar to go away and come back as the user presses on the screen without the image being stretched. This part I have working, but to do so I created the following style and applied it to that screen. . .
<style name="DarkActionBar.ActionBarOverlay" parent="#style/Theme.Sherlock">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
</style>
The problem is, now my action bar is transparent and I can't figure out why. If I change the parent of my style to Theme.Sherlock.Light.DarkActionBar, it is no longer transparent but doesn't look the same as Theme.Sherlock, so it will be inconsistent with the rest of my app.
I've also tried the following. . .
<style name="MyActionBar" parent="#style/Theme.Sherlock.Light.DarkActionBar">
<item name="android:background">#color/black</item>
<item name="background">#color/black</item>
</style>
<style name="DarkActionBar.ActionBarOverlay" parent="#style/Theme.Sherlock">
<item name="android:windowActionBarOverlay">true</item>
<item name="windowActionBarOverlay">true</item>
<item name="android:actionBarStyle">#style/MyActionBar</item>
</style>
Can anyone tell me why the windowActionBarOverlay items are making my actionbar transparent, and what I can do to fix it? Thank you.
As the transparent ActionBar is a feature called "Actionbar Overlay", I think the problem is inside this line:
<item name="windowActionBarOverlay">true</item>
You may need to set it to false.
Please have a read of the following paragraph:
To enable overlay mode for the action bar, you need to create a custom
theme that extends an existing action bar theme and set the
android:windowActionBarOverlay property to true
Also please have a look at Overlaying the Actionbar on Android Developers
After hours of trying I finally found a method to separate the actionbar tabbar from the actionbar manualy.
actionbar convert tabs to list navigation if there is no room
But now there is one problem left. The tabs don't fill the tabbar.
EDIT
The tabs are added to the actionbar by:
ActionBar.Tab relatieTab = actionBar.newTab().setText("Relaties");
actionBar.addTab(relatieTab);
Try to switch the parent. If that doesn't work try visiting this post: Stacked ActionBar tab bar not filling parent
Good luck :)
Use the following to customize the tabs in action bar:
<style name="MyAppActionBarTabStyle" parent="#android:style/Widget.ActionBar.TabView">
<item name="android:background">#drawable/actionbar_tabindicator</item>
<item name="android:minWidth">40dip</item>
<item name="android:maxWidth">40dip</item>
<item name="android:layout_width">0dip</item>
<item name="android:layout_weight">1</item>
</style>
Make sure that the activity where you are setting these navigation tabs has the following in its #android:theme
<style name="MyAppTheme" parent="android:style/Theme.Holo.Light">
<item name="android:actionBarTabStyle">#style/MyAppActionBarTabStyle</item>
</style>
I still could not figure how how to detect whether the tabbar is separate i.e. below main action bar or merged (when in landscape OR larger screens even in portrait)
Another interesting thing to know is how to prevent tab bar from collapsing to a spinner when space is not enough.
As and when I find out answers to my questions above, will update the post. Until then hope the styles help few other ppl
I just solved this problem today.
They key was using <item name="android:padding">0dp</item> like so...
<style name="MyActionBar"
parent="#android:style/Widget.Holo.Light.ActionBar">
</style>
<style name="LoginActionBar"
parent="#style/MyActionBar">
<item name="android:actionBarTabStyle">#style/LoginActionBarTabs</item>
</style>
<style name="LoginActionBarTabs"
parent="#android:style/Widget.Holo.ActionBar.TabView">
<item name="android:padding">0dp</item>
</style>
You don't need that many styles, but I didn't want to take any chunks out, which may have lead to confusion.
I also see that you already worked around this, but I figured I'd add my answer for the next person to come looking for this.