Uber Like Animation

When i saw Uber animation of login screen, I decided to implement the same in one of my client’s cab app. It is not exactly same but looking nice.

If you are interested to know how I implemented this, keep patience. I am going to discuss here step by step.

Implementation

First design your layout screen having one ImageView, and one layout which will contain three views TextView, EditText, and Button. See the below code snippet.

Here we are performing two operation.

• Change opacity of image
• Add animation to Title, EditText and Fab Button

To achieve this animation, we have to use Physics based animation called Fling Animation. Fling animation has an initial momentum and gradually slows down.

To use Physics based animation, use have to add dependency as follows

implementation 'com.android.support:support-dynamic-animation:28.0.0'

Step 1: Bind All Views

private void bindViews() {
    bgImg=findViewById(R.id.bg_img);
    layout=findViewById(R.id.layout);
    mobEt=findViewById(R.id.mob_et);
}

We’ll take help of 3 views. So specially bind all these views.

When mobEt (EditText) will get Focus, we’ll change opacity of bgImg (ImageView) and start the animation on layout.

Step 2: Define a method for animation

private void animate(int direction, float alpha) {

    FlingAnimation flingX = 
             new FlingAnimation(layout, DynamicAnimation.Y)
            .setStartVelocity(direction*height)
            .setFriction(0.5f);
    flingX.start();

    bgImg.animate().alpha(alpha).setDuration(1000).start();

}

animate(-,-) method will be called for both while sending the layout at top and while pulling the layout back at bottom. It has two parameters, direction will be used to define whether animation is going to top or coming to bottom, values will be either 1 or -1.

Here height is the total height of your screen to which you want to stop your animation and it can be got as follows.

DisplayMetrics metrics = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(metrics);
height = metrics.heightPixels-metrics.heightPixels/50.0f;

Step 3: Start animation

To start the animation just call the animate method on TextInputEditText focus change listener as follows.

mobEt.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
           animate(-1,0f);
    }
});

Now run the application

Here you can see, when EditText gets focus, animation is started. But the work is not done yet. When we click on back button, It should also come to its previous state.

☺Cool! It is very easy.

Just define a field as isAnimating and assign true to it whenever you start animation. and override onBackPressed() as follows

@Override
public void onBackPressed() {

    if(!isAnimating){
        super.onBackPressed();
    }
    else{
        animate(1,1f);
        isAnimating=false;
        mob_et.clearFocus();
    }
}

Updated mobEt focus listener:

mobEt.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if(hasFocus){
            isAnimating=true;
            animate(-1,0f);
        }
    }
});

Wow! Its all set. Run the application now.

You can also find the complete app here.

ankitdubey021/UberAnimation

Last but not least if you liked this animation, please show love by hitting ♥♥clap♥♥ button. Thank you.