Custom titlebar has unwanted black border

Question

I am getting a black border around the edge of my custom title bar, which I don't want. Any ideas would be great. Here is the code for the title bar.

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="35sp"
android:gravity="center_vertical"
android:background="@color/TitleBlue">

<ImageView
    android:id="@+id/header"
    android:src="@drawable/app_icon_white"
    android:adjustViewBounds="true"
    android:layout_marginLeft="5sp"
    android:layout_marginBottom="1sp"
    android:padding="3sp"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"/>

<com.hdms.manager.Drawable.TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10sp"
    android:text="HDMS Manager"
    android:textColor="@android:color/white"
    android:textStyle="bold"/>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="right">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/circleIcon"
            android:src="@drawable/blank_circle"
            android:adjustViewBounds="true"
            android:layout_marginLeft="-8sp"
            android:padding="8sp"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"/>

        <com.hdms.manager.Drawable.TextView
            android:id="@+id/accessLevel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/circleIcon"
            android:layout_alignTop="@+id/circleIcon"
            android:layout_marginLeft="14sp"
            android:layout_marginTop="8sp"
            android:text=""
            android:textColor="@color/TitleBlue" />
    </RelativeLayout>

    <ImageView
        android:id="@+id/connectionModeIcon"
        android:src="@drawable/direct_on_lan"
        android:adjustViewBounds="true"
        android:layout_marginLeft="-8sp"
        android:padding="8sp"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"/>

    <ImageView
        android:id="@+id/connectedIcon"
        android:src="@drawable/tick_raw"
        android:adjustViewBounds="true"
        android:layout_marginLeft="-8sp"
        android:padding="8sp"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"/>

</LinearLayout>
</LinearLayout>

I am using custom TextView so that I can load my own TTF into the project. But that isn't the problem as the border is still there with a normal TextView.

This is the manifest file.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.hdms.manager"
android:versionCode="12"
android:versionName="0.35" >

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>

<uses-sdk
    android:minSdkVersion="12"
    android:targetSdkVersion="18" />

<application
    android:allowBackup="true"
    android:icon="@drawable/ic_launcher"
    android:label="@string/app_name"
    android:name="App"
    android:theme="@style/AppTheme" >

    <!-- Splash screen -->
    <activity
        android:name="com.hdms.manager.Drawable.SplashScreen"
        android:label="@string/app_name"
        android:screenOrientation="portrait"
        android:theme="@android:style/Theme.Black.NoTitleBar" >
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

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

    <!-- Main activity -->
    <activity
        android:name="com.hdms.manager.MainActivity"
        android:label="@string/app_name" >
    </activity>
</application>

</manifest>

And the relevant code from the styles.xml

<!-- Application theme. -->
<style name="AppTheme" parent="android:Theme.Light">
    <item name="android:windowTitleSize">35sp</item>
    <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>
    <item name="android:buttonStyle">@style/My.Button</item>
</style>

Colour from the colors.xml

<color name="TitleBlue">#008cb8</color>

The problem isn't seen if the colour is set to black.

Answer 1

For anyone interested. I got around this by declaring no title bar in the theme and adding the title bar to the main activity; and using a viewpager with fragments. So that the "title bar" is always visible.

New Style file

<style name="AppTheme" parent="android:Theme.Light.NoTitleBar">
     <item name="android:windowTitleSize">35sp</item>
     <item name="android:dropDownListViewStyle">@style/MyDropDownListView</item>
     <item name="android:buttonStyle">@style/My.Button</item>
 </style>

The New activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/mainView">

<include layout="@layout/titlebar"/>

<android.support.v4.view.ViewPager
    android:id="@+id/contentViewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1" />

 </LinearLayout>

Thanks for the effort guys.

Answer 2

// try this
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:gravity="center"
        android:layout_margin="5dp"
        android:layout_height="35dp">

    <ImageView
            android:id="@+id/header"
            android:src="@drawable/ic_launcher"
            android:adjustViewBounds="true"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"/>

    <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_marginLeft="5dp"
            android:gravity="center">
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="HDMS Manager"
                android:textColor="@android:color/white"
                android:textStyle="bold"/>

        <TextView
                android:id="@+id/accessLevel"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Access Level"
                android:textColor="@android:color/white"
                android:textStyle="bold"
                android:layout_marginLeft="5dp"/>
    </LinearLayout>
    <ImageView
            android:id="@+id/circleIcon"
            android:src="@drawable/ic_launcher"
            android:adjustViewBounds="true"
            android:layout_width="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_height="match_parent"/>

    <ImageView
            android:id="@+id/connectionModeIcon"
            android:src="@drawable/ic_launcher"
            android:adjustViewBounds="true"
            android:layout_width="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_height="match_parent"/>

    <ImageView
            android:id="@+id/connectedIcon"
            android:src="@drawable/ic_launcher"
            android:adjustViewBounds="true"
            android:layout_width="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_height="match_parent"/>

</LinearLayout>

Answer 3

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal"
  android:layout_width="fill_parent"
  android:layout_height="35sp"
  android:gravity="center_vertical"
  android:background="@color/TitleBlue"
  android:padding="0dp">

...
</LinearLayout>

Answer 4

I am not sure it works or not. Give a tried on it by remove gravity and set padding to 0sp

<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal"
  android:layout_width="match_parent"
  android:layout_height="35sp"
  android:background="@color/TitleBlue"
  android:padding="0dp">

...
</LinearLayout>

Answer 5

If you never figured this out, i had the same problem, but with me it was working ok on newer devices but on API 10 it wasnt, i fixed it with this:

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <item name="android:windowTitleSize">45dp</item>
    <item name="android:windowTitleBackgroundStyle">@style/WindowTitleBackground</item>
    <item name="android:windowNoTitle">false</item>
</style>

<style name="WindowTitleBackground" />

The important part is windowTitleBackgroundStyle. And the style you put it can just be empty. I have no idea why this works but it did work for me.