Position view outside of ConstraintLayout

Question

I want to position views outside of a ConstraintLayout to animate them with a sliding animation. I've tried setting contraints like constraintBottom_toTopOf="parent" but the View stays inside the container.

Note that I want to achieve this with constraints to use built-in animations, not with in-code animations.

Any idea how I could do this ?

I'm using compile 'com.android.support.constraint:constraint-layout:1.1.0-beta1' with Android Studio 3.0 Beta 7

This is a simple xml file that should place the view outside of the container :

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@color/colorAccent">

    <View
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toTopOf="parent"/>


</android.support.constraint.ConstraintLayout>

But this is the result

I have never tried it but what about varing the bias from 0 to 1? — Juan, Oct 16 '17 at 12:49
Post which version of `ConstraintLayout` you are using. Make sure that you aren't defining additional constraints that will pull the view back into the layout. Also, seeing the XML would be helpful. — Cheticamp, Oct 16 '17 at 14:16
I was able to make this work by setting padding and clipToPadding="false" I have an ImageView that I position horizontally by percent relative to a Guideline and I need it to work in the range of 0 - 1. When at the right/left edge of the ConstraintLayout the imageView was being clipped in half. By setting rightPadding and leftPadding for the ConstraintLayout to half the width of the ImageView it's not being clipped anymore (and the percent positioning is still working). — PhoneyDeveloper, Feb 14 '20 at 21:12

Cheticamp · Accepted Answer · 2017-10-16T18:35:59.260

5

This appears to be an issue with ConstraintLayout 1.1.0-beta1; It works as expected in ConstraintLayout 1.1.0-beta3.

Update to ConstraintLayout 1.1.0-beta3. I will also note that you need to constrain your view horizontally by doing something like the following.

<View
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:background="@color/colorPrimary"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toTopOf="parent" />

On a side note, negative margins are not accepted in ConstraintLayout. See this Stack Overflow question regarding negative margins and ConstraintLayout.

edited Oct 16 '17 at 18:35

answered Oct 16 '17 at 18:22

Cheticamp

50,205
8
64
109

I accepted this answer because it solved this particular problem, but know that it brings back an old problem where the `ConstraintLayout` is messed up inside a nestedScrollView – David Seroussi Oct 16 '17 at 20:11
@DavidSeroussi I am sorry to hear that another issue has popped up. You can post a question addressing that nested scroll view issue with the XML that is causing the problem. – Cheticamp Oct 16 '17 at 20:18

score 2 · Answer 2 · answered Mar 09 '18 at 06:59

I got another way to solve the problem:

1.Add a anchor(anchor_left) layout_constraintStart_toStartOf="parent".

2.Add YourView layout_constraintEnd_toStartOf="@+id/anchor_left"

That's it!

code:

<android.support.constraint.ConstraintLayout>
    <View
        android:id="@+id/anchor_left"
        app:layout_constraintStart_toStartOf="parent"/>

    <YourView
        android:id="@+id/ll_left"
        app:layout_constraintEnd_toStartOf="@+id/anchor_left"/>
</android.support.constraint.ConstraintLayout>

anchor view also worked for me. I just control the anchor view instead the view instead. putting a constraint directly to the `parent` makes it go outside the parent but it sticks to only that position — Mon, Dec 05 '19 at 03:26

score 1 · Answer 3 · answered Oct 16 '17 at 13:26

1

In every view you can use negative margin, which will put the view outside of the parent view, and then set the clipping parameters.

android:clipChildren="false"
android:clipToPadding="false"

this will make the view not to clip.

answered Oct 16 '17 at 13:26

Zayid Mohammed

1,985
2
8
16

Negative margins don't work in constraint layouts which were mentioned in the question. – Code Novitiate Dec 13 '19 at 00:19

score 0 · Answer 4 · answered Jul 25 '18 at 08:22

What I did is:

created a view of 0dp height inside the ConstraintLayout, e.g. "fakeView"
placed the new fakeView anchored at Top of the ConstraintLayout

when I need to hide a View, translate it outside the constraint..

change the constraint of the view you want to hide, in order to have BOTTOM connected to the Top of the FakeView.

I think you can use same technique to move object on the left of the fakeview or on the right.

score 0 · Answer 5 · answered May 03 '19 at 14:48

One trick would be to set negative margin for the side you want, in the ConstraintLayout itself. This requires that other views that have constraint to that side be offset:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    ...
    android:layout_marginBottom="-48dp">

    <ImageButton
        android:id="@+id/leftButton"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginEnd="24dp"
        android:layout_marginBottom="72dp"
        android:background="@drawable/shape_next_button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

    <ImageButton
        android:id="@+id/rightButton"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_marginStart="24dp"
        android:background="@drawable/shape_previous_button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Position view outside of ConstraintLayout

5 Answers5

Linked