Multiple selection in custom ListView with CAB - android

After reading and try'n'error for days, I´m giving up and ask for help.
< edit >
I am using ActionBarSherlock.
< /edit >
What I want to achieve:
A ListView with a custom layout for each row, where the user can select multiple list items.
A selected list item should have a different background color. When there is at least one item selected, a contextual action bar (CAB) should be shown.
It should look more or less like the multiple selection of emails in the GMail app. The only difference is that in the gmail app the selection is done by clicking the checkbox of a row, whereas I don´t want to have a checkbox, but a row should be selected no matter, where the user clicks.
What I tried:
Following this tutorial, using a Checkable row layout with some logic to change the background color when the check state was toggled, I got everything working except that I could not register a click listener like OnItemClickListener on the ListView to show the CAB. Neither providing a click listener for each row View helped because this prevented to change the background color of the selected items.
I also tried adding a MultiChoiceModeListener to the ListView like that
listView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE_MODAL);
listView.setMultiChoiceModeListener(new MultiChoiceModeListener() { //.. });
With the same result, no background color change.
What I am looking for: A hint or a tutorial or sample code how to do this. If you need some code snippets to help, let me know.

See if the code helps you(it's basically a ListActivity with a custom adapter to hold the status of checked items(+ different background)):
public class CABSelection extends ListActivity {
private ArrayList<String> mItems = new ArrayList<String>();
private SelectionAdapter mAdapter;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
for (int i = 0; i < 24; i++) {
mItems.add("Name" + i);
}
// R.layout.adapters_cabselection_row is a LinearLayout(with green
// background(#99cc00)) that wraps an ImageView and a TextView
mAdapter = new SelectionAdapter(this,
R.layout.adapters_cabselection_row, R.id.the_text, mItems);
setListAdapter(mAdapter);
getListView().setChoiceMode(ListView.CHOICE_MODE_MULTIPLE_MODAL);
getListView().setMultiChoiceModeListener(new MultiChoiceModeListener() {
private int nr = 0;
#Override
public boolean onCreateActionMode(ActionMode mode, Menu menu) {
MenuInflater inflater = getMenuInflater();
inflater.inflate(R.menu.cabselection_menu, menu);
return true;
}
#Override
public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
return false;
}
#Override
public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
StringBuilder sb = new StringBuilder();
Set<Integer> positions = mAdapter.getCurrentCheckedPosition();
for (Integer pos : positions) {
sb.append(" " + pos + ",");
}
switch (item.getItemId()) {
case R.id.edit_entry:
Toast.makeText(CABSelection.this, "Edited entries: " + sb.toString(),
Toast.LENGTH_SHORT).show();
break;
case R.id.delete_entry:
Toast.makeText(CABSelection.this, "Deleted entries : " + sb.toString(),
Toast.LENGTH_SHORT).show();
break;
case R.id.finish_it:
nr = 0;
mAdapter.clearSelection();
Toast.makeText(CABSelection.this, "Finish the CAB!",
Toast.LENGTH_SHORT).show();
mode.finish();
}
return false;
}
#Override
public void onDestroyActionMode(ActionMode mode) {
nr = 0;
mAdapter.clearSelection();
}
#Override
public void onItemCheckedStateChanged(ActionMode mode,
int position, long id, boolean checked) {
if (checked) {
nr++;
mAdapter.setNewSelection(position, checked);
} else {
nr--;
mAdapter.removeSelection(position);
}
mode.setTitle(nr + " rows selected!");
}
});
}
#Override
protected void onListItemClick(ListView l, View v, int position, long id) {
l.setItemChecked(position, !mAdapter.isPositionChecked(position));
}
private class SelectionAdapter extends ArrayAdapter<String> {
private HashMap<Integer, Boolean> mSelection = new HashMap<Integer, Boolean>();
public SelectionAdapter(Context context, int resource,
int textViewResourceId, List<String> objects) {
super(context, resource, textViewResourceId, objects);
}
public void setNewSelection(int position, boolean value) {
mSelection.put(position, value);
notifyDataSetChanged();
}
public boolean isPositionChecked(int position) {
Boolean result = mSelection.get(position);
return result == null ? false : result;
}
public Set<Integer> getCurrentCheckedPosition() {
return mSelection.keySet();
}
public void removeSelection(int position) {
mSelection.remove(position);
notifyDataSetChanged();
}
public void clearSelection() {
mSelection = new HashMap<Integer, Boolean>();
notifyDataSetChanged();
}
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = super.getView(position, convertView, parent);//let the adapter handle setting up the row views
v.setBackgroundColor(Color.parseColor("#99cc00")); //default color
if (mSelection.get(position) != null) {
v.setBackgroundColor(Color.RED);// this is a selected position so make it red
}
return v;
}
}
}
The R.layout.adapters_cabselection_row is a custom layout for the row(a very simple one) with a green background:
<?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="match_parent"
android:background="#99cc00" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/ic_launcher" />
<TextView
android:id="#+id/the_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="#ffffff"
android:textSize="17sp"
android:textStyle="bold" />
</LinearLayout>
R.menu.cabselection_menu is a menu file with 3 options(edit, delete, finish the CAB) which don't do anything except pop a Toast with a message regarding the rows selected:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+id/edit_entry"
android:icon="#android:drawable/ic_menu_edit"
android:title="Edit!"/>
<item
android:id="#+id/delete_entry"
android:icon="#android:drawable/ic_menu_delete"
android:title="Delete!"/>
<item
android:id="#+id/finish_it"
android:icon="#android:drawable/ic_menu_crop"
android:title="Get me out!"/>
</menu>

I think the easiest way is to apply
android:background="android:attr/activatedBackgroundIndicator"
To which ever layout is the one you will be clicking.
This highlights the layout when selected using
listView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE_MODAL);
worked for me anyway

Using ActionBarSherlock the MultiChoiceModeListener used in Luksprog´s answer is not yet available if you want to support API level < 11.
A workaround is to use the onItemClickListener.
List setup:
listView = (ListView) timeline.findViewById(android.R.id.list);
listView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
listView.setItemsCanFocus(false);
listView.setAdapter(new ListAdapter(getActivity(), R.layout.cleaning_list_item, items));
Listener of ListFragment or ListActivity:
#Override
public void onListItemClick(ListView l, View v, int position, long id) {
SparseBooleanArray checked = listView.getCheckedItemPositions();
boolean hasCheckedElement = false;
for (int i = 0; i < checked.size() && !hasCheckedElement; i++) {
hasCheckedElement = checked.valueAt(i);
}
if (hasCheckedElement) {
if (mMode == null) {
mMode = ((SherlockFragmentActivity) getActivity()).startActionMode(new MyActionMode());
mMode.invalidate();
} else {
mMode.invalidate();
}
} else {
if (mMode != null) {
mMode.finish();
}
}
}
Where MyActionMode is an implementation of ActionMode.Callback:
private final class MyActionMode implements ActionMode.Callback { /* ... */ }

Related

How to implement checkbx with custom listview

   I want to make product list with their price,name,image and checkbox,
User checks the product as the user wants and then pass it to second activity,
       
 In second activity it display the item checked with their price,So what method i have to use specially for checkbox input,I am newbie to android so please help me,
I suppose you have a class Product with price, name ...
You have to create a layout (list_row.xml) with the format that you want, for example:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:background="?android:attr/activatedBackgroundIndicator"
android:layout_height="match_parent">
<TextView
android:id="#+id/tv_subtitle_list"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="#+id/tv_title_list"
android:layout_below="#+id/tv_title_list"
android:longClickable="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/tv_title_list"
android:longClickable="true" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignRight="#+id/tv_title_list"
android:layout_alignBottom="#+id/tv_title_list"
android:id="#+id/img_sync"
android:longClickable="true" />
</RelativeLayout>
After that, you need a List Adapter, the best way is create a Custom List adapter
public class ProductListAdapter extends ArrayAdapter<Product>
{
private List<Product> objects;
private Context context;
public ProductListAdapter(Context context, int textViewResourceId, List<Product> objects)
{
super(context, textViewResourceId, objects);
this.context = context;
this.objects = objects;
}
#Override
public int getCount() {
return objects.size();
}
#Override
public Incidence getItem(int position) {
return objects.get(position);
}
#Override
public long getItemId(int position) {
if(objects.get(position)==null) return -1;
return objects.get(position).getId(); // your database id
}
#Override
public void addAll(Collection<? extends Product> objects) {
this.objects= new ArrayList<>(objects);
notifyDataSetChanged();
}
#Override
public View getView(int position, View convertView, ViewGroup parent)
{
Incidence rowItem = getItem(position); // get selected item
if (convertView == null)
{
LayoutInflater mInflater = (LayoutInflater) context
.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
convertView = mInflater.inflate(R.layout.list_row, null);
}
/* Access to row components */
TextView title = (TextView) convertView.findViewById(R.id.tv_title_list); // name
TextView subtitle = (TextView) convertView.findViewById(R.id.tv_subtitle_list); // price
ImageView img = (ImageView) convertView.findViewById(R.id.img_sync); // image
title.setText(rowItem.getName());
subtitle.setText(rowItem.getPrice());
img.setImageResource(android.R.drawable.ic_menu_share);
return convertView;
}
}
In your fragment or activity you create the adapter:
public class FragListIncidences extends ListFragment
{
public void initUI() // include this in your onCreate
{
mAdapter = new ProductListAdapter(getActivity(),
android.R.layout.simple_list_item_1, new ArrayList<Product>());
setListAdapter(mAdapter); // because of ListFragment
}
}
The checkbox functionality that you want can be implemented in two ways:
Add Cechbox component in your list_row.xml
You can use a contextual action mode menu. Here you have an example http://developer.android.com/intl/es/guide/topics/ui/menus.html#CAB
public void initUI() // include this in your onCreate
{
mAdapter = new ProductListAdapter(getActivity(),
android.R.layout.simple_list_item_1, new ArrayList<Product>());
setListAdapter(mAdapter); // because of ListFragment
mListView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE_MODAL);
mListView.setMultiChoiceModeListener(new AbsListView.MultiChoiceModeListener()
{
#Override
public void onItemCheckedStateChanged(ActionMode mode, int position,
long id, boolean checked) {
// Here you can do something when items are selected/de-selected,
// such as update the title in the CAB
final int checkedCount = mListView.getCheckedItemCount();
mode.setTitle(checkedCount + " Selected");
}
#Override
public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
// Respond to clicks on the actions in the CAB
switch (item.getItemId()) {
case R.id.action_get:
getSelectedItems();
mode.finish(); // Action picked, so close the CAB
return true;
default:
return false;
}
return false;
}
#Override
public boolean onCreateActionMode(ActionMode mode, Menu menu) {
// Inflate the menu for the CAB
MenuInflater inflater = mode.getMenuInflater();
contextual_menu =menu;
inflater.inflate(R.menu.subactions, menu);
}
#Override
public void onDestroyActionMode(ActionMode mode) {
// Here you can make any necessary updates to the activity when
// the CAB is removed. By default, selected items are deselected/unchecked.
}
#Override
public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
// Here you can perform updates to the CAB due to
// an invalidate() request
return false;
}
});
}
private void getSelectedItems() {
final SparseBooleanArray selected = mListView.getCheckedItemPositions();
for (int i = (selected.size() - 1); i >= 0; i--)
if (selected.valueAt(i))
doWhateverYouWant (selected.keyAt(i));
}
In java you have to instantiate each checkBox that you put into your layouts (i.e. CheckBox checkbox1 = new (Checkbox) findViewById(R.id.checkbox1);
Then all you have to do is put a few if() statements into your onCreate like this:
if(checkbox1.isChecked == true){
//send the info to your next activity
}else{
//nothing
}

How to highlight selected gridview items

im using gridview CHOICE_MODE_MULTIPLE_MODAL to select multiple items(images) in my gridview .
I used MultiChoiceModeListener to achieve this, the problem is selected items are not get highlighted
Selector xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_selected="true" android:drawable="#color/green"/>
<item android:state_pressed="true"
android:drawable="#color/blue"/> <!-- pressed state -->
<item android:state_focused="true"
android:drawable="#color/blue"/> <!-- focused state -->
<item android:drawable="#android:color/transparent"/> <!-- default state -->
</selector>
When I touch an item it get covered with blue (i think this happens bcoz i used gridView.setDrawSelectorOnTop(true); )...as soon as i lift my finger blue color get removed.
I want the selected items to get highlighted with semi transparent blue color and it should stay highlighted until I deselect the item.
Java Code:
public class HappyFragment extends ParentFragment {
public HappyImageAdapter imageAdapter;
private List<ResolveInfo> mApps;
GridView gridView;
public static HappyFragment newInstance() {
HappyFragment fragment = new HappyFragment();
return fragment;
}
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// if ((savedInstanceState != null) && savedInstanceState.containsKey(KEY_CONTENT)) {
// // mContent = savedInstanceState.getString(KEY_CONTENT);
// }
}
#Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.happy_fragment_layout, container, false);
// ImageView iv= (ImageView) view.findViewById(R.id.imageView1);
gridView = (GridView)view.findViewById(R.id.gvHappy);
// Instance of ImageAdapter Class
imageAdapter = new HappyImageAdapter(getActivity());
gridView.setAdapter(imageAdapter);
gridView.setChoiceMode(GridView.CHOICE_MODE_MULTIPLE_MODAL);
gridView.setMultiChoiceModeListener(new MultiChoiceModeListener());
gridView.setDrawSelectorOnTop(true);
gridView.setSelector(getResources().getDrawable(R.drawable.gridview_selector));
gridView.setOnItemLongClickListener(new OnItemLongClickListener() {
public boolean onItemLongClick(AdapterView<?> arg0, View arg1, int position, long arg3) {
Toast.makeText(getActivity(), String.valueOf(imageAdapter.mThumbIds[position]), Toast.LENGTH_SHORT).show();
return true;
}
});
gridView.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View v,int position, long id) {
if(BaseActivity.isinint) { // check if any app cares for the result
int ImageResourse=imageAdapter.mThumbIds[position];
Uri path = Uri.parse("android.resource://dragonflymobile.stickers.lifestickers/" + ImageResourse);
Intent shareIntent = new Intent(android.content.Intent.ACTION_SEND, path); //Create a new intent. First parameter means that you want to send the file. The second parameter is the URI pointing to a file on the sd card. (openprev has the datatype File)
((Activity)getActivity()).setResult(Activity.RESULT_OK, shareIntent); //set the file/intent as result
((Activity)getActivity()).finish(); //close your application and get back to the requesting application like GMail and WhatsApp
return; //do not execute code below, not important
} else {
Intent intent = new Intent(getActivity(), PreviewActivity.class);
intent.putExtra("Image Int", imageAdapter.mThumbIds[position]);
startActivity(intent);
}
}
});
return view;
}
#Override
public void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
// outState.putString(KEY_CONTENT, mContent);
}
//multi select mode codes
public class MultiChoiceModeListener implements GridView.MultiChoiceModeListener {
public boolean onCreateActionMode(ActionMode mode, Menu menu) {
mode.setTitle("Select Items");
mode.setSubtitle("One item selected");
return true;
}
public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
return true;
}
public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
return true;
}
public void onDestroyActionMode(ActionMode mode) {
}
public void onItemCheckedStateChanged(ActionMode mode, int position, long id, boolean checked) {
int selectCount = gridView.getCheckedItemCount();
switch (selectCount) {
case 1:
mode.setSubtitle("One item selected");
break;
default:
mode.setSubtitle("" + selectCount + " items selected");
break;
}
}
}
}
just follow this,
1.put your grid view child item in FrameLayout
2.give FrameLayout property android:foreground="?android:attr/activatedBackgroundIndicator"
that's it... no need to use extra library
okay i found this 3rd party library which do exactly this with less code
here is the github link
and here is a gridview with images tutorial link
In case that anyone wants a solution without thrid library just put this code inside
onItemCheckedStateChanged (here gv is your gridView name)
if(checked){
View tv = (View) gv.getChildAt(position);
tv.setBackgroundColor(Color.RED);
}else{
View tv = (View) gv.getChildAt(position);
tv.setBackgroundColor(Color.TRANSPARENT);
}
gridView.setMultiChoiceModeListener(new AbsListView.MultiChoiceModeListener() {
#Override
public void onItemCheckedStateChanged(android.view.ActionMode actionMode, int i, long l, boolean b) {
// Capture total checked items
final int checkedCount = gridView.getCheckedItemCount();
// Set the CAB title according to total checked items
actionMode.setTitle(checkedCount + " Selected");
if(gridView.getChildAt(i).isSelected()) {
gridView.getChildAt(i).setBackgroundColor(Color.parseColor("#FF4081"));
}else{
gridView.getChildAt(i).setBackgroundColor(Color.parseColor("#b1e76905"));
}
// Calls toggleSelection method from ListViewAdapter Class
adapter.toggleSelection(i);
}

Android Select multiple items in listview

I'm trying to implement multiple list item selection and user can perform actions based on menu item appears on actionbar.
I have tried a way ListView.CHOICE_MODE_MULTIPLE_MODAL but this option works only for API 11 or above.
Is there a way we can make use of the same technique for API 11 below i.e below code works only API 11 onwards.
list.setMultiChoiceModeListener(new MultiChoiceModeListener() {
#Override
public void onItemCheckedStateChanged(ActionMode mode,
int position, long id, boolean checked) {
// Capture total checked items
final int checkedCount = list.getCheckedItemCount();
// Set the CAB title according to total checked items
mode.setTitle(checkedCount + " Selected");
// Calls toggleSelection method from ListViewAdapter Class
listviewadapter.toggleSelection(position);
}
Using ActionBarSherlock the MultiChoiceModeListener if you want to support API level < 11.
A workaround is to use the onItemClickListener.
List setup:
listView = (ListView) timeline.findViewById(android.R.id.list);
listView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
listView.setItemsCanFocus(false);
listView.setAdapter(new ListAdapter(getActivity(), R.layout.cleaning_list_item, items));
Listener of ListFragment or ListActivity:
#Override
public void onListItemClick(ListView l, View v, int position, long id) {
SparseBooleanArray checked = listView.getCheckedItemPositions();
boolean hasCheckedElement = false;
for (int i = 0; i < checked.size() && !hasCheckedElement; i++) {
hasCheckedElement = checked.valueAt(i);
}
if (hasCheckedElement) {
if (mMode == null) {
mMode = ((SherlockFragmentActivity) getActivity()).startActionMode(new MyActionMode());
mMode.invalidate();
} else {
mMode.invalidate();
}
} else {
if (mMode != null) {
mMode.finish();
}
}
}
Where MyActionMode is an implementation of ActionMode.Callback:
private final class MyActionMode implements ActionMode.Callback { /* ... */ }

Getting issue to set the color on list view item

I have list with items having two textview and one imageview.I inflate the list with ArrayAdapter.Everything is working fine except changing list item color on click.I have 22 items in my listview. Primarily listview displaying 10 items on the screen and get the other items on scroll.Now my problem is when I clicks on a single item between 0-9(initial 10 items) item changes their color properly on click, but when i scroll and clicks on an item having position greater then 9(after the initial 10 items) my activity crashes.I am referring http://www.mail-archive.com/android-developers#googlegroups.com/msg09740.html link to write the code in for loop.Help me to get rid of this problem.Any suggestions or solutions will be highly appreciated.Thanx in advance.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN); // to hide the virtual keyboard
setContentView(R.layout.defect_pic_listview);
try{
adapter = new MyArrayAdapter(this,makeList());
setListAdapter(adapter);
adapter.notifyDataSetChanged();
getListView().setChoiceMode(ListView.CHOICE_MODE_SINGLE);
getListView().setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
// Toast.makeText(getApplicationContext(), "Item "+position+" is clicked",
// Toast.LENGTH_SHORT).show();
System.out.println("position"+position);
int first = getListView().getFirstVisiblePosition();
System.out.println("first="+first);
int last = getListView().getLastVisiblePosition();
System.out.println("last="+last);
int total = last - first;
System.out.println("total="+total);
if(getListView().isItemChecked(position)){
for(int i = 0 ; i <= last ; i++){
System.out.println("i="+i);
if(first+i == position){
getListView().getChildAt(i).setBackgroundColor(Color.GREEN);
System.out.println("l1="+getListView());
// l.getItemAtPosition(i);
// System.out.println("l position"+l);
}
else{
getListView().getChildAt(i).setBackgroundColor(Color.TRANSPARENT);
System.out.println("l2="+getListView());
}
}
}
else{
getListView().getChildAt(position - first).setBackgroundColor(Color.TRANSPARENT);
}
}
});
}
catch(Exception e){
Log.d("error",e.getMessage());
}
}
Use this code for the for loop.
if(getListView().isItemChecked(position))
{
for(int i = 0 ; i < total ; i++)
{
System.out.println("i="+i);
if(first+i == position)
{
getListView().getChildAt(i).setBackgroundColor(Color.GREEN);
System.out.println("l1="+getListView());
// l.getItemAtPosition(i);
// System.out.println("l position"+l);
}
else
{
getListView().getChildAt(i).setBackgroundColor(Color.TRANSPARENT);
System.out.println("l2="+getListView
());
}
}
I think your intention to only change the bacground color of clicked item. For that you not need to add for loop. if your intention is same as i said then use this code only at the place of for loop.
getListView().getChildAt(position).setBackgroundColor(Color.GREEN);
There is other way to do.
First you need to add a selector xml e.g. listviewitem_bg.xml
<item android:drawable="#drawable/listview_normal" android:state_enabled="true" android:state_pressed="false"/>
<item android:drawable="#drawable/listview_press" android:state_enabled="true" android:state_pressed="true"/>
and then set it as a background of your list view cell.
You can try like this:
public class CustomAdapter extends ArrayAdapter<String> {
String[] array;
Context mContext;
LayoutInflater mInflater;
int[] itemStates;
public CustomAdapter(Context context, int textViewResourceId,
String[] objects)
{
super(context, textViewResourceId, objects);
array=objects;
mContext=context;
mInflater = LayoutInflater.from(context);
//save all buttons state as 0(not clicked) initially
itemStates=new int[objects.length];
for(int i=0;i<objects.length;i++)
{
itemStates[i]=0;
}
}
#Override
public View getView(int position, View convertView, ViewGroup parent)
{
final ViewHolder holder;
if(convertView==null)
{
convertView = mInflater.inflate(R.layout.custom_listitem, null);
holder = new ViewHolder();
holder.text=(TextView)convertView.findViewById(R.id.text);
holder.layout=(LinearLayout)convertView.findViewById(R.id.linear_layout); // outer most linear layout iin custom_listitem xml
convertView.setTag(holder);
}
else
holder=(ViewHolder)convertView.getTag();
holder.text.setText(array[position]);
if(itemStates[position]==0)
{
holder.layout.setBackgroundResource(R.drawable.red_gradient); // item is not clicked/selected yet
}
else
{
holder.button.setBackgroundResource(R.drawable.green_gradient); // item is clicked/selected so change its color
}
final int pos=position;
holder.layout.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
itemStates[pos]=1;
holder.button.setBackgroundResource(R.drawable.green_gradient);
}
});
return convertView;
}
static class ViewHolder
{
TextView text;
LinearLayout layout;
}
}
This will give you behavior like:
Initially all items would be red colored.
if you click on 2nd item,then it will turn green(according to my code).
Now when you scroll and click on any other items,they will keep on turning green from red.
But if you click on "green" colored item,it will again turn red like it is unselected!
you can do something like this
# outside of on create
View prevView;
then in oncreate
lv.setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> arg0, View view, int arg2,
long arg3) {
if (prevView != null) {
prevView.setBackgroundColor(Color.TRANSPARENT);
}
view.setBackgroundColor(Color.RED);
prevView = view;
}
});
I am giving the answer to my own question.
Here's the perfect running code:-
getListView().setOnItemClickListener(new OnItemClickListener() {
#Override
public void onItemClick(AdapterView<?> parent, View view, int position,
long id) {
// Toast.makeText(getApplicationContext(), "Item "+position+" is clicked",
// Toast.LENGTH_SHORT).show();
System.out.println("position="+position);
int first = getListView().getFirstVisiblePosition();
System.out.println("first="+first);
int last = getListView().getLastVisiblePosition();
System.out.println("last="+last);
int total = last - first;
System.out.println("total="+total);
if(getListView().isItemChecked(position)){
for(int i = first ; i <= last ; i++){
System.out.println("i="+i);
if(i == position){
Log.w("TAG", "I am in If block");
getListView().getChildAt(i-first).setBackgroundColor(Color.GREEN);
System.out.println("l1="+getListView());
// l.getItemAtPosition(i);
// System.out.println("l position"+l);
}
else{
getListView().getChildAt(i-first).setBackgroundColor(Color.TRANSPARENT);
System.out.println("l2="+getListView());
}
}
}
else{
getListView().getChildAt(position).setBackgroundColor(Color.TRANSPARENT);
}
}
});
A cleaner(?) solution I've successfully used is to create an extension widget of LinearLayout (or whatever root view type you use for your listitem layout) that implements Checkable.
public class CheckableLinearLayout extends LinearLayout implements Checkable {
boolean checked = false;
public CheckableLinearLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CheckableLinearLayout(Context context) {
super(context);
}
#Override
public void setChecked(boolean checked) {
this.checked = checked;
updateView();
}
/* (non-Javadoc)
* #see android.widget.Checkable#isChecked()
*/
#Override
public boolean isChecked() {
return this.checked;
}
/* (non-Javadoc)
* #see android.widget.Checkable#toggle()
*/
#Override
public void toggle() {
this.checked=!this.checked;
updateView();
}
private void updateView() {
if (this.checked) {
//Change to Whatever your checked color should be, maybe expose this as attribute so i't can be changed from xml attribute
setBackgroundResource(R.color.default_background_color);
} else {
setBackgroundDrawable(null);
}
invalidate();
}
}
Then in your item layout xml:
<my.app.widgets.CheckableLinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
..any views for your listitem
<my.app.widgets.CheckableLinearLayout/>

Gmail-like ListView with checkboxes (and using the ActionBar)

I'm trying to recreate what Google did with the ListView in the Gmail app. In particular, I would like to have each list item include a CheckBox and two TextViews (one on top of the other). I need listeners for when the CheckBox is checked (or clicked) and when anywhere else on the list item is clicked. Lastly, I'd like the ActionBar to reflect that items are selected and provide options like Select All, Select None, etc (see this screenshot).
So far, here's the layout I came up with.
<?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="match_parent"
android:orientation="horizontal" >
<CheckBox android:id="#+id/checkBox"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical|center_horizontal" />
<LinearLayout android:id="#+id/linearLayout1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="6dp"
android:focusable="true"
android:clickable="true" >
<TextView android:id="#+id/titleTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp" />
<TextView android:id="#+id/dateTextView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp" />
</LinearLayout>
</LinearLayout>
This displays everything properly, but I need pointers on how to set up the listeners for the two Views (#+id/checkBox and #+id/linearLayout1). I have looked at the List16 API demo, but they're using the simple_list_item_activated_1 layout and I'm not sure what the XML for that looks like. As their code suggests, I created a ModeCallback class that implements ListView.MultiChoiceModeListener and I set the ListView's choice mode to CHOICE_MODE_MULTIPLE_MODAL, but I don't know how to get the CheckBox in my layout to work with this.
Has anyone successfully copied the Gmail app's ListView behavior? I've searched quite a bit and could not come up with anything (despite several others asking similar questions, like this one - most answers just point back to this same API demo).
Also, for context, I'm loading data from a SQLite database into the list and I've created my own Cursor adapter (which works fine). I have a feeling I need to set up listeners in this class in the newView() and bindView() methods, but everything I've tried hasn't worked.
Any ideas?
This will work in SDK 7 (android 2.1) and higher. (together with SherlockActionBar)
Totaly mimic gmail listbox experience.
I override onTouchEvent so press in the left corner side will activate selection mode;
mutch better then trying to click on the tiny cheackbox.
I override performItemClick so pressing not in the left will act as a Regular press action.
I override setItemChecked so it will update mActionMode as needed.
public class SelectListView extends ListView {
private SherlockFragmentActivity mActivity;
ActionMode mActionMode;
public SelectListView(Context context) {
this( context, null, 0);
}
public SelectListView(Context context, AttributeSet attrs) {
this( context, attrs, 0);
}
public SelectListView(Context context, AttributeSet attrs, int defStyle) {
super( context, attrs, defStyle );
setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
mActivity = (SherlockFragmentActivity) context;
}
#Override
public boolean performItemClick(View view, int position, long id) {
OnItemClickListener mOnItemClickListener = getOnItemClickListener();
if (mOnItemClickListener != null) {
playSoundEffect(SoundEffectConstants.CLICK);
if (view != null)
view.sendAccessibilityEvent(AccessibilityEvent.TYPE_VIEW_CLICKED);
mOnItemClickListener.onItemClick(this, view, position, id);
return true;
}
return false;
}
boolean mSelectionMode = false;
int mStartPosition;
#Override
public boolean onTouchEvent(MotionEvent ev) {
final int action = ev.getAction();
final int x = (int) ev.getX();
final int y = (int) ev.getY();
if (action == MotionEvent.ACTION_DOWN && x < getWidth() / 7) {
mSelectionMode = true;
mStartPosition = pointToPosition(x, y);
}
if (!mSelectionMode)
return super.onTouchEvent(ev);
switch (action) {
case MotionEvent.ACTION_DOWN:
break;
case MotionEvent.ACTION_MOVE:
if (pointToPosition(x, y) != mStartPosition)
mSelectionMode = false;
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
default:
mSelectionMode = false;
int mItemPosition = pointToPosition(x, y);
if (mStartPosition != ListView.INVALID_POSITION)
setItemChecked(mItemPosition, !isItemChecked(mItemPosition));
}
return true;
}
#Override
public void setItemChecked(int position, boolean value) {
super.setItemChecked(position, value);
// boolean r = getAdapter().hasStableIds();
int checkedCount = getCheckItemIds().length;
if (checkedCount == 0) {
if (mActionMode != null)
mActionMode.finish();
return;
}
if (mActionMode == null)
mActionMode = mActivity.startActionMode(new ModeCallback());
mActionMode.setTitle(checkedCount + " selected");
}
class ModeCallback implements ActionMode.Callback {
#Override
public boolean onCreateActionMode(ActionMode mode, Menu menu) {
menu.add(getResources().getString(R.string.aBar_remove)).setIcon(R.drawable.ic_action_trash)
.setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS);
return true;
}
#Override
public boolean onPrepareActionMode(ActionMode mode, Menu menu) {
return true;
}
#Override
public boolean onActionItemClicked(ActionMode mode, MenuItem item) {
Toast.makeText(mActivity, "Delted items", Toast.LENGTH_SHORT).show();
mode.finish();
return true;
}
#Override
public void onDestroyActionMode(ActionMode mode) {
mActionMode = null;
clearChecked();
}
}
public void clearChecked() {
SparseBooleanArray CItem = getCheckedItemPositions();
for (int i = 0; i < CItem.size(); i++)
if (CItem.valueAt(i))
super.setItemChecked(CItem.keyAt(i), false);
}
}
you can use any listbox adapter you need.
if you have a checkbox on your list_item_layout tou need to extent your adapter like this:
ArrayAdapter<String> mAdapter = new ArrayAdapter<String>(this, R.layout.simple_list_item_multiple_choice,
R.id.text1, Cheeses.sCheeseStrings) {
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = super.getView(position, convertView, parent);
CheckBox checkBox = (CheckBox) v.findViewById(R.id.CheckBox);
checkBox.setChecked(((ListView)parent).isItemChecked(position));
return v;
}
};
Don't forget to use android:background="?attr/activatedBackgroundIndicator" on your list_item_layout.xml
The mode in the figure is called action mode. If you are using your custom row view and custom adapter, you don't have to use CHOICE_MODE_MULTIPLE_MODAL to start action mode. I tried it once and failed, and I suspect it is used for built-in adapter.
In order to call the action mode by yourself in your code, call method startActionMode in any listener method of any of your view, let it be checkbox, textview or something like that. You then pass the ModeCallback as parameters into it, and do whatever operation you want to do in ModeCallback class.
I don't think this one would work on pre-3.0 Android though.
Here is a brief example. I have a expandable list activity and would like to call out the action mode menu when user check/uncheck the checkbox, and here is my getChildView method in my custom adapter class:
public View getChildView(int groupPosition, int childPosition,
boolean isLastChild, View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = inflater.inflate(R.layout.childrow, null);
}
CheckBox cb = (CheckBox)convertView.findViewById(R.id.row_check);
cb.setChecked(false); // Initialize
cb.setTag(groupPosition + "," + childPosition);
cb.setFocusable(false); // To make the whole row selectable
cb.setOnCheckedChangeListener(new OnCheckedChangeListener() {
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
String tag = (String)buttonView.getTag();
String[] pos = tag.split(",");
if (isChecked) {
if (mActionMode == null) mActionMode = startActionMode(mMultipleCallback);
}
else {
if (mActionMode != null) { // Only operate when mActionMode is available
mActionMode.finish();
mActionMode = null;
}
}
}
});
TextView tvTop = (TextView)convertView.findViewById(R.id.row_text_top);
TextView tvBottom = (TextView)convertView.findViewById(R.id.row_text_bottom);
tvTop.setText(mChildren.get(groupPosition).get(childPosition));
tvBottom.setText(mChildrenSize.get(groupPosition).get(childPosition));
return convertView;
}
In addition tocnbuff410's answer use the following code to update checked items count
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (isChecked) {
++checkBoxCount;
} else {
--checkBoxCount;
}
...
if (mActionMode != null) {
mActionMode.setSubtitle(checkBoxCount + " item(s) selected.");
}
I can confirm that following code would not work on checkboxes of custom listviews. However, long press would still work:
listView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE_MODAL);
listView.setMultiChoiceModeListener(new ModeCallback());
Selecting checkbox on custom ListView would not trigger actionmode. Only inbuilt ListViews e.g. extending ListActivity would automatically do that.

Categories

Resources