Develop Reference

Android - programatically changing the row layout of a custom listView row fails when focus is requested on its edittext child

Sorry for the long title.
I have an android application which shows a custom listView with 5 TextView columns. When the user clicks a row, I change the layout to have 3 TextViews and 2 EditTexts. I have different layout files for both of them. Everything worked fine initially, the row layout changes properly and I am able to click on the EditText and input values. However, I want either of the 2 EditText to automatically gain focus based on what is clicked. I already have a working code for this. My problem is that programatically requesting requestFocus() seems to block the part where I change the row layout with the new view.
Here is the code that changes my row layout, it works fine without the requestFocus() line:
private void changeLayout(final View view){
//get views from old row layout
TextView textViewQuantity = (TextView)view.findViewById(R.id.qtyInput);
TextView textViewDiscountReq = (TextView)view.findViewById(R.id.discInput);
TextView textViewName = (TextView)view.findViewById(R.id.dialogItemName);
TextView textViewPrice = (TextView)view.findViewById(R.id.price);
TextView textViewDiscount = (TextView)view.findViewById(R.id.discount);
//store values in strings
String itemName = textViewName.getText().toString();
String itemPrice = textViewPrice.getText().toString();
String itemDiscount = textViewDiscount.getText().toString();
String itemQty = textViewQuantity.getText().toString();
String itemDisc = textViewDiscountReq.getText().toString();
//set the view to gone
textViewQuantity.setVisibility(View.GONE);
textViewDiscountReq.setVisibility(View.GONE);
textViewName.setVisibility(View.GONE);
textViewPrice.setVisibility(View.GONE);
textViewDiscount.setVisibility(View.GONE);
//get the old layout
LinearLayout ll_inflate = (LinearLayout)view.findViewById(R.id.search_result_layout);
//get the inflate/new view
View child = getLayoutInflater().inflate(R.layout.search_result_inflate, null);
//get the views in the new view, populate them
TextView newName = (TextView)child.findViewById(R.id.dialogItemName);
newName.setText(itemName);
TextView newDiscount = (TextView)child.findViewById(R.id.discount);
newDiscount.setText(itemDiscount);
TextView newPrice = (TextView)child.findViewById(R.id.price);
newPrice.setText(itemPrice);
qtyIn = (EditText)child.findViewById(R.id.qtyInputSearchResult);
qtyIn.setText(itemQty);
qtyIn.setFilters(new InputFilter[] {filter});
discIn = (EditText)child.findViewById(R.id.discInputSearchResult);
discIn.setText(itemDisc);
//show new layout
ll_inflate.removeAllViews();
ll_inflate.removeAllViewsInLayout();
ll_inflate.addView(child);
//request focus here
if(focusTarget == 1){
Log.d("hello", "focus target is 1 " );
qtyIn.setFocusable(true);
qtyIn.setFocusableInTouchMode(true);
qtyIn.requestFocus();
}
else if(focusTarget == 2){
Log.d("hello", "focus target is 2 " );
discIn.requestFocus();
}
Log.d("hello", "focus state qtyIn = " + qtyIn.isFocused());
Log.d("hello", "focus state discIn = " + discIn.isFocused());
}
The interesting part is that the Log shows the proper values, it says the proper focus status according to what I want. However, the ll_inflate.addView(child); line does not work at all!
Does anyone know what happened here? I'm really confused as to why the layout didn't change but the lines after the .addView() line executed. Another weird thing is how requestFocus(); prevents the view from changing.
Any help is very much appreciated. Thanks.

You are doing this in wrong way. You should have two type of view in list, one for show data and one for edit it.
First set view type count
final int TYPE_EDIT =0,TYPE_VIEW =1;//EDIT 7/9/016 type need to be start from 0
public int getViewTypeCount (){
return 2;
}
public int getItemViewType (int position){
//return type as needed. simple if you add int for this in data model
}
And inside getView
public View getView (int position, View convertView, ViewGroup parent){
int type = getItemViewType ();
if(null==convertView){
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
if(type ==TYPE_EDIT){
convertView = inflater.inflate(R.layout.rowEditlayout, parent, false);
}else{
convertView = inflater.inflate(R.layout.rowlayout, parent, false);
}
}
}
Do the changes in list data on edit button click and call notifydatasetchanged on adapter

Listview with button onclick's position changes while scrolling

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.

Separately highlight nested TextView and ImageView in ListView row

(Ok, I've researched a lot and found a few answers but nothing really worked for me.. so I've finally opened an account to post here. Thanks to the community for all your answers earlier!)
Context
I am creating a category selector (ListView with a custom adapter)- each category can have multiple sub-categories and each sub-category can have multiple sub-categories. For the selector, I'm using a ListView with a custom List item - TextView (to display category) and an ImageView (the forward arrow) to indicate if the category has sub-categories - see this image:
I want the user to do the following actions
(1) Click on the category name to SELECT that category
(2) Click on the forward arrow to SEE all sub-categories (it will re-populate the ListView with all sub-categories)
Question Starts here
I want the user to see the following highlights/focus on the user does the about two actions (1) and (2)
Highlight on action (1)
See this image:
Highlight the row when the user clicks on the category name/row.
This happens automatically because I've setup
listView.setOnItemClickListener()
Highlight on action (2)
See this image:
I want the user to see the highlight only on the forward-arrow and not the row. I'm able to register the CLICK on the image with
imageView.setOnClickListener()
in my custom adapter but I'm unable to get the highlight on the forward-arrow
How do I get this highlight on the ImageView?
Code
Activity's onCreate() {
LayoutInflater inflater = getActivity().getLayoutInflater();
View categorySelectView = inflater.inflate(R.layout.cat_select, null);
LinearLayout categorySelectLayout = (LinearLayout) categorySelectView;
ListView categoryListView = (ListView) categorySelectLayout.findViewById(R.id.list_cat_select);
CategoryArrayAdapter categoryArrayAdapter = new CategoryArrayAdapter(this.getActivity(), CategoryAdapter.getAllCategories());
categoryListView.setAdapter(categoryArrayAdapter);
categoryListView.setOnItemClickListener(categorySelectClickHandler);
}
CategoryARrayAdapter's getView(int position, View covertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View rowView = inflater.inflate(R.layout.cat_item, parent, false);
TextView textView = (TextView) rowView.findViewById(R.id.cat_name);
Category catToDisplay = categories.get(position);
textView.setText(catToDisplay.getName());
if(catToDisplay.isParent()) {
ImageView imageView = (ImageView) rowView.findViewById(R.id.cstrow_cat_expand);
imageView.setImageResource(R.drawable.cat_expand);
imageView.setOnClickListener(categoryExpandClickHandler);
imageView.setFocusable(false); // to make sure the highlight on row shows
imageView.setFocusableInTouchMode(false); // to make sure the highlight on row shows
}
return rowView;
}

So here is what I've done. This should be scalable too.
The CategoryArrayAdapter has the following getView()
public View getView(int position, View covertView, ViewGroup parent) {
LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View rowView = inflater.inflate(R.layout.cat_select, parent, false);
TextView textView = (TextView) rowView.findViewById(R.id.cat_name);
Category catToDisplay = categories.get(position);
textView.setText(catToDisplay.getName());
if(catToDisplay.isParent()) {
ImageView imageView = (ImageView) rowView.findViewById(R.id.cstrow_cat_expand);
imageView.setImageResource(R.drawable.cat_expand);
imageView.setOnClickListener(categoryExpandClickHandler);
imageView.setOnTouchListener(categoryExpandTouchHandler);
imageView.setFocusable(false); // to make sure the highlight on the item shows
imageView.setFocusableInTouchMode(false); // to make sure the highlight on the item shows
imageView.setTag(catToDisplay);
}
return rowView;
}
Two things that made this work
imageView.setOnTouchListener() allows me to set the highlight (thanks Piyush Gupta for pointing out the setBackgroundColor() method
imageView.setOnClickListener() allows me to perform the action when the user clicks on arrow
/**
* This method listens to the TOUCH CLICK on the IMAGEVIEW to give it button like feeling
*/
private View.OnTouchListener categoryExpandTouchHandler = new View.OnTouchListener() {
#Override
public boolean onTouch(View v, MotionEvent event) {
switch(event.getAction()) {
case MotionEvent.ACTION_DOWN: {
v.setBackgroundColor(getContext().getResources().getColor(R.color.highlight_cat_expand));
break;
}
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP: {
v.setBackgroundColor(getContext().getResources().getColor(android.R.color.transparent));
break;
}
}
return false;
}
};
/**
* This method listens to EXPAND IMAGEVIEW CLICK in the LISTVIEW of categories
*/
private View.OnClickListener categoryExpandClickHandler = new View.OnClickListener() {
#Override
public void onClick(View view) {
// Expanding this category
... expand code here ...
}
};
To get the HIGHLIGHT and CLICK to work together, return false in onTouchListener(). This will pass the touch event to the onClickListener(). I got this solution from https://stackoverflow.com/a/10376887/3393044 comment by the thin

ListView Odd/Even Rows Refresh Automatically When Scrolling Down Or Selecting AnotherItem

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

Android:To set an item as selected when the ListView opens?

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; }
}