4

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

Result view with padding

If I remove

android:padding="10dp"

from the ConstraintLayout, it's working as expected.

Result view without padding

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
Arun Kumar Nagarajan
  • 2,347
  • 3
  • 17
  • 28
  • 1
    "it's working as expected" - what is expected. What is wrong? – Zoe Apr 14 '17 at 20:42
  • The expectation is a chain of 3 circles. But I'm unable to see anything in the preview. Nothing shows up. I've updated the question. Thanks for the comment – Arun Kumar Nagarajan Apr 14 '17 at 20:44
  • "But I'm unable to see anything in the preview" -- do not rely upon the preview. Run the app. If the problem is only in the preview, then your problem is a buggy IDE. – CommonsWare Apr 14 '17 at 20:48
  • @CommonsWare, Thanks a lot. I just verified. This is working in the device. However, I still have trouble getting the original layout to work. I'll edit the question with another condensed version of the xml that has the problem while running in the device – Arun Kumar Nagarajan Apr 14 '17 at 20:58
  • @CommonsWare, I've updated the question now. When I remove that EditText, it's working. And when I remove the padding from the Constraint Layout it's working. Could you please help me with this? Thanks a lot – Arun Kumar Nagarajan Apr 14 '17 at 21:23
  • We don't know what "not working" means for your revised layout. You might consider taking some screenshots and uploading them somewhere. One oddity that I see is that you seem to have duplicate constraints. For example, you have two constraints tying the bottom of the first circle to the top of the second one. You should not need that, and it would not surprise me if having duplications causes problems. – CommonsWare Apr 14 '17 at 21:30
  • @CommonsWare, Thanks for the response. I have updated the question with screenshots. And could you please let me know where I have the duplicate constraints? Do you mean the one where I have the bottom constraint of the first circle tied with the top of the second circle and at that same time, the top constraint of the second circle tied to the bottom of the first one? But that is how we create chains in constraint layout, right? – Arun Kumar Nagarajan Apr 14 '17 at 21:37
  • Oh, right, I keep forgetting about chains, sorry about that. You might try Layout Inspector in Android Studio to see where your widgets are winding up. – CommonsWare Apr 14 '17 at 21:42
  • @Commonsware, Thanks, I'll try using Layout Inspector. Will post what I find – Arun Kumar Nagarajan Apr 14 '17 at 21:49
  • @CommonsWare, Layout Inspector is not proving useful. It's showing the widgets in random places. I'll keep looking. – Arun Kumar Nagarajan Apr 14 '17 at 22:01

2 Answers2

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

Zoe
  • 27,060
  • 21
  • 118
  • 148
  • Thanks a lot for the reply. This works. However, as I have mentioned, my original layout is a complex one and mimicking this requires that I add this padding for multiple children views. I would like to know why this is not working as-is. – Arun Kumar Nagarajan Apr 14 '17 at 20:48
  • (This is a guess, but) considering ConstraintLayout uses constraints, it is possible you have to remove all constrains, add the padding and reconstrain the views. – Zoe Apr 14 '17 at 20:50
  • As Commonsware mentioned, this is working in the device. I'll edit the question in a while with another version of the xml that has the problem while running in the device. Thanks – Arun Kumar Nagarajan Apr 14 '17 at 20:59
1

TL;DR

I discovered that as a rule of thumb, when you want to place view B below view A, make sure that A has constraintTop_toBottomOf="view_above_me" and not constraintTop_toTopOf="view_beside_me"

For me the problem solved like this:

You have 4 views: view1, view2a, view2b, view3 such that view1 is on top, view2a and view2b are below it and view2b is right of view2a, and view3 below them.

view1 has layout_constraintTop_toTopOf="parent"

view2a has layout_constraintBottom_toTopOf="@id/view1"

view2b has layout_constraintTop_toTopOf="@id/view2a"

view3 has layout_constraintTop_toBottomOf="@id/view2b

This will create the problem. The solution is to replace view3 constraint to the following: layout_constraintTop_toBottomOf="@id/view2a"

Note that view2b has a constraint to view2a top, and not to view1 bottom, and therefore the padding hidden my view3.

nbtk
  • 3,039
  • 4
  • 21
  • 19