I want to create a listview that is similar in functionality to the Gmail android app. By that I mean that you can select rows by clicking an image on the left or view an email by clicking anywhere else on the row. I can come close, but it's not quite there.
My custom row consists of an ImageView on the left and some TextViews on the right. Here's the gist of the getView on my Adapter.
@Override
public View getView(final int position, View convertView, ViewGroup parent) {
View row = super.getView(position, convertView, parent);
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
getListView().setItemChecked(position, !getListView().isItemChecked(position));
}
});
row.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getActivity(), "" + position, Toast.LENGTH_SHORT).show();
}
});
}
This comes very close! What's missing is the highlighting of the row on the row click listener.
Option 1: Use listView's inbuilt choiceMode
feature. Unfortunately, I've never implemented. So, can't give you a detailed answer. But you can take a hint from here and other answers.
Option 2: Implement it on your own. Define an array
/list
or any work-around that keeps indexes of selected element of your list. And then use it to filter backgrounds in getView(). Here is a working example:
public class TestAdapter extends BaseAdapter {
List<String> data;
boolean is_element_selected[];
public TestAdapter(List<String> data) {
this.data = data;
is_element_selected = new boolean[data.size()];
}
public void toggleSelection(int index) {
is_element_selected[index] = !is_element_selected[index];
notifyDataSetChanged();
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
//Initialize your view and stuff
if (is_element_selected[position])
convertView.setBackgroundColor(context.getResources().getColor(R.color.blue_item_selector));
else
convertView.setBackgroundColor(Color.TRANSPARENT);
imageView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
toggleSelection(position);
}
});
row.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//get to detailed view page
}
});
return convertView;
}
Good luck!
This is how i made my getview method:
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder holder;
LayoutInflater inflater = (LayoutInflater) context.getApplicationContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
convertView = inflater.inflate(R.layout.list_item, null);
holder = new ViewHolder();
holder.title = (TextView) convertView.findViewById(R.id.title);
holder.selectBox = (ImageView) convertView.findViewById(R.id.selectBox);
convertView.setTag(holder);
}
holder = (ViewHolder) convertView.getTag();
holder.title.setText(getItem(position).getTitle());
holder.selectBox.setTag("" + position);
holder.selectBox.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
ivFlip = (ImageView) v;
ivFlip.clearAnimation();
ivFlip.setAnimation(animation1);
ivFlip.startAnimation(animation1);
setAnimListners(mailList.get(Integer.parseInt(v.getTag().toString())));
}
});
if (mailList.get(position).isChecked()) {
holder.selectBox.setImageResource(R.drawable.cb_checked);
convertView.setBackgroundColor(context.getResources().getColor(R.color.list_highlight));
} else {
holder.selectBox.setImageResource(R.drawable.cb_unchecked);
convertView.setBackgroundDrawable(context.getResources().getDrawable(R.drawable.list_selector));
}
return convertView;
}
private void setAnimListners(final MyListItem curMail) {
AnimationListener animListner;
animListner = new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
if (animation == animation1) {
if (curMail.isChecked()) {
ivFlip.setImageResource(R.drawable.cb_unchecked);
} else {
ivFlip.setImageResource(R.drawable.cb_checked);
}
ivFlip.clearAnimation();
ivFlip.setAnimation(animation2);
ivFlip.startAnimation(animation2);
} else {
curMail.setIsChecked(!curMail.isChecked());
setCount();
setActionMode();
}
}
// Set selected count
private void setCount() {
if (curMail.isChecked()) {
checkedCount++;
} else {
if (checkedCount != 0) {
checkedCount--;
}
}
}
// Show/Hide action mode
private void setActionMode() {
if (checkedCount > 0) {
if (!isActionModeShowing) {
mMode = ((MainActivity) context).startActionMode(new MainActivity.AnActionModeOfEpicProportions(context));
isActionModeShowing = true;
}
} else if (mMode != null) {
mMode.finish();
isActionModeShowing = false;
}
// Set action mode title
if (mMode != null)
mMode.setTitle(String.valueOf(checkedCount));
notifyDataSetChanged();
}
@Override
public void onAnimationRepeat(Animation arg0) {
// TODO Auto-generated method stub
}
@Override
public void onAnimationEnd(Animation arg0) {
// TODO Auto-generated method stub
}
};
animation1.setAnimationListener(animListner);
animation2.setAnimationListener(animListner);
}
And i used two animations:
a) to_middle.xml :
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="200"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.0"
android:toYScale="1.0" />
b) from_middle.xml :
<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="200"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="0.0"/>
Hope this link will help you further: http://techiedreams.com/gmail-like-flip-animated-multi-selection-list-view-with-action-mode/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With