Clever Geek Handbook

Android clothes WearableListView ImageView selector

I am trying to create a list view like this: -

enter image description here

I have now successfully completed my listbox using the WearableListView adapter. However, I am using static images in the ImageView. I want to create this gray-blue animation when a specific list item is focused while scrolling. How should I do it? I tried to use XML selector for ImageView but it seems that this ListView is not using this selector (android: state focused, selected, clicked - nothing works). Any idea how I can get what I want? I hope I have put my question clear. Thank.

+3


source to share


2 answers


Yes you are right, the image selector is not working, why? I don't know exactly and we don't have any documentation to read.

But luckily I have successfully implemented this scenario and is almost similar to the default settings screen.

For a workaround, I set the color of the circle inside the methods below:



  • onScaleUpStart()

    - set the color of the circle for the selected element
  • onScaleDownStart()

    - Set the color of the circle for unselected items.

I took CircleImageView and TextView inside my item layout. Sample code could be:

private final class MyItemView extends FrameLayout implements WearableListView.Item {

    final CircledImageView image;
    final TextView text;
    private float mScale;
    private final int mFadedCircleColor;
    private final int mChosenCircleColor;

    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);
        mFadedCircleColor = getResources().getColor(android.R.color.darker_gray);
        mChosenCircleColor = getResources().getColor(android.R.color.holo_blue_dark);
    }

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

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

    @Override
    public float getCurrentProximityValue() {
        return mScale;
    }

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

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

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


source


New update provides WearableListView.OnCenterProximityListener alternative to WearableListView.Item to implement Wearable list view with selector,

It has two methods to implement:



  • onCenterPosition

  • onNonCenterPosition 

    public class WearableListItemLayout extends LinearLayout implements WearableListView.OnCenterProximityListener {

private CircledImageView image;
private TextView text;

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);
}

@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    image = (CircledImageView) findViewById(R.id.image);
    text = (TextView) findViewById(R.id.name);
}

@Override
public void onCenterPosition(boolean b) {
    image.setAlpha(1f);
    image.setBackgroundResource(R.drawable.blue_oval);
    text.setAlpha(1f);
}

@Override
public void onNonCenterPosition(boolean b) {
    image.setAlpha(0.5f);
    image.setBackgroundResource(R.drawable.gray_oval);
    text.setAlpha(0.5f);
}
}
+1


source






More articles:


All Articles