How to slide a view out of another view

Question

I have a fragment with a navigation menu at the top-left corner. At the start of the activity, I want to gradually slide a view (let's call it black_view) out of the menu icon.

Here's a rough breakdown of how I want the animation to be in accordance with the images below:

Activity starts as the first image with black_view being invisible.
black_view gradually slides out from behind the menu icon length by length until it gets to the point of the second image.

>>>

What I've tried:

I tried achieving this by using a TranslateAnimation. However, the whole length of black_view shows up at the start of the animation and this is not what I want. I also saw a couple of sliding animation code snippets like this and this, but they all follow the TranlateAnimation model (with the whole length of black_view showing instantly).

How can I achieve this?

PS: If there's any important detail that I failed to add, kindly let me know.

If you just want the black background to slide gradually, you can use a progress bar that takes up the full length of the view but loads gradually. If the above view is a placeholder for something else, just add a layer view behind your yellow view that will act as a cover as the black view glides into place — Nikos Hidalgo, Aug 22 '19 at 15:20
Wow! That's smart thinking @NikosHidalgo. It seems like a lot of stress but I think this is what I'd have to resort to if I don't get a more straightforward approach soon. Many thanks. — Taslim Oseni, Aug 22 '19 at 15:27
Hopefully, you'll get a more straightforward solution; glad I could provide you with some peace of mind through, knowing that you can achieve the desired effect using alternative means :) — Nikos Hidalgo, Aug 22 '19 at 15:35

score 5 · Accepted Answer · answered Aug 23 '19 at 08:27

It can be done easily with Slide transition from Transition API. Just use TransitionManager.beginDelayedTransition method then change visibility of black view from GONE to VISIBLE.

import androidx.appcompat.app.AppCompatActivity;
import androidx.transition.Slide;
import androidx.transition.Transition;
import androidx.transition.TransitionManager;

public class MainActivity extends AppCompatActivity {

    private ViewGroup parent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        parent = findViewById(R.id.parent);
        parent.getViewTreeObserver().addOnPreDrawListener(new OnPreDrawListener() {
            @Override
            public boolean onPreDraw() {
                parent.getViewTreeObserver().removeOnPreDrawListener(this);
                animate();
                return true;
            }
        });
    }

    private void animate() {
        View textView = findViewById(R.id.text);

        Transition transition = new Slide(Gravity.LEFT);
        transition.setDuration(2000);
        transition.setStartDelay(1000);
        TransitionManager.beginDelayedTransition(parent, transition);

        textView.setVisibility(View.VISIBLE);
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:text="Button" />

    <FrameLayout
        android:id="@+id/parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toRightOf="@+id/button">

        <TextView
            android:id="@+id/text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#000"
            android:text="hello world"
            android:textColor="#fff"
            android:textSize="22sp"
            android:visibility="gone" />
    </FrameLayout>

</RelativeLayout>

Result:

All classes here are from androix package so code is backward compatible.

How to slide a view out of another view

1 Answers1