How to mimic the listView stickey-items like on Lollipop's contacts app?
ok, I've managed to solve all of the issues I've written about:
1.I changed the way that the third party library works (I don't remember where I got the library from, but this one is very similar) , by changing the layout of each row, so that the header would be on the left of the content itself. It's just a matter of a layout XML file and you're pretty much done. Maybe I will publish a nice library for both of those solutions.
2.This is the view I've made. It's not an official implementation (didn't find any), so I made something by myself. It can be more efficient, but at least it's quite easy to understand and also quite flexible:
public class CircularView extends ViewSwitcher {
private ImageView mImageView;
private TextView mTextView;
private Bitmap mBitmap;
private CharSequence mText;
private int mBackgroundColor = 0;
private int mImageResId = 0;
public CircularView(final Context context) {
this(context, null);
}
public CircularView(final Context context, final AttributeSet attrs) {
super(context, attrs);
addView(mImageView = new ImageView(context), new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT, Gravity.CENTER));
addView(mTextView = new TextView(context), new FrameLayout.LayoutParams(LayoutParams.MATCH_PARENT,
LayoutParams.MATCH_PARENT, Gravity.CENTER));
mTextView.setGravity(Gravity.CENTER);
if (isInEditMode())
setTextAndBackgroundColor("", 0xFFff0000);
}
@Override
protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
final int measuredWidth = getMeasuredWidth();
final int measuredHeight = getMeasuredHeight();
if (measuredWidth != 0 && measuredHeight != 0)
drawContent(measuredWidth, measuredHeight);
}
@SuppressWarnings("deprecation")
private void drawContent(final int measuredWidth, final int measuredHeight) {
ShapeDrawable roundedBackgroundDrawable = null;
if (mBackgroundColor != 0) {
roundedBackgroundDrawable = new ShapeDrawable(new OvalShape());
roundedBackgroundDrawable.getPaint().setColor(mBackgroundColor);
roundedBackgroundDrawable.setIntrinsicHeight(measuredHeight);
roundedBackgroundDrawable.setIntrinsicWidth(measuredWidth);
roundedBackgroundDrawable.setBounds(new Rect(0, 0, measuredWidth, measuredHeight));
}
if (mImageResId != 0) {
mImageView.setBackgroundDrawable(roundedBackgroundDrawable);
mImageView.setImageResource(mImageResId);
mImageView.setScaleType(ScaleType.CENTER_INSIDE);
} else if (mText != null) {
mTextView.setText(mText);
mTextView.setBackgroundDrawable(roundedBackgroundDrawable);
// mTextView.setPadding(0, measuredHeight / 4, 0, measuredHeight / 4);
mTextView.setTextSize(measuredHeight / 5);
} else if (mBitmap != null) {
mImageView.setScaleType(ScaleType.FIT_CENTER);
mImageView.setBackgroundDrawable(roundedBackgroundDrawable);
mBitmap = ThumbnailUtils.extractThumbnail(mBitmap, measuredWidth, measuredHeight);
final RoundedBitmapDrawable roundedBitmapDrawable = RoundedBitmapDrawableFactory.create(getResources(),
mBitmap);
roundedBitmapDrawable.setCornerRadius((measuredHeight + measuredWidth) / 4);
mImageView.setImageDrawable(roundedBitmapDrawable);
}
resetValuesState(false);
}
public void setTextAndBackgroundColor(final CharSequence text, final int backgroundColor) {
resetValuesState(true);
while (getCurrentView() != mTextView)
showNext();
this.mBackgroundColor = backgroundColor;
mText = text;
final int height = getHeight(), width = getWidth();
if (height != 0 && width != 0)
drawContent(width, height);
}
public void setImageResource(final int imageResId, final int backgroundColor) {
resetValuesState(true);
while (getCurrentView() != mImageView)
showNext();
mImageResId = imageResId;
this.mBackgroundColor = backgroundColor;
final int height = getHeight(), width = getWidth();
if (height != 0 && width != 0)
drawContent(width, height);
}
public void setImageBitmap(final Bitmap bitmap) {
setImageBitmapAndBackgroundColor(bitmap, 0);
}
public void setImageBitmapAndBackgroundColor(final Bitmap bitmap, final int backgroundColor) {
resetValuesState(true);
while (getCurrentView() != mImageView)
showNext();
this.mBackgroundColor = backgroundColor;
mBitmap = bitmap;
final int height = getHeight(), width = getWidth();
if (height != 0 && width != 0)
drawContent(width, height);
}
private void resetValuesState(final boolean alsoResetViews) {
mBackgroundColor = mImageResId = 0;
mBitmap = null;
mText = null;
if (alsoResetViews) {
mTextView.setText(null);
mTextView.setBackgroundDrawable(null);
mImageView.setImageBitmap(null);
mImageView.setBackgroundDrawable(null);
}
}
public ImageView getImageView() {
return mImageView;
}
public TextView getTextView() {
return mTextView;
}
}
3.I've found a nice library that does it, called PagerSlidingTabStrip . Didn't find an official way to style the native one, though.
Another way is to look at Google's sample which is available right within Android-Studio, and is called "SlidingTabLayout". It shows how it's done.
EDIT: a better library for #3 is here, called "PagerSlidingTabStrip" too.
You can do the following:
- On the leftmost side of your RecyclerView, creates a TextView that will hold the letter index;
- On the top of the Recycler view (in the layout that wrappes it) place a TextView in order to cover the one you created in step 1, this will be the sticky one;
- Add a OnScrollListener in your RecyclerView. On method onScrolled (), set the TextView created in step 2 for the reference text taken from firstVisibleRow. Until here you shall have a stiky index, without the effects of transition;
To add the fade in/out transition effect, develop a logic that checks if the item previous of the currentFirstVisibleItem is the last of the previous letter list, or if the secondVisibleItem is the first one of the new letter. Based on these information make the sticky index visible/invisible and the row index the opposed, adding in this last the alpha effect.
if (recyclerView != null) { View firstVisibleView = recyclerView.getChildAt(0); View secondVisibleView = recyclerView.getChildAt(1); TextView firstRowIndex = (TextView) firstVisibleView.findViewById(R.id.sticky_row_index); TextView secondRowIndex = (TextView) secondVisibleView.findViewById(R.id.sticky_row_index); int visibleRange = recyclerView.getChildCount(); int actual = recyclerView.getChildPosition(firstVisibleView); int next = actual + 1; int previous = actual - 1; int last = actual + visibleRange; // RESET STICKY LETTER INDEX stickyIndex.setText(String.valueOf(getIndexContext(firstRowIndex)).toUpperCase()); stickyIndex.setVisibility(TextView.VISIBLE); if (dy > 0) { // USER SCROLLING DOWN THE RecyclerView if (next <= last) { if (isHeader(firstRowIndex, secondRowIndex)) { stickyIndex.setVisibility(TextView.INVISIBLE); firstRowIndex.setVisibility(TextView.VISIBLE); firstRowIndex.setAlpha(1 - (Math.abs(firstVisibleView.getY()) / firstRowIndex.getHeight())); secondRowIndex.setVisibility(TextView.VISIBLE); } else { firstRowIndex.setVisibility(TextView.INVISIBLE); stickyIndex.setVisibility(TextView.VISIBLE); } } } else { // USER IS SCROLLING UP THE RecyclerVIew if (next <= last) { // RESET FIRST ROW STATE firstRowIndex.setVisibility(TextView.INVISIBLE); if ((isHeader(firstRowIndex, secondRowIndex) || (getIndexContext(firstRowIndex) != getIndexContext(secondRowIndex))) && isHeader(firstRowIndex, secondRowIndex)) { stickyIndex.setVisibility(TextView.INVISIBLE); firstRowIndex.setVisibility(TextView.VISIBLE); firstRowIndex.setAlpha(1 - (Math.abs(firstVisibleView.getY()) / firstRowIndex.getHeight())); secondRowIndex.setVisibility(TextView.VISIBLE); } else { secondRowIndex.setVisibility(TextView.INVISIBLE); } } } if (stickyIndex.getVisibility() == TextView.VISIBLE) { firstRowIndex.setVisibility(TextView.INVISIBLE); } }
I have developed a component that does the above logic, it can be found here: https://github.com/edsilfer/sticky-index