How to replicate listview as seen in the "Start" menu

Question

I would like to implement a list view as seen below.

Apparently this is a WearableListView with a CircledImageView. However I cannot seem to find which function allows me to determine the middle view. I also want to be able to do the "size up" animation on the new one and a "size down" on the old selected one... Right now I tried a basic onscroll but no cigar.

     mListView.addOnScrollListener(new WearableListView.OnScrollListener() {
                @Override
                public void onScroll(int i) {
                    Log.d("Recycler","Scroll: "+i);
                }

                @Override
                public void onAbsoluteScrollChange(int i) {
                    Log.d("Recycler","ABsScrollChange: "+i);
                }

                @Override
                public void onScrollStateChanged(int i) {
                    Log.d("Recycler","ScrollState: "+i);
                }


                @Override
                public void onCentralPositionChanged(int i) {
                    Log.d("Recycler","Center: "+i);
                }

            });

EDIT: Okay so I now know how to find the center view. But I was wondering if anyone figured out how to retrive the current view so that I can modify the current selected view.

EDIT 2 Okay now I can modify the selected view. Still don't know hot to properly remove properties after an object is deselected however..

Answer 1

The trick is to implement getProximityMinValue() and getProximityMaxValue() in your WearableListView.Item subclass:

private final class MyItemView extends FrameLayout implements WearableListView.Item {

  final CircledImageView image;
  final TextView text;

  public MyItemView(Context context) {
    super(context);
    View.inflate(context, R.layout.wearablelistview_item, this);
    image = (CircledImageView) findViewById(R.id.image);
    text = (TextView) findViewById(R.id.text);
  }

  @Override
  public float getProximityMinValue() {
    return mDefaultCircleRadius;
  }

  @Override
  public float getProximityMaxValue() {
    return mSelectedCircleRadius;
  }

  @Override
  public float getCurrentProximityValue() {
    return image.getCircleRadius();
  }

  @Override
  public void setScalingAnimatorValue(float value) {
    image.setCircleRadius(value);
    image.setCircleRadiusPressed(value);
  }

  @Override
  public void onScaleUpStart() {
    image.setAlpha(1f);
    text.setAlpha(1f);
  }

  @Override
  public void onScaleDownStart() {
    image.setAlpha(0.5f);
    text.setAlpha(0.5f);
  }
}

Full working example source code here.

Answer 2

It is way easier than the answers given here. Just use onCenterPosition and onNonCenterPosition like this:

public class WearableListItemLayout extends LinearLayout implements WearableListView.OnCenterProximityListener {

    private ImageView mCircle;
    private TextView mName;

    private final float mFadedTextAlpha;
    private final int mFadedCircleColor;
    private final int mChosenCircleColor;

    public WearableListItemLayout(Context context) {
        this(context, null);
    }

    public WearableListItemLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WearableListItemLayout(Context context, AttributeSet attrs,
                                  int defStyle) {
        super(context, attrs, defStyle);

        mFadedTextAlpha = 200f / 100f;
        mFadedCircleColor = getResources().getColor(R.color.grey);
        mChosenCircleColor = getResources().getColor(R.color.blue);
    }

    // Get references to the icon and text in the item layout definition
    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        // These are defined in the layout file for list items
        // (see next section)
        mCircle = (ImageView) findViewById(R.id.circle);
        mName = (TextView) findViewById(R.id.name);
    }

    @Override
    public void onCenterPosition(boolean animate) {
        mName.setAlpha(1f);
        ((GradientDrawable) mCircle.getDrawable()).setColor(mChosenCircleColor);
    }

    @Override
    public void onNonCenterPosition(boolean animate) {
        ((GradientDrawable) mCircle.getDrawable()).setColor(mFadedCircleColor);
        mName.setAlpha(mFadedTextAlpha);
    }
}

Note: This is for a listview which gets a colored circle when in the center, but it can be easily adjusted for what you want.