Custom view layout line overstriking other elements in API 16

Question

The problem:

What I need:

Everything works fine on API 23, but in API 16 I get this problem running it in emulator. Android Studio also shows the correct layout on the device screen.

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardview="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    cardview:cardCornerRadius="2dp"
    cardview:cardElevation="4dp"
    style="@style/AppTheme"
    cardview:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="3dp"
        android:orientation="horizontal">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="8dp">

            <TextView
                android:id="@+id/tv_compra_header_titulo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_marginTop="4dp"
                android:text="ETAPA"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:visibility="gone" />

            <ImageView
                android:id="@+id/iv_compra_one"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:background="@drawable/ic_looks_one_black_24dp"

                android:backgroundTint="@android:color/tab_indicator_text" />

            <View
                android:id="@+id/view_compra_header_one"
                android:layout_width="wrap_content"
                android:layout_height="3dip"
                android:layout_alignParentEnd="false"
                android:layout_alignParentStart="false"
                android:layout_centerVertical="true"
                android:background="@color/secondaryText"
                android:layout_toEndOf="@+id/iv_compra_one"
                android:layout_toStartOf="@+id/iv_compra_two" />

            <ImageView
                android:id="@+id/iv_compra_two"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"
                android:layout_gravity="center"
                android:background="@drawable/ic_looks_two_black_24dp"
                android:backgroundTint="@android:color/tab_indicator_text" />

            <View
                android:id="@+id/view_compra_header_two"
                android:layout_width="wrap_content"
                android:layout_height="3dip"
                android:layout_alignParentEnd="false"
                android:layout_alignParentStart="false"
                android:layout_centerVertical="true"
                android:background="@color/secondaryText"
                android:layout_toStartOf="@+id/iv_compra_three"
                android:layout_toEndOf="@+id/iv_compra_two" />


            <ImageView
                android:id="@+id/iv_compra_three"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignParentEnd="false"
                android:layout_alignParentRight="true"
                android:layout_alignParentTop="true"
                android:background="@drawable/ic_looks_3_black_24dp"
                android:backgroundTint="@android:color/tab_indicator_text" />
        </RelativeLayout>
    </LinearLayout>
</android.support.v7.widget.CardView>

Answer 1

Keep in mind that Android API level 16 does not support the start and end attributes as those were introduced in API level 17. Thus those are just ignored.

Just add the equivalent left and right attributes to make the layout work on API level 16 and below.