Wear Settings List Items

I am trying to replicate the wear settings list for my wear app. I want to use a list of checkbox items like this. The problem is I have to use CircledImageView if I want the zoo

Solution 1:

It was a little complicated to replicate the Settings screen. - CheckBox and TextView would not work, because the exact behavior is where the icon remains the same and the circle expands on focus. We have to use CircledImageView for this. - The solution I used was -> Use CircledImageView and Textview and handle CheckBox login yourself.

This is the List item layout.

<?xml version="1.0" encoding="utf-8"?>

<android.support.wearable.view.CircledImageView
    android:id="@+id/config_image"
    android:layout_width="@dimen/config_icon_item_size"
    android:layout_height="@dimen/config_icon_item_size"
    android:layout_marginLeft="@dimen/config_item_margin_leftright"
    android:layout_gravity="center_vertical"
    app:circle_border_color="@color/color_item_circle_border_color"
    app:circle_radius="@dimen/default_settings_circle_radius"
    app:circle_border_width="@dimen/config_icon_circle_border"
    app:circle_color="@android:color/transparent" />

<TextView
    android:id="@+id/config_text"
    android:layout_height="@dimen/config_icon_item_size"
    android:layout_marginLeft="@dimen/config_icon_size_plus_leftmargin"
    android:layout_marginRight="@dimen/config_item_margin_leftright"
    android:layout_width="wrap_content"
    android:fontFamily="sans-serif-condensed-light"
    android:gravity="center_vertical"
    android:textColor="@color/config_item_text"
    android:textSize="@dimen/list_item_textsize"
    android:text="@string/str_placeholder" />
/>

In the code I had to handle the animations and Checkbox state.

privatefinalclassMyItemViewextendsFrameLayoutimplementsWearableListView.OnCenterProximityListener {

    privatestaticfinalintANIMATION_DURATION_MS=150;
    /**
     * The ratio for the size of a circle in shrink state.
     */privatestaticfinalfloatSHRINK_CIRCLE_RATIO=.75f;

    privatestaticfinalfloatSHRINK_LABEL_ALPHA=.5f;
    privatestaticfinalfloatEXPAND_LABEL_ALPHA=1f;

    privatefinal TextView mTextView;
    privatefinal CircledImageView mImage;

    privatefinalfloat mExpandCircleRadius;
    privatefinalfloat mShrinkCircleRadius;

    privatefinal ObjectAnimator mExpandCircleAnimator;
    privatefinal ObjectAnimator mExpandIconAnimator;
    privatefinal ObjectAnimator mExpandLabelAnimator;
    privatefinal AnimatorSet mExpandAnimator;

    privatefinal ObjectAnimator mShrinkCircleAnimator;
    privatefinal ObjectAnimator mShrinkIconAnimator;
    privatefinal ObjectAnimator mShrinkLabelAnimator;
    privatefinal AnimatorSet mShrinkAnimator;
    public ItemResource mResources;

    publicMyItemView(Context context, ItemResource resources) {
        super(context);
        View.inflate(context, R.layout.config_listitem, this);
        mResources = resources;
        mTextView = (TextView) findViewById(R.id.config_text);


        mImage = (CircledImageView) findViewById(R.id.config_image);
        mImage.setCircleBorderColor(Color.WHITE);
        mExpandCircleRadius = mImage.getCircleRadius();
        mShrinkCircleRadius = mExpandCircleRadius * SHRINK_CIRCLE_RATIO;

        mShrinkCircleAnimator = ObjectAnimator.ofFloat(mImage, "circleRadius",
                mExpandCircleRadius, mShrinkCircleRadius);
        mShrinkIconAnimator = ObjectAnimator.ofFloat(mImage, "alpha",
                EXPAND_LABEL_ALPHA, SHRINK_LABEL_ALPHA);
        mShrinkLabelAnimator = ObjectAnimator.ofFloat(mTextView, "alpha",
                EXPAND_LABEL_ALPHA, SHRINK_LABEL_ALPHA);
        mShrinkAnimator = newAnimatorSet().setDuration(ANIMATION_DURATION_MS);
        mShrinkAnimator.playTogether(mShrinkCircleAnimator, mShrinkLabelAnimator, mShrinkIconAnimator);

        mExpandCircleAnimator = ObjectAnimator.ofFloat(mImage, "circleRadius",
                mShrinkCircleRadius, mExpandCircleRadius);
        mExpandLabelAnimator = ObjectAnimator.ofFloat(mTextView, "alpha",
                SHRINK_LABEL_ALPHA, EXPAND_LABEL_ALPHA);
        mExpandIconAnimator = ObjectAnimator.ofFloat(mImage, "alpha",
                SHRINK_LABEL_ALPHA, EXPAND_LABEL_ALPHA);
        mExpandAnimator = newAnimatorSet().setDuration(ANIMATION_DURATION_MS);
        mExpandAnimator.playTogether(mExpandCircleAnimator, mExpandLabelAnimator, mExpandIconAnimator);
    }


    @OverridepublicvoidonCenterPosition(boolean animate) {
        if (animate) {
            mShrinkAnimator.cancel();
            if (!mExpandAnimator.isRunning()) {
                mExpandCircleAnimator.setFloatValues(mImage.getCircleRadius(), mExpandCircleRadius);
                mExpandLabelAnimator.setFloatValues(mTextView.getAlpha(), EXPAND_LABEL_ALPHA);
                mExpandIconAnimator.setFloatValues(mImage.getAlpha(), EXPAND_LABEL_ALPHA);
                mExpandAnimator.start();
            }
            Log.i("OnCenter+animate:",this.mResources.mSelectedTitle);
        } else {
            mExpandAnimator.cancel();
            mImage.setCircleRadius(mExpandCircleRadius);
            mTextView.setAlpha(EXPAND_LABEL_ALPHA);
            mImage.setAlpha(EXPAND_LABEL_ALPHA);
            Log.i("OnCenter:",this.mResources.mSelectedTitle);
        }
    }

    @OverridepublicvoidonNonCenterPosition(boolean animate) {
        if (animate) {
            mExpandAnimator.cancel();
            if (!mShrinkAnimator.isRunning()) {
                mShrinkCircleAnimator.setFloatValues(mImage.getCircleRadius(), mShrinkCircleRadius);
                mShrinkLabelAnimator.setFloatValues(mTextView.getAlpha(), SHRINK_LABEL_ALPHA);
                mShrinkLabelAnimator.setFloatValues(mImage.getAlpha(), SHRINK_LABEL_ALPHA);
                mShrinkAnimator.start();
                Log.i("nonCenter+animate:",this.mResources.mSelectedTitle);
            }
        } else {
            mShrinkAnimator.cancel();
            mImage.setCircleRadius(mShrinkCircleRadius);
            mTextView.setAlpha(SHRINK_LABEL_ALPHA);
            mImage.setAlpha(SHRINK_LABEL_ALPHA);
            Log.i("nonCenter:",this.mResources.mSelectedTitle);
        }
    }

    publicbooleanisChecked() {
        return mResources.mCheck;
    }

    publicvoidtoggle() {
        mResources.mCheck = !mResources.mCheck;
    }
}

And in my Adapter (we use a RecyclerView here) we toggle on each click.

@OverridepublicvoidonClick(WearableListView.ViewHolder viewHolder) {
    MyItemViewitemView= (MyItemView) viewHolder.itemView;
    itemView.toggle();
    //do your stuff
}

Solution 2:

Make your own list item class that implements WearableListView.OnCenterProximityListener interface and apply any animations in onCenterPosition and onNonCenterPosition methods like this:

mCheckBox.animate().scaleX(1.6f).scaleY(1.6f).setDuration(ANIMATION_DURATION);

You can see an example of using this technique in the samples\android-21\wearable\Notifications.

EDIT: I think the simplest way to achieve such behavior is to place CheckBox inside RelativeLayout like this:

<RelativeLayoutandroid:layout_width="80dp"android:layout_height="80dp"><ImageViewandroid:id="@+id/icon"android:layout_width="50dp"android:layout_height="50dp"android:layout_centerInParent="true"android:src="@drawable/circle"/><CheckBoxandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true" /></RelativeLayout>

and apply zoom animation to the ImageView only.