Search code examples
androidxmlandroid-layoutandroid-drawablexml-drawable

Strange Black border around drawable android XML


I am drawing custom header to input information in my app. I have drawn 2 shapes in xml and then positioned them in a layout. That layout is then put in my main layout using . However there is a black border that is drawn around each of the included headers. This seems to only be on api 21 devices. What is going on?

circle.xml

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/icon_background"
    android:shape="oval">
    <padding
        android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp" />
    <solid
        android:color="@color/color_primary"
        android:angle="270">
    </solid>
</shape>

line.xml

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="line">
    <stroke android:width="5dp"
        android:color="@color/color_primary"/>

    <size android:height="10dp" />
</shape>

Header layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_height="5dp"
        android:layout_width="match_parent"
        android:layout_alignParentStart="true"
        android:layout_marginTop="14dp"
        android:src="@drawable/line">
    </ImageView>

    <ImageView
        android:id="@+id/circle"
        android:layout_height="32dp"
        android:layout_width="32dp"
        android:src="@drawable/circle"
        android:layout_centerHorizontal="true">
    </ImageView>

    <ImageView
        android:id="@+id/header_icon"
        android:layout_height="32dp"
        android:layout_width="32dp"
        android:src="@drawable/ic_action_car"
        android:layout_centerHorizontal="true">
    </ImageView>

</RelativeLayout>

Included layout

<RelativeLayout

        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingLeft="@dimen/header_horizontal_margin"
        android:paddingRight="@dimen/header_horizontal_margin"
        android:paddingTop="@dimen/header_vertical_margin"
        android:paddingBottom="@dimen/header_vertical_margin">

        <include
            android:id="@+id/carSpecs"
            layout="@layout/header"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </include>

        <Spinner
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="@dimen/header_vertical_margin"
            android:paddingBottom="@dimen/header_vertical_margin"
            android:layout_gravity="center_horizontal"
            android:id="@+id/vehicleSpinner"
            android:layout_below="@+id/carSpecs"/> ...

Screenshot!


Solution

  • Figured it out! Using same basis as @Der Golem I removed the

    <size android:height="10dp" />
    

    from the line.xml. Since the stroke was half of the size I was receiving the border. Thanks for the help all!