How to remove flicker from exit reveal animation and make it reveal from point of touch

327 views Asked by At

What I want to achieve are these:

  1. When an item in the recyclerView is clicked, the details activity should reveal, starting from the point that my finger touches the screen.

  2. When I touch the up arrow button or back button, the details activity should finish with a circular reveal and stop at the point where my finger touched the screen initially.

MY CODE:

MyRecyclerViewHolder

private OnGridItemClickedListener itemClickedListener

    public MyRecyclerViewHolder(View itemView,  OnGridItemClickedListener itemClickedListener) {
        super(itemView);
        ButterKnife.bind(this, itemView);
        this.itemClickedListener = itemClickedListener;
        rippleView.setOnTouchListener(touchListener);
    }


    private View.OnTouchListener touchListener = new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if (event.getAction() == MotionEvent.ACTION_UP) {
                itemClickedListener.onItemClick(getAdapterPosition(), null, (int)event.getY(), (int)event.getX());
            }
            return true;
        }
    };

MyFragment

// Removed irrelevant codes
 MyAdapter adapter = new MyAdapter(itemsList, true);
 recyclerView.setLayoutManager(new GridAutoFitLayoutManager(getActivity(), MyConvert.dpToPx(150, getActivity())));
 recyclerView.setAdapter(adapter);
 recyclerView.setHasFixedSize(true);

 adapter.setOnGridItemClickedListener(new OnGridItemClickedListener() {
     @Override
     public void onItemClick(int position, String stringId, int y, int x) {
         launchMyDetailsActivity(position, y, x);
     }
 });

 private void launchMyDetailsActivity(int index, int y, int x) {
     Intent intent = new Intent(getActivity(), MyDetailsActivity.class);
     intent.putExtra(Keys.EXTRA_Y, y);
     intent.putExtra(Keys.EXTRA_X, x);
     startActivity(intent);
 }

MyDetailsActivity

// Removed irrelevant codes

 @Override
 protected void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.activity_grid_details);
     ButterKnife.bind(this);
     setSupportActionBar(toolbar);
     getSupportActionBar().setDisplayHomeAsUpEnabled(true);
     setViewListeners();
     startEnterTransition();
 }

 private void startEnterTransition () {
     coordinatorLayout.post(new Runnable() {
         @Override
         public void run() {
             int x = getIntent().getIntExtra(Keys.EXTRA_X, 0);
             int y = getIntent().getIntExtra(Keys.EXTRA_Y, 0);

             if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP && x != 0 && y != 0) {
                 // get the final radius for the clipping circle
                 int finalRadius = Math.max(coordinatorLayout.getWidth(), coordinatorLayout.getHeight()) / 2;

                 // create the animator for this view (the start radius is zero)
                 Animator anim = ViewAnimationUtils.createCircularReveal(coordinatorLayout, x, y, 0, finalRadius);

                 // make the view visible and start the animation
                 coordinatorLayout.setVisibility(View.VISIBLE);
                 anim.start();
             }
         }
     });
 }

 private void startExitTransition () {
     int x = getIntent().getIntExtra(Keys.EXTRA_X, 0);
     int y = getIntent().getIntExtra(Keys.EXTRA_Y, 0);

     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP && x != 0 && y != 0) {
         int initialRadius = coordinatorLayout.getWidth() / 2;

         Animator anim = ViewAnimationUtils.createCircularReveal(coordinatorLayout, x, y, initialRadius, 0);

         anim.addListener(new AnimatorListenerAdapter() {
             @Override
             public void onAnimationEnd(Animator animation) {
                 super.onAnimationEnd(animation);
                 coordinatorLayout.setVisibility(View.INVISIBLE);
                 supportFinishAfterTransition();
             }
         });

         anim.start();

     } else {
         supportFinishAfterTransition();
     }
 }

 @Override
 public void onBackPressed() {
     startExitTransition();
 }

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {
     switch (item.getItemId()) {

         case android.R.id.home:
             startExitTransition();
             return true;
     }

     return super.onOptionsItemSelected(item);
 }

Problems

  1. The reveal animation starts from the top-left of the screen, close to the burger icon even when the item I clicked is close to the bottom of the screen. The same goes for the exit animation, it stops at the top-left of the screen

  2. After the exit animation ends, the screen flashes, it doesn't always happen but it does happen.

Implemented solution

I have tried this in the viewHolder: itemView.getX() and itemView.getY(), itemView.getRight() and itemView.getTop(). These appeared to solve number one problem above but the point of entry and exit of the animations are always off from the point of the recyclerView item.

Please how do I fix numbers and 2 problems above?

0

There are 0 answers