Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Scale up Item in RecyclerView to overlaps 2 adjacent items Android

I'm using RecyclerView with GridLayoutManager. The goal I want to achieve is when I click on an item, It'll scale up and overlaps the adjacent items. Just like the picture below (in Android TV) enter image description here

When the onClick event is triggered, I call

v.animate().scaleX(1.2f).scaleY(1.2f).setDuration(500).start();

But the result is below: enter image description here

It can overlaps only items that has position lower than itself.
What should I do to overlaps all of the adjacent items. Thanks in advance.
EDIT
I already tried:

v.bringToFront();

or

(v.getParent()).bringChildToFront(v);

But both of them don't work.

like image 433
Huy Duong Tu Avatar asked Apr 07 '15 08:04

Huy Duong Tu


People also ask

How do you overlap items in recyclerView?

recyclerView. setLayoutManager(new LinearLayoutManager(this)); recyclerView. addItemDecoration(new ItemDecorator(-80)); This causes top item to stack lowest and next item after the top item overlaps it.


2 Answers

According aga's answer, i use ViewCompat.setElevation(View view, float elevation) to support API prior to 21, It works like a charming.

static class ViewHolder extends RecyclerView.ViewHolder {

  public ViewHolder(View root) {
    // bind views
    // ...

    // bind focus listener
    root.setOnFocusChangeListener(new View.OnFocusChangeListener() {
      @Override
        public void onFocusChange(View v, boolean hasFocus) {
          if (hasFocus) {
            // run scale animation and make it bigger

            ViewCompat.setElevation(root, 1);
          } else {
            // run scale animation and make it smaller

            ViewCompat.setElevation(root, 0);
          }
        }
     });
  }
}

The item layout file is very simple like below:

<?xml version="1.0" encoding="utf-8"?>
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:background="@drawable/sl_live_item" />
like image 105
Xiaozou Avatar answered Sep 22 '22 18:09

Xiaozou


1.Override the getChildDrawingOrder method.

@Override
protected int getChildDrawingOrder(int childCount, int i) {
    View view = getLayoutManager().getFocusedChild();
    if (null == view) {
        return super.getChildDrawingOrder(childCount, i);
    }
    int position = indexOfChild(view);

    if (position < 0) {
        return super.getChildDrawingOrder(childCount, i);
    }
    if (i == childCount - 1) {
        return position;
    }
    if (i == position) {
        return childCount - 1;
    }
    return super.getChildDrawingOrder(childCount, i);
}

2.RecyclerView setChildrenDrawingOrderEnabled is true.

setChildrenDrawingOrderEnabled(true);

3.When item view has focus, invalidate its parent.

@Override
public void onFocusChange(View v, boolean hasFocus) {
    if (hasFocus) {
        v.setScaleX(1.5f);
        v.setScaleY(1.5f);
        mRecyclerView.invalidate();
    } else {
        v.setScaleX(1.0f);
        v.setScaleY(1.0f);
    }
}
like image 33
EasonX Avatar answered Sep 19 '22 18:09

EasonX