View disappears when padding is added in constraint layout android

Question

I'm trying to create a vertical chain of four circles using ConstraintLayout. It renders well until I add padding to the ConstraintLayout at which point, the entire view goes missing.

Contents of my layout file is as follows

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_input_spot_from_to_cl"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    android:padding="10dp">

    <ImageView
        android:id="@+id/circle1_iv"
        android:layout_width="10dp"
        android:layout_height="10dp"
        app:layout_constraintBottom_toTopOf="@+id/circle2_iv"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/circle" />


    <ImageView
        android:id="@+id/circle2_iv"
        android:layout_width="4dp"
        android:layout_height="4dp"
        app:layout_constraintBottom_toTopOf="@+id/circle3_iv"
        app:layout_constraintLeft_toLeftOf="@+id/circle3_iv"
        app:layout_constraintRight_toRightOf="@+id/circle3_iv"
        app:layout_constraintTop_toBottomOf="@+id/circle1_iv"
        app:srcCompat="@drawable/circle" />

    <ImageView
        android:id="@+id/circle3_iv"
        android:layout_width="4dp"
        android:layout_height="4dp"
        app:layout_constraintBottom_toTopOf="@+id/circle4_iv"
        app:layout_constraintLeft_toLeftOf="@+id/circle4_iv"
        app:layout_constraintRight_toRightOf="@+id/circle4_iv"
        app:layout_constraintTop_toBottomOf="@+id/circle2_iv"
        app:srcCompat="@drawable/circle" />

    <ImageView
        android:id="@+id/circle4_iv"
        android:layout_width="10dp"
        android:layout_height="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/circle3_iv"
        app:srcCompat="@drawable/circle" />

    <EditText
        android:id="@+id/main_input_spot_from_et"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="14dp"
        android:layout_marginStart="14dp"
        android:background="#00000000"
        android:ellipsize="end"
        android:hint="From Station"
        android:inputType="textAutoComplete"
        android:paddingRight="6dp"
        android:textSize="15sp"
        app:layout_constraintBottom_toBottomOf="@+id/circle1_iv"
        app:layout_constraintLeft_toRightOf="@+id/circle1_iv"
        app:layout_constraintTop_toTopOf="@+id/circle1_iv" />

</android.support.constraint.ConstraintLayout>

circle.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/black" />
    <corners android:radius="300dp" />
</shape>

The output that I see is

If I remove

android:padding="10dp"

from the ConstraintLayout, it's working as expected.

Also, if I remove the left and right constraints from circle 3, it's working fine. However, This is a very condensed version of what I have in my app. I tried removing the left and right constraints from circle3 there, but it's still not working. And I need the padding there. If anyone can let me know why it's behaving this way here, it'll be helpful in solving the original problem.

Answer 1

Try, instead of defining padding in the layout, define padding for each view. Meaning you move

android:padding="10dp" 

To whatever imageViews you want padding on