Custom Android appcompat Actionbar: how to remove bottom border on v11+ devices

StackOverflow https://stackoverflow.com/questions/20894928
 Checked

Question

I'm using the Android appcompat library to create a custom action bar. That all works. On devices not using the v11 theme (values folder) a bottom border does not appear as it should not. But when v11+ devices use the theme (in the values-v11 folder of course) there is a bottom border. It's a thin 1dp type border. I have a custom background applied for the actionbar and this all works on version < v11, just an annoying extra bottom border is added on v11+ devices ;-]

Now I found via another SO article where the user was using ActionBarSherlock that the base theme needed to be Theme.X and not theme.X.Light.x to resolve this issue (with no explanation as to why). I applied this same logic (I'm using android's appcompat, not sherlock one) and it worked for removing the border but then other style issues came up with radio buttons, etc, taking on the non-light theme. So I want to keep the base theme as 'Theme.AppCompat.Light' and get rid of the bottom border on the actionbar. Again, it doesn't show up on devices < v11.

Screen shots (Theme.AppCompat.Light/Theme.AppCompat):

My theme (same in values folder minus the android prefacing):

    <?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Application theme. -->
    <style name="ActionTheme" parent="@style/Theme.AppCompat.Light">           
        <item name="android:actionBarStyle">@style/ActionBarStyle</item>         
        <item name="android:windowActionBar">true</item>  
    </style>

   <style name="ActionBarStyle" parent="@style/Widget.AppCompat.ActionBar">     
       <item name="android:displayOptions"></item>           
        <item name="android:background">@drawable/header_style</item>         
         <item name="android:titleTextStyle">@style/ActionBarTitleText</item>  
        <item name="android:layout_height">wrap_content</item> 
        <item name="android:layout_width">wrap_content</item>   
        <item name="android:height">70dp</item> 
     </style>

    <style name="ActionBarTitleText" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/color_dark_blue</item>           
    </style>     
</resources>

Solution

Through the power of SO my question was finally answered! I tried everything the OP in the below link tried and more over the last two days. Somehow I didn't see this SO thread (I wasn't using search terms 'divider', methinks).

What worked for me was to have the no window overlay property set to null. I see that setting the window color may work on some higher version of android (4.2.x+) as well, so I decided to set both. Here is the SO link with the solution(s) to this nasty feature (bug?): link

My final values-v11/themes.xml -

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Application theme. -->
    <style name="ActionTheme" parent="@style/Theme.AppCompat.Light">           
        <item name="android:actionBarStyle">@style/ActionBarStyle</item>         
        <item name="android:windowActionBar">true</item>  
        <item name="android:windowBackground">@android:color/white</item> 
        <item name="android:windowContentOverlay">@null</item>
    </style>

   <style name="ActionBarStyle" parent="@style/Widget.AppCompat.ActionBar">     
       <item name="android:displayOptions"></item>           
        <item name="android:background">@drawable/header_style</item>         
         <item name="android:titleTextStyle">@style/ActionBarTitleText</item>  
        <item name="android:layout_height">wrap_content</item> 
        <item name="android:layout_width">wrap_content</item>   
        <item name="android:height">70dp</item>  
     </style>

    <style name="ActionBarTitleText" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
        <item name="android:textColor">@color/color_dark_blue</item>           
    </style>     
</resources>

OTHER TIPS

If user2545146 answer doesn't work on lollipop.

call setElevation on the actionbar from the activity.

getSupportActionBar().setElevation(0);

The only thing that worked for me was

AppBarLayout appBarLayout = findViewById(R.id.my_app_bar_layout);
appBarLayout.setOutlineProvider(null);

api >= 21 only

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow