I have a custom row that contains a text view and 3 Clickable Image Views.
onClick on any one of the ImageView this Image changes to another one.
My problem is that when I click on Image1 on row1, the image changed in both row1 and row9 as well, and when I click on row2, the image changed in row2 and row10 as well.. so On. I don't know why.
But I think it it about scrolling.
This is getView() in my Adapter:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
View vi = convertView;
if (vi == null) {
vi = inflater.inflate(R.layout.comprow, null);
}
TextView text = (TextView) vi.findViewById(R.id.name);
text.setText(data.get(position));
return vi;
}
And this is OnClick function for the first ImageView
public void one(View v) {
RelativeLayout row = (RelativeLayout)v.getParent();
ImageView im1 = (ImageView) row.findViewById(R.id.one);
ImageView im2 = (ImageView) row.findViewById(R.id.two);
ImageView im3 = (ImageView)row.findViewById(R.id.three);
im1.setImageResource(R.drawable.c0);
im2.setImageResource(R.drawable.b1);
im3.setImageResource(R.drawable.b2);
simpleAdpt.notifyDataSetChanged();
}
When you don't use of id, your changed repeat in all row because you worked with position,then you must set id to each row that create in getView(), now if you have a few choice, you can handle with array of integer with size of list, that in default is equal 0 then if you press one row the value of row changed, then in show image check the value of this row, if is zero then let in default, else check the value and select image that you want to show, I hope that you understand my word
Related
I have a custom layout for a Listview, each row item contains a button that when clicked it shows a small imageview in the item, however the actions i perform in one item, repeats for another item down the list, for example, if i click the button in item 1, the imageview will show up in item 1 and item 10, if i click the button in item 2, the Imageview will show up on item 2 and item 11 and while i scroll it will keep repeating in different items, heres the code for my custom adapter:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
mparent = parent;
if (convertView == null) {
convertView = mInflater.inflate(R.layout.places_item, parent, false);
holder = new ViewHolder();
holder.placeimage = (CircularImageView) convertView.findViewById(R.id.locationimage_pilayout);
holder.addbtn = (TextView) convertView.findViewById(R.id.addbtn_pilayout);
holder.delbtn = (TextView) convertView.findViewById(R.id.delbtn_pilayout);
holder.oribtn = (TextView) convertView.findViewById(R.id.oribtn_pilayout);
holder.placename = (TextView) convertView.findViewById(R.id.locationname_pilayout);
holder.selected = (ImageView) convertView.findViewById(R.id.selected_pilayout);
holder.origin = (ImageView) convertView.findViewById(R.id.origin_pilayout);
holder.swipeLayout = (SwipeRevealLayout) convertView.findViewById(R.id.swipe_pilayout);
holder.mainLayout = (LinearLayout) convertView.findViewById(R.id.main_pilayout);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
final Place item = getItem(position);
/*
my code assigning the button click listener and assigning the views
*/
return convertView;
}
Am i missing something? im sure this could be a simple fix, but i havent found it yet. any help would be kindly appreciated.
In ListView the individual views for rows, get reused. For example, let's say the window can show up to 10 rows inside the ListView. Now when you scroll down, the 1st view gets out of the window from the top, and a new 11th view comes into the window from the bottom. In order to save memory and CPU power, Android uses the same 1st view for the 11th view. That's the purpose of convertView and the if (convertView == null) {} else {} code.
So the reason why the image is being shown in the 1st item and also in the 11th item, is that they are exactly one view object. To tackle this issue, in the getView() method, you need to reset every attribute of every view and don't rely on the defaults.
So adding a line like the one below, will get rid of the mentioned problem:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
// all your code ...
holder.placeImage.setImageResource(0); //<-- This clears any previously set image.
return convertView;
}
After looking for some answers here, I find myself in a disturbing situation where my Listview is really getting on my nerve.
Here are the questions I looked for :
Maintain ListView Item State
How to save state of CheckBox while scrolling in ListView?
I'm using a custom adapter with a custom row as below.
My Listview is simple as it is displaying a custom row made of three elements :
1) an ImageView displaying contact picture cropped in a circle ;
2) a TextViewdisplaying the contact full name as plain text ;
3) and finally an ImageView that holds the purpouse of a CheckBox.
Please focus on the last element. The ImageView CheckBox-like will have its src changed upon click.
When the user click, the ImageView will switch between a check sign and an unchecked sign according to it's previous status. Possible status are : {checked | unchecked}
So far so good.
But as soon as I scroll the ListView, any aforementioned change will disappear as Android recycle unused view.
Here comes the so-called ViewHolder pattern. Unfortunately, this pattern is failling me on two issues :
First, when scrolling, my organized-in-an-alphabetical-order listview gets disorganized.
e.g. somehow, whitout any reason, the first displayed contact name gets displayed again later on the ListView as I scrolled. That can happen with any row ! So it would seem unused view are being wrongly re-used.
Second, and in accordance to the first issue, the checked status do seem to stay, but not always and if it does stay, it may very well stay on the wrong row ... and that can happen randomly, of course. Therefore ViewHoder is not a viable solution.
Before discouvering the ViewHolder pattern, I have been using a HashMap to store the item position upon click as followed :
ContactsListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
public final void onItemClick(final AdapterView<?> adapterView, final View view,
final int position, final long id) {
final ImageView check = (ImageView) view.findViewById(R.id.checkImage);
final TextView name = (TextView) view.findViewById(R.id.contactName);
final Boolean isChecked = Boolean.valueOf(checkedContactsList.isChecked(position));
if (isChecked != null && isChecked.booleanValue() == true) {
check.setImageDrawable(getActivity().getResources().getDrawable(R.drawable.unchecked_sign));
checkedContactsList.(position);
} else {
check.setImageDrawable(getActivity().getResources().getDrawable(R.drawable.checked_sign));
checkedContactsList.add(position, true);
}
}
});
I tried adding a different value instead of position.
I tried with ContactsListView.getPositionForView(view)
And I also tried with the View's ID, but still it doesn't work.
I wish I could use ContactsListView.getSelectedItemPosition() but it returns -1 as there is no selection event because I'm handling a touch/click event.
And this is how my Custom Adapter looks like :
public final View getView(final int position,
final View convertView, final ViewGroup parent) {
final LayoutInflater inflater = (LayoutInflater) this.context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
final View contactRowView = inflater.inflate(R.layout.contact_row, parent, false);
final ImageView contactPic = (ImageView) contactRowView.findViewById(R.id.contactPic);
final TextView contactName = (TextView) contactRowView.findViewById(R.id.contactName);
final ImageView checkImage = (ImageView) contactRowView.findViewById(R.id.checkImage);
// the list is the same as above and therefore contains the exact same entries
if (this.checkedContactsList.isChecked(position))
checkImage.setImageDrawable(this.context.getResources().getDrawable(R.drawable.checked_sign));
contactPic.setImageBitmap(cropePictureInCircle(this.contacts.get(position).getPicture()));
contactName.setText(this.contacts.get(position).getName());
return contactRowView;
}
Is there a good way to keep the checked row checked and the unchecked row unchecked in the given alphabetical order ?
Thanks !
For the list position change I know the solution but for the second problem I am still searching for a solution, anyway first make a viewHolder class;
public class ViewHolder{
//put all of your textviews and image views and
//all views here like this
TextView contactName;
ImageView checkImage;
ImageView contactImage;
}
Then edit your adapter:
#Override
public View getView(int position, View convertView, ViewGroup parent)
{
final View contactRowView = convertView;
ViewHolder holder;
if (contactRowView == null) {
final LayoutInflater inflater = (LayoutInflater)
this.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE
);
contactRowView =
inflater.inflate(R.layout.contact_row, parent,
false);
holder = new ViewHolder():
holder.contactPic = (ImageView)
contactRowView.findViewById(R.id.contactPic);
holder.contactName = (TextView)
contactRowView.findViewById(R.id.contactName);
holder.checkImage = (ImageView)
contactRowView.findViewById(R.id.checkImage);
contactRowView.setTag(holder);
} else {
holder = contactRowView.getTag();
// the list is the same as above and therefore contains the exact same entries
if (this.checkedContactsList.isChecked(position))
holder.checkImage.setImageDrawable(this.context.get.
Resources().getDrawable(R.drawable.checked_sign));
holder.contactPic.setImageBitmap(cropePictureInCircle(this.contacts.get(position).getPicture()));
holder.contactName.setText(this.contacts.get(position).getName());
return contactRowView;
}
}
Hope this helps and sorry because writing code from my phone is totally awkward.
Is it possible to retrieve text from a specific TextView element in a row inside a ListView where every row contains its own Layout.xml with 4 different TextViews? A row looks like --> | TextView1 TextView2 TextView3 TextView4 |. The rowcount of my ListView is depending on the row count of my SQLite database which the ListView is populated from. For example: if I click row #1 i want TextView1 for this row and if I click row #2 i want TextView1 for this particular row.
I Hope you understand, english ain't my native language.
I'm not really sure if I understood you, but I think you want to add a AdapterView.OnItemClickListener to your ListView. Implement this listener which only has one method:
onItemClick(AdapterView<?> parent, View view, int position, long id)
In your case view will be the row the user clicked and item is the position of the row in your adapter.
To retrieve the text of the row, first you should get the TextView (if your view is a container) with something like
TextView textView = (TextView) view.findViewById(R.id.your_textview_id);
and then retrieve the text with a call to textView.getText()
Hope it helps
If you're using an adapter based on the 'BaseAdapter' then You need to add an onClickListener for each TextView you want to retrieve its content inside your getView() method :
private class ViewHolder
{
TextView Tv1;
TextView Tv2;
}
public View getView(final int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView==null)
{
holder=new ViewHolder();
convertView = inflater.inflate(R.layout.yourXmlSource, null);
holder.tv1 = (TextView)convertView.findViewById(R.id.tv1);
holder.tv2 = (TextView)convertView.findViewById(R.id.tv2);
}
else
{
holder = (ViewHolder) convertView.getTag();
}
//Code to fill your Rows from the database here
holder.tv1.setOnClickListener(new OnClickListener()
{
#Override
public void onClick(View v)
{
Toast toast = Toast.makeText(v.getConext(), (TextView)v, Toast.LENGTH_LONG);
toast.show();
}
});
}
I use even and odd rows to set backgrond to my listview rows. In my efficientAdapter I set the row background as follows:
public View getView(int position, View convertView, ViewGroup parent) {
vi = convertView;
if (convertView == null) {
vi = inflater.inflate(R.layout.ecran_multiple_row, null);
holder = new ViewHolder();
holder.txIndex = (TextView) vi.findViewById(R.id.txIndex);
holder.txSTitle = (TextView) vi.findViewById(R.id.txSTitle);
holder.btOnOFF = (ImageView) vi.findViewById(R.id.btOnOFF);
vi.setTag(holder);
} else
holder = (ViewHolder) vi.getTag();
/*
* CHANGE ROW COLOR 0 WHITE 1 GRAY
*/
if ( position % 2 == 0) //0 even 1 odd..
vi.setBackgroundResource(R.drawable.listview_selector_odd);
else
vi.setBackgroundResource(R.drawable.listview_selector_even);
/*
* ONE ITEM IN ARRAY
*/
if (data.toArray().length==1){
holder.btOnOFF.setBackgroundResource(R.drawable.air_radio_button_rouge);
}else {
holder.btOnOFF.setBackgroundResource(R.drawable.air_deezer_check);
}
return vi;
}
and in my MainActivity.Class. I select an item using on itemclicklistener() as shown below:
**lvRMultiple.setOnItemClickListener(new OnItemClickListener() {
public void onItemClick(AdapterView<?> parent, View view,
int position, long id) {
imgview = (ImageView) view.findViewById(R.id.btOnOFF);
//And change its background here
imgview.setBackgroundResource(R.drawable.air_radio_button_rouge);
}
});**
When i clicked on an item btnOff image change successfully but when i scroll down it change to default background. Secondly when i click on one item after the other both becomes the new image but i want only the row clicked by the user to change to new image and the previous image are set to default.
All row view of a ListView created by the getView() method of BaseAdpter class. When ever we scroll the ListView all, new viable row create by getView() using recycle. So getView() called again and again when new row is viable on scroll.
There are two solution of your question:-\
You can save the status of ListView
// Save ListView state
Parcelable state = listView.onSaveInstanceState();
// Set new items
listView.setAdapter(adapter);
// Restore previous state (including selected item index and scroll position)
listView.onRestoreInstanceState(state)
And other solution is create RowView at runtime and add it on a Parent Layout by using addView() method.
LayoutInflater inflater = LayoutInflater.from(context);
// You should use the LinerLayout instead of the listview, and parent Layout should be inside of the ScrollView
parentView = (LinerLayout)this.findViewById(R.id.parentView);
for(int i = 0; i<=numberOfRow;i++){
LinearLayout rowView = (LinerLayout)inflater.inflate(R.layout.rowView);
ImageView rowImageView = (ImageView)rowView.findViewById(R.id.rowImage);
rowImageView.setOnClickListener(new View.onClickListListener(){
#Override
public void onClick(){
rowImageView.setImageBitmap(onClickBitmapImage);
}
});
parentView.addView(rowView);
}
Please check this answer Maintain/Save/Restore scroll position when returning to a ListView
More Reference
http://developer.android.com/reference/android/widget/Adapter.html#getView(int,android.view.View, android.view.ViewGroup)
The item changes back to the default background because the view gets recycled. This is the same problems of checkboxes losing their checked state
Check out this answer too see how to handle it:
CheckBox gets unchecked on scroll in a custom listview
As for your second problem, I believe it's already answered here:
highlighting the selected item in the listview in android
Hope it helps
I have a list. Each row includes an Image at left and two text views on right.
Based on server flag my application opens system media player or open another activity to show news detail.
In my adapter I want to add another image on top my video images (not news images). So, in XML file of Row I have another image View that its visibility is set to "Invisible" and I want to set it to "Visible" for each row which is video.
getView() method is like this:
#Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
convertView = myInflater.inflate(R.layout.list_news_adapter, null);
holder = new ViewHolder();
holder.ivIcon = (ImageView) convertView.findViewById(R.id.list_news_icon);
holder.ivPlay = (ImageView) convertView.findViewById(R.id.list_news_PlayIcon);
holder.tvTitle = (TextView) convertView.findViewById(R.id.list_news_title);
holder.tvDate = (TextView) convertView.findViewById(R.id.list_news_date);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.tvTitle.setText(mLatestNews.getTitle().get(position));
holder.tvDate.setText(localTime.get(position));
if(mLatestNews.getType().get(position).equalsIgnoreCase("VIDEO"))
holder.ivPlay.setVisibility(View.VISIBLE);
// Load and display image
String imageUrl = (mLatestNews.getImageLink().get(position));
imageUrl = imageUrl.trim().replaceAll(" ", "%20");
imageLoader.displayImage(imageUrl, holder.ivIcon, options);
return convertView;
}
static class ViewHolder {
ImageView ivIcon;
ImageView ivPlay;
TextView tvTitle;
TextView tvDate;
}
Normally first four items of list are video and rest are news. When I run the appllication, not only 4 first items, even second image will be activated (set to visible) for some news items.
correct result is like this image:
but after scroll of list, second image (white triangle) adds to news items. like this image:
I have no idea why it happens. any suggestion would be appreciated.
Oh, my god!!!!
It just needs "else". I changed the code like this:
if(mLatestNews.getType().get(position).equalsIgnoreCase("VIDEO"))
holder.ivPlay.setVisibility(View.VISIBLE);
else
holder.ivPlay.setVisibility(View.INVISIBLE);
Now, it's working.