Gmail Style Listview

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

Solution 1:

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:

publicclassTestAdapterextendsBaseAdapter {

List<String> data;
boolean is_element_selected[];

publicTestAdapter(List<String> data) {
    this.data = data;
    is_element_selected = newboolean[data.size()];
}

publicvoidtoggleSelection(int index) {
    is_element_selected[index] = !is_element_selected[index];
    notifyDataSetChanged();
}

@OverridepublicViewgetView(int position, View convertView, ViewGroup parent) {
    //Initialize your view and stuffif (is_element_selected[position])
        convertView.setBackgroundColor(context.getResources().getColor(R.color.blue_item_selector));
    else
        convertView.setBackgroundColor(Color.TRANSPARENT);

     imageView.setOnClickListener(newView.OnClickListener() {
            @OverridepublicvoidonClick(View v) {
                toggleSelection(position);
            }
        });

      row.setOnClickListener(newView.OnClickListener() {
            @OverridepublicvoidonClick(View v) {
                //get to detailed view page
            }
        });

    return convertView;
}

Good luck!

Solution 2:

This is how i made my getview method:

publicViewgetView(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 = newViewHolder();
        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(newOnClickListener() {
        @OverridepublicvoidonClick(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;

}

privatevoidsetAnimListners(final MyListItem curMail) {
    AnimationListener animListner;
    animListner = newAnimationListener() {

        @OverridepublicvoidonAnimationStart(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 countprivatevoidsetCount() {
            if (curMail.isChecked()) {
                checkedCount++;
            } else {
                if (checkedCount != 0) {
                    checkedCount--;
                }
            }

        }

        // Show/Hide action modeprivatevoidsetActionMode() {
            if (checkedCount > 0) {
                if (!isActionModeShowing) {
                    mMode = ((MainActivity) context).startActionMode(newMainActivity.AnActionModeOfEpicProportions(context));
                    isActionModeShowing = true;
                }
            } elseif (mMode != null) {
                mMode.finish();
                isActionModeShowing = false;
            }

            // Set action mode titleif (mMode != null)
                mMode.setTitle(String.valueOf(checkedCount));

            notifyDataSetChanged();

        }

        @OverridepublicvoidonAnimationRepeat(Animation arg0) {
            // TODO Auto-generated method stub

        }

        @OverridepublicvoidonAnimationEnd(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"?><scalexmlns: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"?><scalexmlns: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/

Solution 3:

What you need is to set a listSelector.

What you'll need to do to create a listSelector is a xml drawable similar to the one Karl posted.

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

As you can see, item tags can even use android:drawable attribute in case you have a png you want to use to highlight a row. Look for all the attributes this tags has to offer and implements what you need.

Finally, to make sure your 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 via code:

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

Solution 4:

You have to set a choiceMode to your ListView.

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

Solution 5:

What's missing is the highlighting of the row on the row click listener.

Sounds like you need to theme the listview row...

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

From here: How do I style selected item in Android ListView?