CODEWITHSUNDEEP
androidandroid-layoutandroid-animation
VictorCharlie23
VictorCharlie23

Reputation: 121

How to animate a LAYOUT from right to left?

please refer to this previous question of mine if you'd like to for more background.

I wanted to have a slide-in menu, the menu itself is a grid view, containing several image and text views.

This is what I did: Using constaint layout, I placed it right outside the right edge of the screen thinking that all I had to do is to move it from outside to inside the screen.

I have encountered many problem but nevertheless I solved most of them. Now I have one problem which can't be solved:

You see, when you animate a "view", the programmatically reactive area, the area where for example onTouchListener responds to, will not be moved. In other words, the graphical representation of the view, the imagery will be moved but the programming stuff, or the layout perhaps (I'm not sure if layout is the right thing here that I'm referring to, sorry) will be left behind.

So now you can understand my quandaries. I want to move both the graphics and the reactive area to my target destination. In other words, the user should not only be able to see the menu coming in from right edge of the screen, they should be able to click on it and it should be responsive.

But what I got stuck with is that the user will be able to see the view, but if they tab on it, nothing happens - because the reactive area, the layout (not sure it's the right thing here again, sorry) got left behind outside of the screen.

I know what you are thinking:"So just set the new location of your layout using 

setLayoutParams

? It's not that hard?

Well, here's the thing, and I'm finally coming to the point, after all the background, which is something I have to do or the whole question will seem rather abrupt.

Here's the translation animation xml script:

<?xml version="1.0" encoding="utf-8"?>
<set
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:fillAfter="true">

<translate
    android:fromXDelta="0%"
    android:toXDelta="-100%"
    android:duration="300"
    />
</set>

As you can see, I'm moving the imagery, the graphical representation of my layout/view/whatever to the -100% of my layout/view/reactive area. So what happens if I use this:

constraintLayoutParams.leftMargin = 1958; 
swipeGridMenu.setLayoutParams(constraintLayoutParams);

? The user will see a menu appearing on the right hand of the screen, but not bordering the right edge of the screen in anyway, instead, there is a blank space in between the menu (which isn't clickable because the reactive area isn't aligned with it properly, it got left behind) and the right edge of the screen, and the width of the blank area is the width of the menu, because that's where the reactive area/layout is. The following graph demonstrates what the situation is like:

enter image description here

And I'm giving up. No matter how I tweak this, it will always end up with something pesky and less than ideal. So how do I animate and move the entire layout? I just want to move my gridview menu to the new location smoothly, and make it stay there, and make it clickable.

Any help will be greatly appreciated!

Upvotes: 0

Views: 1180

Answers (2)

Rahul
Rahul

Reputation: 5049

This is working fine:

public class AnimationActivity extends AppCompatActivity {


    int i = 0;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.abc);
        ImageView imageView = (ImageView) findViewById(R.id.imageView);

        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(), "clicked : #"+i++, Toast.LENGTH_SHORT).show();
            }
        });

        imageView.setTranslationY(2000);

        imageView.animate().translationY(0)
                .setInterpolator(new FastOutLinearInInterpolator())
                .setDuration(10000)
                .start();

    }
}

R.layout.abc

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageView"
       app:srcCompat="@drawable/ic_boy"
        android:layout_gravity="center_horizontal"
       android:layout_width="100dp"
       android:layout_height="100dp" />

</FrameLayout>

Upvotes: 1

droiddude
droiddude

Reputation: 187

You could use a ConstraintLayout as a container for your menu within a CoordinatorLayout and use the TransitionManager to animate the layout. I use this approach to fade in and out a ListView from the bottom of the screen. The list view is always available but, the visibility is set to View.GONE. To fade in the view you can do the following:

TransitionManager.beginDelayedTransition(layoutContainer);
listView.setVisibility(View.VISIBLE);

For fade out you simply have to do:

TransitionManager.beginDelayedTransition(layoutContainer);
listView.setVisibility(View.GONE);

Upvotes: 1

Related Questions