Strange divider with the v7 support actionbar

Question

The used theme for the actionbar is Theme.AppCompat.Light when using Theme.Holo the issue does not exists.

I am using a custom view for the support v7 actionbar:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white" >

</LinearLayout>

And I get the following result :

How do I remove the black line/divider between the layout and the actionbar.

I have tried changing the actionbar style but with not much of a success.

<resources>

    <style name="Theme.Styled" parent="@style/Theme.AppCompat.Light">

        <!-- Setting values in the android namespace affects API levels 14+ -->
        <item name="android:actionBarStyle">@style/Widget.Styled.ActionBar</item>
    </style>

    <style name="Widget.Styled.ActionBar" parent="@style/Widget.AppCompat.Light.ActionBar">
        <item name="dividerVertical">@null</item>
        <item name="android:background">@null</item>
        <item name="android:paddingTop">0dp</item>
        <item name="android:paddingBottom">0dp</item>
        <item name="android:showDividers">none</item>
        <item name="android:background">@null</item>
        <item name="android:divider">@null</item>
        <item name="android:dividerHeight">0dp</item>
        <item name="android:dividerPadding">0dp</item>
    </style>

</resources>

Here is my Activity Source:

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayShowTitleEnabled(false);
        actionBar.setDisplayShowHomeEnabled(false);
        actionBar.setDisplayShowCustomEnabled(true);
        actionBar.setCustomView(R.layout.actionbar);
        actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);

    }


}

This is the manifest:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.actionbartest"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/Theme.Styled" >
        <activity
            android:name="com.example.actionbartest.MainActivity"
            android:label="@string/app_name"
             >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Answer 1

You're probably looking for the android:windowContentOverlay attribute.

To remove that drop shadow, simply set the value to @null in your theme, like so:

<style name="Theme.Styled" parent="@style/Theme.AppCompat.Light">
    <!-- Setting values in the android namespace affects API levels 14+ -->
    <item name="android:actionBarStyle">@style/Widget.Styled.ActionBar</item>

    <item name="android:windowContentOverlay">@null</item>
</style>

Answer 2

How do I remove the black line/divider between the layout and the actionbar.

I think you are mistaken. There really isn't a divider present. To confirm:

Open the layout file you're using with setContentView(R.layout.activity_main). Whatever the base container is, set its background to the color you use with the ActionBar. For example, let's say that the base container is a LinearLayout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white" >      <<<====== Add this

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

</LinearLayout>

You'll see that the ActionBar now blends with the activity's view.

What you are currently seeing is a gradient defined as:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:startColor="#ffe8e8e8"
    android:endColor="#ffffffff"
    android:angle="270" />
</shape>

Here's where the background comes from:

(taken from platforms/android-17/data/res/values/themes.xml)
<style name="Theme.Light">
    <item name="windowBackground">@android:drawable/screen_background_selector_light</item>
    ....

To get rid of it, you can either give your base container a background color, or override this attribute's value in your project's res/values/themes.xml:

<style name="AppBaseTheme" parent="android:Theme.Holo.Light">

</style>

<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
    <item name="android:windowBackground">@android:color/white</item>        
</style>

Edit:

This is the project setup:

res/layout/activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:context=".MainActivityCompat" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>

res/values/styles.xml

<resources>

    <style name="AppBaseTheme" parent="@style/Theme.AppCompat.Light">

    </style>

    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">

    </style>

</resources>

AndroidManifest.xml:

<uses-sdk
    android:minSdkVersion="7"
    android:targetSdkVersion="14" />

<application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme" >
    <activity
        android:name="com.example.trialcompat.MainActivityCompat"
        android:label="@string/app_name" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

MainActivityCompat.java:

import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBarActivity;

public class MainActivityCompat extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayShowTitleEnabled(false);
        actionBar.setDisplayShowHomeEnabled(false);
        actionBar.setDisplayShowCustomEnabled(true);
        actionBar.setCustomView(R.layout.actionbar);
        actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
    }
}

R.layout.actionbar is the same as the one you have posted in the question. And this is the result:

As you can see, I cannot reproduce the divider issue. Am I missing something here?

Answer 3

Beside @Vikram answer, add this to the theme:

<item name="android:windowContentOverlay">@android:color/white</item>

Recommendation: Use the same color you use on your layouts. For the default one, use @null

Hope this helps.

Answer 4

I had the same issue. After lots of trials and fails I found that the bug was because of the 9patch background of the action bar. I switched the 9patch with a regular image and the black line was gone.