CODEWITHSUNDEEP
androidandroid-layoutmaterial-designandroid-viewandroid-constraintlayout
David Seroussi
David Seroussi

Reputation: 1710

Position view outside of ConstraintLayout

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
enter image description here

Upvotes: 10

Views: 8991

Answers (5)

Mahozad
Mahozad

Reputation: 24532

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:

enter image description here enter image description here

<?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>

Upvotes: 0

Andrea De Gaetano
Andrea De Gaetano

Reputation: 335

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.

Upvotes: 0

Fan Applelin
Fan Applelin

Reputation: 781

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>

Upvotes: 2

Cheticamp
Cheticamp

Reputation: 62831

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.

Upvotes: 5

Zayid Mohammed
Zayid Mohammed

Reputation: 2325

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.

Upvotes: 3

Related Questions