How do I position children of ConstraintLayout offscreen (so that I can translate them onscreen later)?

user_5449923 0
Viewed 268

I'm trying to build a dynamic ConstraintLayout with an offscreen element that I can translate in later. However, I cannot get the element to start offscreen.

<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <ImageView
        android:id="@+id/onscreen_iv"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
    <ImageView
        android:id="@+id/offscreen_iv"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

By setting the left of the image to the right of the fullscreen layout, the image should be offscreen -- shouldn't it? Instead, the result is that offscreen_iv is positioned directly over onscreen_iv. EDIT: The result is the same if I set offscreen_iv to the right of onscreen_iv as opposed to the right of the parent.

It seems to be to do with setting the width to match_parent, as if I set it to a raw number it seems to work, but is of course the wrong size. I need my image to be screen width.

Appreciate the help!

android-constraintlayout android-layout android xml
3 Answers

You have to set offscreen_iv rightOf onscreen_iv

<ImageView
    android:id="@+id/onscreen_iv"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent" />
<ImageView
    android:id="@+id/offscreen_iv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:visibility="invisible"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintLeft_toRightOf="@id/onscreen_iv" />

Set offscreen_iv is invisible

If you want slide it from right to left create translate inside anim folder

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/linear_interpolator"
    android:fillAfter="true">

    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0%p"
        android:duration="5000" />
</set>

Then startanimation

offscreen_iv.startAnimation(AnimationUtils.loadAnimation(getApplicationContext(),
                        R.anim.translate));
user_64292410

Interesting problem.

I've found a way to make your offscreen_iv disappear that is put your image on top of parent.

You can still keep your android:layout_width="match_parent"

Try this:

<ImageView
    android:id="@+id/offscreen_iv"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintBottom_toTopOf="parent" />
user_118886580

You can use android:translationX="400dp" property on any View and animate the same property using Property Animators. Set the value to 0 to get default position.

Other options include

android:translationY="400dp"
android:translationZ="400dp"
user_72760130
Related