I have a listview and it's scrolable. I have few listview items and it's pulled from database. My problem is, each listview items have a button and i've setOnclickListener to the button inside getView. Now let's say there's 5 items and i tap on button for item number 1, the position is 0 and when i scroll to the end of the list, i can see the button for item number 5 is clicked. When i scroll till middle of the list, sometimes the button randomly clicked and i can see from my logcat, the particullar button's position is 0. How come?
Here is my getView' code
public View getView(final int position, View convertView, ViewGroup parent) {
View v = convertView;
if (v == null) {
LayoutInflater vi = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = vi.inflate(R.layout.newsfeed_layout, parent, false);
}
final Button btnLike = (Button) v.findViewById(R.id.buttonLike);
btnLike.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
String buttonText = btnLike.getText().toString();
if(buttonText.equals("LIKE")){
Toast.makeText(postedItems.this, "Liked This item" + position, Toast.LENGTH_SHORT).show();
btnLike.setPadding(4,0,12,0);
btnLike.setText("UNLIKE");
btnLike.setTextColor(Color.parseColor("#ffffff"));
btnLike.setBackgroundResource(R.drawable.likedredbutton);
}else if(buttonText.equals("UNLIKE")){
Toast.makeText(postedItems.this, "Unlike This Item" + position, Toast.LENGTH_SHORT).show();
btnLike.setPadding(4,0,20,0);
btnLike.setText("LIKE");
btnLike.setTextColor(Color.parseColor("#737373"));
btnLike.setBackgroundResource(R.drawable.cornerstyledbutton);
}
}
});
return v;
}
First, to understand the problem: this occurs because ListView reuses views as you scroll, to improve performance. That's the explanation for the convertView parameter.
Because of this, you need to make sure that whatever state you want to store for each item is stored in the adapter itself or wherever you store its backing data -- and that when you implement getView(), the UI is fully updated to reflect this data (since it will have whatever properties you set on it the last time it was used).
In this case, you need to store whether each item is "liked" or "unliked". And then, always set the properties of btnLike to reflect this before returning.
As an example, your code would have to be more or less like this:
public View getView(final int position, View convertView, ViewGroup parent)
{
View v = convertView;
if (v == null) {
LayoutInflater vi = ...;
}
final Button btnLike = (Button) v.findViewById(R.id.buttonLike);
if (isLiked(position))
setButtonAsUnlike(btnLike);
else
setButtonAsLike(btnLike);
btnLike.setOnClickListener(new View.OnClickListener()
{
#Override
public void onClick(View v)
{
if (!isLiked(position))
{
// Not liked before, so like now.
setLiked(position, true); // store this value.
setButtonAsUnlike(btnLike); // the button is now "unlike"
}
else
{
// Liked before, unliked now.
setLiked(position, false); // store this value.
setButtonAsLike(btnLike); // the button is now "like"
}
}
});
return v;
}
where isLiked(position) queries the data, setLiked(position, boolean) updates it, and setButtonAsLike(Button) and setButtonAsUnlike(Button) update the visual properties of the Button as you are doing now.
Related
What do I want to achieve?
In the below SS, when user touches 'vote' button, these vertical progress bars (custom) will be set according to the voting percentages retrieved from server for that particular row.
What is the obstacle?
I have onClickListener inside getView of the CustomAdapter, and when I manipulate the ProgressBar instance (which is in ViewHolder Class), supposingly I want to see the updated ProgressBar on ONLY the one row of the listview that has triggered that action, but, I see every once 3 rows that I scroll down.
Example: I clicked first row, so first row has updated its progress bar, but 4th, 7th, 10th... rows are also updated EVEN IF I don't touch 'vote button'.
My Guessing
I think this problem is related to recycling the view, the weird number is 3 in this case but when I make rows smaller it goes '4', so that is the only clue I have.
SS & Codes
ScreenShot: bit.ly/sofscreenshot
Code:
public View getView(int position, View convertView, ViewGroup parent) {
final ViewHolder holder;
LayoutInflater mInflater = (LayoutInflater) context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
if (convertView == null) {
convertView = mInflater.inflate(layout, null);
holder = new ViewHolder();
//some more initialization
holder.pb1 = (ProgressBar) convertView.findViewById(R.id.leftProgress);
holder.pb2 = (ProgressBar) convertView.findViewById(R.id.rightProgress);
holder.leftVoteButton = (Button) convertView.findViewById(R.id.leftButton);
holder.rightVoteButton = (Button) convertView.findViewById(R.id.rightButton);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
holder.leftVoteButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
holder.pb1.setVisibility(View.VISIBLE);
holder.pb2.setVisibility(View.VISIBLE);
/Some codes...
holder.pb1.setProgress(50);
holder.pb2.setProgress(50);
}
});
}
private class ViewHolder {
//some more objects
ProgressBar pb1;
ProgressBar pb2;
Button leftVoteButton;
Button rightVoteButton;
}
All the answers and comments are appreciated, have a great day and thank you.
You're doing it wrong.
The problem is that you need to have a Model somewhere, and change its status. Then the view is updated regarding the model status.
For example, let's say that this is a "StackOverflow" app, and you have a list of answers. The user upvote the second answer. This means that the second element of the List is upvoted.
Now what?
When the adapter is going through your list of object it will "fire" the getView method for that position. Then you have to update that position according to your model. So, if the position is 1, the adapter is trying to show the second Answer, and you have to set the button to "upvoted". Otherwise you have to set it as "normal".
private List<Answer> answers;
public View getView(int position, View convertView, ViewGroup parent) {
// here get your view (or initialize it)
// get the matching answer
Answer answer = answers.get(position);
if(answer.isUpvoted()) {
holder.pb1.setVisibility(View.VISIBLE);
holder.pb2.setVisibility(View.VISIBLE);
} else {
holder.pb1.setVisibility(View.INVISIBLE);
holder.pb2.setVisibility(View.INVISIBLE);
}
holder.leftVoteButton.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View v) {
holder.pb1.setVisibility(View.VISIBLE);
holder.pb2.setVisibility(View.VISIBLE);
// not sure on how to get this answer here
// you probably have to go "upper" and manage the click from the ListView
answer.setUpvoted(true);
}
});
}
I have the following code inside my adapter:
public View getView(int position, View convertView, ViewGroup parent)
{
if (convertView==null)
{
LayoutInflater inflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = inflater.inflate(R.layout.box_afisare, null);
}
final TextView titlu = (TextView) convertView.findViewById(R.id.titlu);
titlu.setText(Html.fromHtml(textt.get(position)));
titlu.setTextSize(TypedValue.COMPLEX_UNIT_SP,font);
final Integer pos = position;
titlu.setOnClickListener(new View.OnClickListener()
{
public void onClick(View v)
{
if (main_contextt.selectie.contains(id_post.get(pos)))
{
Toast.makeText(mContext," REMOVE ",Toast.LENGTH_LONG).show();
titlu.setBackgroundColor(Color.parseColor("#0077CC"));
}
else
{
main_contextt.selectie.add(id_post.get(pos));
titlu.setBackgroundColor(Color.parseColor("#404040"));
}
}
});
return convertView;
}
I manage to colorate the selected line or lines. But when i scroll the listview and those selected lines are no longer in view range of the phone....the background color disapear.
It disapear only if that line/lines is out of view. I think the adapter is redrawing?
What to do to remain the color set on the line/lines even after i scroll the listview?
thanks
ListViews recycle their child views. So if you have 20 items in your ListView but only enough room on the screen to show 4 at a time, the ListView will only have 4 children which it will recycle to show all 20 items. When one view scrolls out of view, it is recycled for the next view coming into view. See this answer for a great explanation.
What you need to do is tie the color to some underlying data. Then you would use code like.
titlu.setOnClickListener(new View.OnClickListener()
{
public void onClick(View v)
{
// set data.get(pos).color
}
});
titlu.titlu.setBackgroundColor(data.get(pos).color);
...something like that.
I have a list with each row having a radio button. I'm using the folowing code to toggle between them(TEMP is a static variable used to keep track of the element which has been selected, so that when listview refreshes the view I'm able to select it again) :
public void onClickRadioButton(View view) {
final int position = listView.getPositionForView(view);
View rowElement = ((View) view.getParent());
// uncheck previous checked button.
if (listRadioButton != null)
listRadioButton.setChecked(false);
// assign to the variable the new one
listRadioButton = (RadioButton) view;
// find if the new one is checked or not, and set "listIndex"
if (listRadioButton.isChecked()) {
listIndex = ((ListView) rowElement.getParent())
.getPositionForView(rowElement);
TEMP = listIndex;
} else {
listRadioButton = null;
listIndex = -1;
TEMP = listIndex;
}
System.out.println("list index : " + listIndex);
}
enter code here
This is the getView method of adapter class:
public View getView(int position, View convertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View rowView = inflater.inflate(R.layout.manage_parameter_list_element,
parent, false);
TextView textView = (TextView) rowView
.findViewById(R.id.parameter_textView);
textView.setText("something");
TextView textView2 = (TextView) rowView
.findViewById(R.id.parameter_range_textView);
textView2.setText("something more");
if(position == SelectParameterActivity.TEMP)
// SelectParameterActivity is the class whose code I've written above
{
((RadioButton) rowView.findViewById(R.id.parameter_radioButton))
.performClick();
}
return rowView;
}
Under normal conditions the switch between radio buttons is fine
Now the problem is, consider this scenario:
I select option1....move down(so that option1 is not on screen anymore)....move up(option1 is visible again)...select option2(or any other apart from 1st)
Now the 1st option does'nt get deselected..
To deselect option1 I have to click on it twice.
FYI I've tried the performClick() method which does not work due to IllegalSateException.
Every time getView() is called you inflate a new View. This method gets called a lot! You cannot rely on the state of your radio button being stored/saved in the view. When the user clicks on a radio button, you need to save this information as part of your data, not in the view. Then, in getView() you need to set the state of the radio button based on the information that you have saved in the data.
An activity has a Button and a ListView.
Initially, only the Button is visible. When the button is pressed, the ListView is displayed.
When displayed, is it possible for me to show one particular item as selected/focussed?
A use case could be that suppose it is a list of language settings and when the list opens, the currently selected language must be shown as highlighted.
If I know the index of the item, how to set it as focused on display?
I post my solution, because google still doesn't know the answer.
getListView().setItemChecked(selectedGroupIndex, true);
In short, ListView::setSelection(int position) is what you need. However, depending on whether the device is in touch mode or not, it may or may not have visual effect (background highlighting). For more details, refer to Android ListView Selection Problem
If you use an Adapter for your ListView add this code to your adapter:
public class MyAdapter extends ArrayAdapter<MyClass> {
#Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
LayoutInflater inflator = (LayoutInflater) getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
rowView = inflator.inflate(R.layout.my_adapter, null);
} else {
rowView = (View) convertView;
}
//...
// set selected item
LinearLayout ActiveItem = (LinearLayout) rowView;
if (position == selectedItem){
ActiveItem.setBackgroundResource(R.drawable.background_dark_blue);
// for focus on it
int top = (ActiveItem == null) ? 0 : ActiveItem.getTop();
((ListView) parent).setSelectionFromTop(position, top);
}
else{
ActiveItem.setBackgroundResource(R.drawable.border02);
}
}
private int selectedItem;
public void setSelectedItem(int position) {
selectedItem = position;
}
}
In your Activity:
myAdapter.setSelectedItem(1);
I am using an Adapter and didn't want to set custom background colors, but use the android:state_selected in drawable xml. SetSelection didn't work for me, but maybe that's also since I needed SetNotifyDataChanged which shows that the Selected State is not persistent.
I also found that the Selected state for an item in a ListView is not persistent, since SetNotifyDataChanged results in updating the ListView layout which clears them all. Setting the item to Selected in the Adapter's GetView is too soon too.
Eventually I set the Selected state for the view of the selected item after the layout of the listview has been changed, which is when LayoutChange event is being triggered (in Java it's probably attaching a to OnLayoutChangeListener of the ListView).
To make it really easy I store the view of the selected item as Adapter's SelectedItemView.
In the ListView's LayoutChange eventhandler I just set the adapter's SelectedItemView.Selected to true.
Here's the code from my Activity where I set the Adapter for the ListView and also subscribe to LayoutChange (or in Java attach an OnLayoutChangeListener)
ringTonesListView.Adapter = ringTonesListAdapter;
ringTonesListView.LayoutChange += (s, layoutChangeArgs) => {
//At this stage the layout has been updated and the Selected can be set to true for the view of the selected item. This will result in android:state_selected logic to be applied as desired and styling can be completely done per layout in Resources.
ringTonesListAdapter.SelectedItemView.Selected = true;
};
Here's my code for the Adapter:
public class RingTonesListAdapter : BaseAdapter<RingToneItem>
{
List<RingTone> Items { get; set; }
public override View GetView(int position, View convertView, ViewGroup parent)
{
View view = convertView;
// re-use an existing view, if one is available
// otherwise create a new one
if (view == null)
{
view = Context.LayoutInflater.Inflate(Resource.Layout.AlertSoundItem, parent, false);
view.Click += SelectRingTone;
}
RingTone ringTone = this[position];
if (ringTone.Selected)
{
//==> Important
//Store this view since it's the view for the Selected Item
SelectedItemView = view;
//Setting view.Selected to true here doesn't help either, since Selected will be cleared after.
}
return view;
}
private void SelectRingTone(object sender, EventArgs args)
{
View view = (View)sender;
string title = view.FindViewById<TextView>(Resource.Id.ringToneTitle).Text;
RingToneItem ringToneItem = Items.First(rt => rt.Title == title);
if (!ringToneItem.Selected)
{
//The RingTone was not selected and is selected now
//Deselect Old and Select new
foreach (RingToneItem oldItem in Items.Where(rt => rt.Selected))
{
oldItem.Selected = false;
}
// Select New RingTone
ringToneItem.Selected = true;
//Update the ListView.
//This will result in removal of Selected state for all Items when the ListView updates it's layout
NotifyDataSetChanged();
}
//Now play the test sound
NotifierService.TestSound(Context, ringToneItem);
}
public View SelectedItemView { get; set; }
}
Hallo all,
I have a ListView which contains a Button in each line. The following code is part of the getView() Method
public View getView(final int position, View convertView, ViewGroup parent) {
View row = convertView;
TextView tv;
Button saveA_button;
EditText edittext;
FITB_ViewWrapper wrapper;
if (row == null) {
LayoutInflater li = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if (ChooseMode_Act.modeInfo.equalsIgnoreCase("Training")) {
row = li.inflate(R.layout.exercise_for_training_fitb,parent, false);
}else {
row = li.inflate(R.layout.exercise_for_exam_fitb,parent, false);
}
wrapper=new FITB_ViewWrapper(row);
row.setTag(wrapper);
if (ChooseMode_Act.modeInfo.equalsIgnoreCase("Exam")) {
saveA_button=wrapper.getSaveAnswer_Button();
OnClickListener l=new OnClickListener() {
#Override
public void onClick(View v) {
Integer mp=(Integer)v.getTag();
Log.i("mp","my Position is: "+mp);
}
};
saveA_button.setOnClickListener(l);
}
}else {
wrapper=(FITB_ViewWrapper) row.getTag();
}
For my App i need to known to which item the Button belongs to, so i try to detect it. The code
Log.i("mp","my Position is: "+mp);
puts out a message: mp myPosition is: null
I can't understand, why do i get a "null" but not an Integer? How can i find out the Position of an Item in a ListView?
Thanks a lot.
Log.i("mp","my Position is: "+position);
you have the position already !
public View getView(final int position, View convertView, ViewGroup parent) {
The Views in a ListView are reused as you scroll up and down. Thus, setting values in getView often has unintented consequences, like the image that you meant to set for item number 5 appearing in item number 10, 15 and 20 also.
To avoid this, if you want to set properties in getView you need to make sure you set or unset them for each view.
I'm not sure what exactly you are trying to accomplish with your code, but it might help to move the setTag outside of the if statement, to make sure you are setting it each time that a view is used.