How to position a view in Android constraint layout outside the screen at the beginning

Question

I have a View in a Constraint Layout and I would like that at the very beginning it should be outside of the screen (and then later slowly move into the scree from right to left). Now, I kind of need something like negative bias or margins.

I had a look at this question How to achieve overlap/negative margin on Constraint Layout?. The accepted answer using android:layout_marginTop="-25dp" does not have any effect (altough the top of the view is constrained and I use"androidx.constraintlayout:constraintlayout:2.1.3").

I tried the second most upvoted answer and used the code:

view.setTranslationX(view.getWidth() - 20);

This actually works. However, the problem is that when the Fragment is created you first see that the view is not on the left for a short period of time. This is not what I want. I would like to have the view beyond the right rim of the layout at the very very beginning such that it can later move into the layout.

Do you have any idea how I can do that? Ideally I would like to do this programmatically.

Update: Here is the code of the XML layout where a negative margin does not have any effect:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/game_test_background"
    tools:context=".MainActivity"
    android:id="@+id/constraintLayout">


    <ImageView
        android:id="@+id/imageView_RedRectange_Test"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:layout_marginTop="-1250dp"

        app:layout_constraintWidth_percent="0.25"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.048"
        app:srcCompat="@drawable/red_rectangle" />


    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHeight_percent="0.102"
        app:layout_constraintHorizontal_bias="0.373"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.745"
        app:layout_constraintWidth_percent="0.12" />

</androidx.constraintlayout.widget.ConstraintLayout>

Answer 1

Okay so to have a negative margin you can use translateX, translateY or TranslationZ.

in xml like so:

<Button
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Hello World!"
    android:translationX="-60dp"
    android:translationY="-90dp"
    android:translationZ="-420dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

or programmatically like so:

View view = ...;
view.setTranslationX(-60);
view.setTranslationY(-90);
view.setTranslationZ(-420);

Then in order to slowly bring it in from right to left you can use the animate() method like so:

View view = ...;
view.animate().setDuration(1000).translationX(-600).start();

Answer 2

There is a problem with setting the width of the button using app:layout_constraintWidth_percent when the ImageView has a negative margin. The problem should go away if you can set a definite width to the button (instead of 0dp).

The problem should also resolve if you set app:layout_constraintWidth_percent to a value such that the text of the button shows completely on one line.

Here is a simplified layout to demonstrate this issue. The ConstraintLayout has two views that are simply constrained to the parent to appear in vertical center of the layout. These two views have no dependencies on each other. In addition, the ImageView has a top margin of -250dp, so it should appear above the layout's vertical center.

<androidx.constraintlayout.widget.ConstraintLayout   
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:background="@android:color/holo_green_light">  
  
    <ImageView  
        android:id="@+id/redRectangle"  
        android:layout_width="100dp"  
        android:layout_height="30dp"  
        android:layout_marginTop="-250dp"  
        android:layout_marginEnd="16dp"  
        app:layout_constraintBottom_toBottomOf="parent"  
        app:layout_constraintEnd_toEndOf="parent"  
        app:layout_constraintTop_toTopOf="parent"  
        app:srcCompat="@drawable/red_rectangle" />  
  
     <Button  
            android:id="@+id/button"  
            android:layout_width="0dp"  
            android:layout_height="wrap_content"  
            android:text="Button"  
            android:textSize="18sp"  
            app:layout_constraintBottom_toBottomOf="parent"  
            app:layout_constraintEnd_toEndOf="parent"  
            app:layout_constraintStart_toStartOf="parent"  
            app:layout_constraintTop_toTopOf="parent"  
            app:layout_constraintWidth_default="percent"  
            app:layout_constraintWidth_percent="0.12" />  
  
</androidx.constraintlayout.widget.ConstraintLayout>

Here is what happens then the width of the ImageView is changed from 0dp to a non-zero value of 1dp. When the width is set to 0dp, the negative margin seems to be ignored. It is only when the width is set to a non-zero value that the ImageView is correctly placed.

Changing the width of the button should have no effect on the placement of the ImageView; however, the button only appears in the proper position when the button has a non-zero width.

Here is what happens when the app:layout_constraintWidth_percent is increased so that the word "Button" is not cutoff.

Again, the placement of the ImageView should be independent of the width of the button. Instead, the button only appears in the correct position when the app:layout_constraintWidth_percent is set such that the word "Button" is not cutoff.

This is only an issue with negative margins. Positive margins work as expected.

This is a strange problem, so you may want to use one of the other solutions mentioned.

(ConstraintLayout version 2.1.3)