Gmail Style List

Question

I want to create a list that is similar in functionality to the Gmail application for Android. By this I mean that you can select lines by clicking on the image on the left or view the email by clicking elsewhere on the line. I can get closer, but that’s not entirely true.

My custom string consists of ImageView on the left and some TextViews on the right. Here is the gist of 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(); } }); } 

It's very close! There is no line highlighting in the string listener.

Answer 1

Option 1 Use the listView inbuilt choiceMode . Unfortunately, I never implemented. So you cannot give a detailed answer. But you can take a hint here and other answers.

Option 2 Deploy it yourself. Define an array / list or any workflow that stores the indices of the selected item in your list. And then use it to filter the background 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

Answer 2

Here 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"/> 

We hope this link helps you: http://techiedreams.com/gmail-like-flip-animated-multi-selection-list-view-with-action-mode/

Answer 3

You need to set listSelector.

What you need to do to create a listSelector is an xml template similar to the one published by Karl.

 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <shape> <solid android:color="#929292" /> </shape> </item> <!-- if you need even a disabled state --> <item android:state_enabled="false" android:drawable="@drawable/my_drawable" /> <item> <shape> <solid android:color="#FFFFFF" /> </shape> </item> </selector> 

As you can see, element tags can even use the android: drawable attribute if you have png that you want to use to highlight the line. Look at all the attributes that these tags can offer and implement what you need.

Finally, to make sure ListView uses this selector, you must set it inside the xml layout:

 <ListView android:id="@id/android:list" android:layout_width="match_parent" android:layout_height="match_parent" android:choiceMode="multipleChoice" android:listSelector="@drawable/enel_list_selector"/> 

or through the code:

 ListView listView = (ListView) <activity|view>.findViewById(android.R.id.list); listView.setSelector(R.drawable.<nameOfYourXmlDrawable>); 

Answer 4

This link can help you use gmail, such as swipe and other animations.

view github name list

Answer 5

You must set choiceMode to your ListView.

 myListView.setChoiceMode(ListView.CHOICE_MODE_SINGLE); myListView().setSelector(android.R.color.BLUE); 

Answer 6

What is missing is the selection of a line in the string listener.

It looks like you need to mark the listview line ...

 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" <shape> <solid android:color="#929292" /> </shape> </item> <item> <shape> <solid android:color="#FFFFFF" /> </shape> </item> </selector> 

From here: How to style a selected item in an Android ListView?

Answer 7

Doesn't this look like some sort of custom list using imagebuttom instead of a checkbox?

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <ImageView android:id="@+id/ivImage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" android:layout_gravity="left" android:contentDescription="@string/app_name" > </ImageView> <LinearLayout android:id="@+id/linearLayout1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:orientation="vertical" android:layout_weight="1" > <TextView android:id="@+id/tvDescr" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="5dp" android:text="" android:textSize="20sp" > </TextView> <TextView android:id="@+id/tvPrice" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:text="" > </TextView> </LinearLayout> </LinearLayout>