How to copy a list as shown in the Start menu

Question

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

Apparently this is a WearableListView with a CircledImageView. However, I cannot find which function allows me to determine the average view. I also want to be able to make the animation "size up" on the new and "size down" on the old selected ... Right now I tried the basic onscroll, but not the 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 now I know how to find the center. But I was wondering if anyone figured out how to extract the current view so that I can change the currently selected view.

EDIT 2 Now I can change the selected view. However, you do not know how to correctly remove properties after the object is canceled.

Answer 1

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

 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

This is much simpler than the answers given here. Just use onCenterPosition and onNonCenterPosition as follows:

 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 list that gets a colored circle in the center, but it can be easily customized for what you want.

Answer 3

I also wanted to display a title on top of my list of available views.

I solved this problem by adding a TextView element as part of my layout list of prominent layouts. In addition, it is recommended to set the application: layout_box to "left | bottom | right" to provide a more convenient view of the list when scrolling.

Here is my XML layout (pay attention to the TextView element):

 <?xml version="1.0" encoding="utf-8"?> <android.support.wearable.view.BoxInsetLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent" android:layout_width="match_parent"> <FrameLayout android:id="@+id/frame_layout" android:layout_height="match_parent" android:layout_width="match_parent" app:layout_box="left|bottom|right"> <android.support.wearable.view.WearableListView android:id="@+id/wearable_List" android:layout_height="match_parent" android:layout_width="match_parent" android:background="#434343"> </android.support.wearable.view.WearableListView> <TextView android:id="@+id/title" android:layout_width="wrap_content" android:layout_height="35dp" android:gravity="bottom" android:textSize="20sp" android:fontFamily="courrier" android:layout_centerHorizontal="true" android:layout_alignParentTop="true" android:text="Settings"/> </ FrameLayout > </android.support.wearable.view.BoxInsetLayout> 

For further reading, you can also take a look at this example, which clearly explains: http://www.learnandroidwear.com/sample-1