Home > Enterprise >  Are these 2 ConstraintLayouts equivalent?
Are these 2 ConstraintLayouts equivalent?

Time:11-09

Are these 2 situations in Constraint Layout equivalent?

First situation:

Attributes of element 1:

     android:id="@ id/view1"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"

Attributes of element 2:

    android:id="@ id/view2"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"

Second situation:

Attributes of element 1:

     android:id="@ id/view1"
     app:layout_constraintEnd_toEndOf="parent"
     app:layout_constraintStart_toStartOf="parent"

Attributes of element 2:

    android:id="@ id/view2"
    app:layout_constraintEnd_toEndOf="@ id/view1"
    app:layout_constraintStart_toStartOf="@ id/view1"

All the xml code:

First situation:

<androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

        <View
            android:id="@ id/view1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@color/blue"
            app:layout_constraintBottom_toTopOf="@ id/view2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:id="@ id/view2"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@color/black"
            app:layout_constraintTop_toBottomOf="@ id/view1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
             />
    </androidx.constraintlayout.widget.ConstraintLayout>

Second situation:

 <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <View
            android:id="@ id/view1"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@color/blue"
            app:layout_constraintBottom_toTopOf="@ id/view2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:id="@ id/view2"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@color/black"
            app:layout_constraintTop_toBottomOf="@ id/view1"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@id/view1"
            app:layout_constraintStart_toStartOf="@id/view1"
             />
    </androidx.constraintlayout.widget.ConstraintLayout>

In conclusion, is it the same to constraint both views to the same "thing" and to constraint one view to "something" and later constraining a second view to the first view? What situation is better implemented, First sutuation or Second situation?

CodePudding user response:

Currently both situations might give you same result.

But if in future you need to add another view(say view3) besides view1

Then in first situation it'll have no impact on view2, view2 will take full space i.e. parent width But in second situation, since view2 is dependant on view1, view2 will only take same width as taken by view1 and not the whole parent view.

I hope this helps in clearing your doubt.

CodePudding user response:

In one case you are constraining them to the parent and they in the same position regardles of each other. In the second case you are making View2 dependent on the View1

┌─────────────────────┐          ┌─────────────────────┐
│                     │          │                     │
│      ┌───────┐      │          │      ┌───────┐      │
│══════│ View1 │══════│          │══════│ View1 │══════│
│      └───────┘      │          │      └───────┘      │
│                     │          │      ║       ║      │
│      ┌───────┐      │          │      ┌───────┐      │
│══════│ View2 │══════│          │      │ View2 │      │
│      └───────┘      │          │      └───────┘      │
│                     │          │                     │
└─────────────────────┘          └─────────────────────┘

When is it gonna behave differently? If you move View1, View 2 moves too.

┌─────────────────────┐          ┌─────────────────────┐     
│                     │          │                     │     
│   ┌───────┐         │          │    ┌───────┐        │     
│═══│ View1 │═════════│          │════│ View1 │════════│     
│   └───────┘         │          │    └───────┘        │     
│                     │          │    ║       ║        │     
│      ┌───────┐      │          │    ┌───────┐        │     
│══════│ View2 │══════│          │    │ View2 │        │     
│      └───────┘      │          │    └───────┘        │     
│                     │          │                     │     
└─────────────────────┘          └─────────────────────┘      
  • Related